/* Start & visit page tiles */
.thumbnail {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    transition: box-shadow 0.15s ease;
}
.thumbnail:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.14);
}

/* Visit page tiles - flexbox auto-flow layout */
.visit-tiles {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.visit-tiles > a {
    width: 33.33%;
    padding: 0 15px;
    box-sizing: border-box;
    display: flex;
}
.visit-tiles .thumbnail {
    flex: 1;
}
@media (max-width: 991px) {
    .visit-tiles > a {
        width: 100%;
    }
    /* Start page, single-column mode: most used actions first. Every tile needs an
       explicit order — a flex item defaults to 0 and would jump above the list.
       Wydanie zewnętrzne: technicians (start-tiles-tech) get it right under Nowa
       wizyta, everyone else under Stan leków. Desktop keeps the DOM order. */
    #link-start-page-new-visit-id { order: 1; }
    #link-start-page-pricing-id { order: 3; }
    #link-start-page-drug-state-id { order: 4; }
    #link-start-page-external-goods-issue-id { order: 5; }
    .start-tiles-tech #link-start-page-external-goods-issue-id { order: 2; }
    #link-start-page-calendar-id { order: 6; }
    #link-start-page-books-id { order: 7; }
    /* Technicians issue no treatment cards, so the treatment book is the tile they reach
       for last - it drops below everything else (features tiles are order 11 and hidden
       for technicians anyway). */
    .start-tiles-tech #link-start-page-books-id { order: 12; }
    #link-start-page-clients-id { order: 8; }
    #link-start-page-new-drug-invoice-id { order: 9; }
    #link-start-page-vat-invoice-id { order: 10; }
    #link-start-page-features-id,
    #link-start-page-features-id-mobile { order: 11; }
}

.invoice-summary-price {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0 24px;
    margin-top: 16px;
}

.invoice-summary-price .invoice-form-label,
.invoice-summary-price .form-control-static {
    color: #1f356a;
}

.invoice-summary-price .form-control-static strong {
    color: #14315c;
    font-weight: 700;
}
html {
    overflow-x: hidden;
    overflow-x: scroll;
    overflow-y: scroll;
}

/* ==========================================================================
   Responsive navbar - progressive collapse into the hamburger menu
   The bar holds (left to right): logo (~207px), language select (~121px),
   login name (capped at 130px) and the right-aligned menu. Breakpoints are
   computed from measured item widths so the menu never wraps to a second
   line: an item is dropped as soon as header + menu + 75px hamburger reserve
   stops fitting. Admins carry one extra item (Uzytkownicy, ~159px), so their
   collapse starts earlier via the .navbar-role-admin class set in
   navbar_20260915_1107_.html. Keep the thresholds in sync with the item set - a new
   top-level item shifts every threshold up by its width. 2026-08-26: the
   "Twoj dzien" pulse (#navbar-li-todaywork, ~80px, never collapsed) joined the
   menu, so every threshold below already includes those 80px.
   ========================================================================== */

.navbar.navbar-fixed-top {
    position: fixed;
}

/* The menu row may use the full bar width - the global .container-fluid cap
   (max-width: 80%) would waste 10% of the viewport on each side and force a
   much earlier collapse now that the language select and login sit on the left. */
.navbar .container-fluid {
    max-width: none;
}

/* Hamburger - hidden by default, ALWAYS fixed at the right screen edge */
#navbar-btn-gen-opt-id {
    display: none;
    position: fixed !important;
    right: 15px !important;
    top: 8px !important;
    float: none !important;
    margin: 0 !important;
    padding: 12px 15px;
    z-index: 1001;
}

#navbar-btn-gen-opt-id .icon-bar {
    width: 24px;
    height: 3px;
    margin: 4px 0;
}

/* Login shown in the bar: real logins are e-mails up to 40+ chars, so without
   a cap no fixed breakpoint can hold - overflow shows an ellipsis instead. */
.navbar-login-text {
    display: inline-block;
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

/* Language picker on phones: the full-name select overflowed the bar, so xs shows a compact
   PL/CS/EN select docked at the right edge, next to the menu button. */
.navbar-lang-mobile {
    float: right;
    width: auto;
    height: 32px;
    margin: 9px 8px 0 0;
    padding: 4px 6px;
    font-size: 12px;
    font-weight: 600;
    color: #537fbe;
}

/* The hamburger is position: fixed (right: 15px), so it reserves no space in the bar - the
   select has to leave room for it, but only while it is actually rendered (logged in).
   The reserve is the button's own geometry, not a guess: 15px right offset + 56px button
   (24px bars + 2x15px padding + 2x1px border) + 8px gap. At 62px the select ran 9px UNDER
   the hamburger on every phone width. */
.navbar-lang-mobile-with-menu {
    margin-right: 79px;
}

@media (max-width: 767px) {
    /* With the full-name select hidden, this wrapper is mostly padding - drop it so the
       login name is not pushed to the right for nothing. */
    .navbar-lang-wrap {
        padding-left: 0;
        padding-right: 0;
    }
}

/* Admin: the extra Uzytkownicy item stops fitting first - drop it and bring in
   the hamburger (it stays reachable in the mobile menu modal). Below this the
   admin bar is identical to everyone else's, so no further admin rules exist. */
@media (max-width: 1750px) {
    .navbar-role-admin #navbar-li-users {
        display: none !important;
    }

    /* :not(.ng-hide) keeps the button away from the logged-out page - the plain
       #id !important rule would out-rank Angular's .ng-hide and resurrect it */
    .navbar-role-admin #navbar-btn-gen-opt-id:not(.ng-hide) {
        display: block !important;
    }

    .navbar-role-admin .hidden-xs .container-fluid {
        padding-right: 75px;
    }
}

/* Admin: Konto goes next, slightly before the shared threshold below */
@media (max-width: 1650px) {
    .navbar-role-admin #navbar-li-account {
        display: none !important;
    }
}

/* Below 1590px - first shared collapse step: hide Konto, show the hamburger
   and reserve space at the right edge so menu items never slide under the
   (position: fixed) hamburger button. */
@media (max-width: 1590px) {
    /* :not(.ng-hide) keeps the button away from the logged-out page - the plain
       #id !important rule would out-rank Angular's .ng-hide and resurrect it */
    #navbar-btn-gen-opt-id:not(.ng-hide) {
        display: block !important;
    }

    .navbar .hidden-xs .container-fluid {
        padding-right: 75px;
    }

    #navbar-li-account {
        display: none !important;
    }
}

/* Below 1520px - hide Moduly */
@media (max-width: 1520px) {
    #navbar-li-modules-id {
        display: none !important;
    }
}

/* Below 1390px - hide Klienci */
@media (max-width: 1390px) {
    #navbar-li-clients {
        display: none !important;
    }
}

/* Below 1270px - hide Dokumenty */
@media (max-width: 1270px) {
    #navbar-li-documents {
        display: none !important;
    }
}

/* Below 1110px - hide Magazyn, Uzytkownicy (safety net - admins lost it at
   1750px already) and the owner-only pair Moje zwierzeta / Status zdrowotny;
   Start, Kalendarz and Wizyta remain. The two owner items are ng-hide for every
   clinic account, so they add no width to the staff/admin bar and none of the
   thresholds above had to move when Status zdrowotny was added. */
@media (max-width: 1110px) {
    #navbar-li-warehouse,
    #navbar-li-users,
    #navbar-li-myAnimals-id,
    #navbar-li-ownerHealth-id {
        display: none !important;
    }
}

/* Below 980px the remaining mini menu only fits without the login name - the
   login gives way (full value stays in the element's title tooltip) and the
   mini menu survives down to the Bootstrap xs boundary at 767px, below which
   hidden-xs removes the whole desktop menu and only the logo, the compact
   language select and the hamburger remain. */
@media (max-width: 980px) {
    .navbar-login-wrap {
        display: none !important;
    }
}

/* Puls "Twoj dzien": czerwone pulsujace kolo + liczby kart roboczych (pomaranczowa)
   i zadan (niebieska) na dzis. Desktop: pierwsza pozycja menu (#navbar-li-todaywork,
   nigdy nie zwijana do kanapki); telefony (<768px): kompaktowy klon w naglowku. */
.navbar-todaywork-link {
    cursor: pointer;
    text-decoration: none !important;
}

#navbar-li-todaywork > a {
    padding-left: 10px;
    padding-right: 10px;
}
/* The two legacy tablet overrides below were written for the TOP navbar only; scoped to
   .navbar-fixed-top so their !important floats and nowrap do not leak into the "Opcje"
   sub-menus (.mobile-menu .navbar-default), which have their own tablet rules. Their
   "display: ... !important" rules carry :not(.ng-hide) guards - without them they used to
   resurrect elements Angular had hidden (the offline status row, gated menu items). */

/* Poniżej 770px ale powyżej 760px - pokaż tylko Start, Zadania i Wizyta */
@media (min-width: 761px) and (max-width: 770px) {
    .navbar .hidden-xs {
        display: block !important;
    }

    .navbar .hidden-xs .container-fluid:not(.ng-hide) {
        display: block !important;
    }

    /* Ukryj duplikat logo */
    #navbar-link-index-id {
        display: none !important;
    }

    /* Ukryj sekcję z linkami (Aplikacja, Funkcje, Cennik, Kontakt) */
    .navbar .hidden-xs .container-fluid > div[ng-hide="userId !== undefined && userId !== null"],
    .navbar .hidden-xs .weter-navbar-text,
    .navbar .hidden-xs #navbar-link-aboutProgram-id,
    .navbar .hidden-xs #navbar-link-pricing-id,
    .navbar .hidden-xs #navbar-link-contact-id {
        display: none !important;
    }

    /* Ukryj wszystkie opcje oprócz Start, Zadania i Wizyta */
    #navbar-li-users,
    #navbar-li-warehouse,
    #navbar-li-documents,
    #navbar-li-clients,
    #navbar-li-myAnimals-id,
    #navbar-li-modules-id,
    #navbar-li-account {
        display: none !important;
    }

    /* Pokaż tylko Start, Zadania i Wizyta */
    #navbar-li-start:not(.ng-hide),
    #navbar-li-occurrence-id:not(.ng-hide),
    #navbar-li-visit:not(.ng-hide) {
        display: inline-block !important;
        float: left !important;
    }

    /* Menu w jednej linii - nadpisanie Bootstrap */
    .navbar-fixed-top .navbar-nav:not(.ng-hide) {
        display: flex !important;
        flex-direction: row !important;
        float: left !important;
        margin: 0 !important;
    }

    .navbar-fixed-top .navbar-nav > li:not(.ng-hide) {
        float: left !important;
    }

    .navbar-fixed-top .navbar-nav > li > a {
        padding: 15px 10px !important;
    }
}

.todaywork-circle {
    display: inline-block;
    /* 21px = the text-line height of the neighbouring menu options — as large as the
       circle can get without out-growing them (user request 2026-08-26). */
    width: 21px;
    height: 21px;
    border-radius: 50%;
    background: #b9bec7;
    vertical-align: middle;
    margin-right: 5px;
}

.todaywork-circle-active {
    background: #d9534f;
    animation: todaywork-pulse 1.6s ease-out infinite;
}

@keyframes todaywork-pulse {
    0% { box-shadow: 0 0 0 0 rgba(217, 83, 79, 0.55); }
    70% { box-shadow: 0 0 0 10px rgba(217, 83, 79, 0); }
    100% { box-shadow: 0 0 0 0 rgba(217, 83, 79, 0); }
}

/* Uzytkownicy z preferencja ograniczonego ruchu dostaja kolo bez animacji. */
@media (prefers-reduced-motion: reduce) {
    .todaywork-circle-active {
        animation: none;
    }
}

.todaywork-count {
    font-weight: 700;
    font-size: 13px;
    vertical-align: middle;
}

.todaywork-count-drafts {
    color: #e67e22;
}

.todaywork-count-tasks {
    color: #537fbe;
    margin-left: 4px;
}

/* p41: wydania zewnetrzne w pulsie — ten sam fiolet co plakietka sekcji na /todaywork. */
.todaywork-count-egis {
    color: #8e44ad;
    margin-left: 4px;
}

/* p42 (2026-08-26): na telefonie kolo pulsu stoi DOKLADNIE posrodku naglowka — miedzy
   logo Weter.pl a hamburgerem — zamiast doklejac sie do tekstu loginu. Absolut wzgledem
   .navbar (bootstrap: position relative), wiec srodek liczy sie z calej szerokosci paska.
   p51: pion centrowany wzgledem FAKTYCZNEJ wysokosci naglowka (na xs jest wyzszy niz 50px
   przez duze logo) — stale top:0/height:50px wieszalo kolo za wysoko, nad linia logo. */
/* Float, a NIE `position: absolute; right: 132px`: staly odstep od prawej zakladal stala
   szerokosc selecta jezyka, a ten rosnie razem z etykieta („PL" / „CS" / „EN") i z krojem
   systemowym - kolo wchodzilo pod select. Jako element plywajacy w prawo, PO selekcie w DOM,
   kolo zawsze staje bezposrednio na lewo od niego, niezaleznie od jego szerokosci. */
.navbar-todaywork-mobile {
    float: right;
    /* select: margin-top 9px + wysokosc 32px; kolo ma 20px, wiec 9 + (32-20)/2 = 15px */
    margin: 15px 10px 0 0;
    display: flex;
    align-items: center;
    padding: 0 4px;
    white-space: nowrap;
    text-decoration: none !important;
    z-index: 3;
}

/* Klon mobilny nosi JEDNA laczna liczbe WEWNATRZ kola (badge) — trzy osobne liczniki nie
   mieszcza sie w luce miedzy szerokim logo a selectem jezyka i wjezdzaly na napis. Rozbicie
   na typy jest jedno tapniecie dalej: naglowek /todaywork pokazuje kolka per sekcja (p52). */
.navbar-todaywork-mobile .todaywork-circle {
    width: 20px;
    height: 20px;
    margin-right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.todaywork-mobile-total {
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

/* ------- Ekran /todaywork ("Twoj dzien") ------- */

/* p49: akcje tworzenia pod tytulem, dosuniete do prawej. */
.todaywork-page-actions {
    text-align: right;
    margin-bottom: 10px;
}

.todaywork-page-actions .btn {
    margin-left: 6px;
    margin-bottom: 4px;
}

/* p52: kolka z liczbami przy tytule ekranu — te same kolory co plakietki sekcji. */
.todaywork-title-badges {
    margin-left: 6px;
    vertical-align: middle;
}

.todaywork-title-badges .badge {
    margin-left: 4px;
}

/* p53: sekcje przestawiane drag&drop za naglowek panelu. */
.todaywork-section .panel-heading {
    cursor: grab;
}

/* p61: tytul ekranu i tytuly sekcji ZAWSZE do lewej (nie centrowane). */
.todaywork-page h3,
.todaywork-page h4,
.todaywork-section .panel-heading {
    text-align: left;
}

.todaywork-drag-grip {
    color: #8a9099;
    font-size: 15px;
    margin-right: 8px;
    vertical-align: middle;
}

/* Naglowek sekcji jest uchwytem dnd — kursor "grab" mowi to zanim uzytkownik sprobuje. */
.todaywork-section .panel-heading[draggable="true"] {
    cursor: grab;
}

.todaywork-section .panel-heading[draggable="true"]:active {
    cursor: grabbing;
}

.todaywork-section-dragging {
    opacity: 0.5;
}

/* p102: wskaznik upuszczenia = przerywana linia MIEDZY sekcjami (nie obrys celu).
   Pseudoelement na wrapperze sekcji — nie rusza layoutu; -2px celuje w przerwe
   miedzy panelami. Klasy nadaje dyrektywa todayworkSectionDrag wg kierunku ruchu. */
.todaywork-section {
    position: relative;
}

.todaywork-drop-before::before,
.todaywork-drop-after::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    border-top: 3px dashed #537fbe;
    z-index: 5;
    pointer-events: none;
}

.todaywork-drop-before::before {
    top: -2px;
}

.todaywork-drop-after::after {
    bottom: -2px;
}

/* p10: przyciski akcji w sekcjach „Twojego dnia" maja szerokosc WLASNEJ TRESCI, nie calej
   kolumny. Wczesniej niosly btn-block i rozciagaly sie na pelna szerokosc komorki, przez co
   „Podglad" wygladal jak pas rownie szeroki co „Przenies na karte leczenia" — akcje glowne
   ekranu („Dodaj karte robocza") sa zwyklej szerokosci i te na listach maja z nimi trzymac
   jeden rytm. Regula jest WSPOLNA dla desktopu i telefonu; blok xs nizej tylko ja powtarza
   przy zlozeniu tabeli w karty. */
.todaywork-table tbody td.todaywork-actions {
    text-align: right;
    white-space: nowrap;
}

.todaywork-table tbody td.todaywork-actions .btn {
    display: inline-block;
    width: auto;
    margin: 0 0 4px 6px;
}

/* p40: na telefonie tabele skladaja sie w karty (wiersz = ramka, kazda komorka z wlasna
   etykieta z data-label) — zamiast poziomego przewijania calej tabeli. Desktop bez zmian. */
@media (max-width: 767px) {
    /* p51: akcje tworzenia wysrodkowane i mniejsze na telefonie (desktop: p49 — do prawej). */
    .todaywork-page-actions {
        text-align: center;
    }

    .todaywork-page-actions .btn {
        padding: 5px 10px;
        font-size: 13px;
        margin: 0 3px 6px;
    }

    /* p51: link "Pelna lista..." we wlasnej linii naglowka sekcji, z odstepem od tytulu —
       plywajac obok plakietki klejl sie do tytulu panelu. */
    .todaywork-page .panel-heading > a.pull-right {
        display: block;
        float: none !important;
        text-align: right;
        margin-top: 6px;
    }

    .todaywork-table-wrap {
        border: 0;
        overflow-x: visible;
    }

    .todaywork-table thead {
        display: none;
    }

    .todaywork-table tbody tr {
        display: block;
        border: 1px solid #ddd;
        border-radius: 4px;
        margin-bottom: 10px;
        padding: 6px 10px;
        background: #fff;
    }

    .todaywork-table tbody td {
        display: flex;
        justify-content: space-between;
        gap: 10px;
        border: 0;
        padding: 4px 0;
        text-align: right;
    }

    .todaywork-table tbody td:before {
        content: attr(data-label);
        font-weight: 700;
        color: #666;
        text-align: left;
        flex-shrink: 0;
    }

    /* Komorka akcji bez etykiety (p40); p51: przyciski w STANDARDOWYM rozmiarze .btn
       (bez zmniejszania) i dosuniete do prawej — jak opcje na listingach. */
    /* Bootstrapowe `.table-responsive > .table > tbody > tr > td { white-space: nowrap }`
       ((0,2,4)) wygrywalo z regulami tego bloku — komorki zlozone w karty musza sie zawijac,
       stad selektor o wyzszej specyficznosci. */
    .table-responsive.todaywork-table-wrap > .table > tbody > tr > td {
        white-space: normal;
    }

    .todaywork-table tbody td.todaywork-actions {
        display: block;
        width: auto;
        text-align: right;
        white-space: normal;
        padding-top: 6px;
    }

    .todaywork-table tbody td.todaywork-actions:before {
        content: none;
    }

    .todaywork-table tbody td.todaywork-actions .btn {
        display: inline-block;
        width: auto;
        margin: 0 0 4px 6px;
    }
}

/* Nadpisanie Bootstrap dla zakresu 761-850px - menu w jednej linii */
@media (min-width: 761px) and (max-width: 850px) {
    /* Nadpisanie Bootstrap collapse behavior */
    .navbar-fixed-top .navbar-header {
        float: left !important;
    }

    .navbar-fixed-top .navbar-nav:not(.ng-hide) {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        float: left !important;
        margin: 0 !important;
        width: auto !important;
    }

    .navbar-fixed-top .navbar-nav > li:not(.ng-hide) {
        float: left !important;
        display: inline-block !important;
    }

    .navbar-fixed-top .navbar-nav > li > a {
        padding: 15px 8px !important;
        display: inline-block !important;
    }

    /* Nadpisanie Bootstrap który zmienia navbar-nav na block poniżej 768px */
    .navbar-fixed-top .nav:not(.ng-hide) {
        margin: 0 !important;
        float: left !important;
    }

    .navbar-fixed-top .container-fluid:not(.ng-hide) {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
    }

    .navbar-fixed-top .container-fluid > div:not(.ng-hide) {
        float: left !important;
    }

    /* Upewnij się że ul jest inline */
    .navbar-fixed-top .navbar-right:not(.ng-hide) {
        float: left !important;
        margin-right: 0 !important;
    }
}

body {
    font-family: "Roboto", Helvetica, Arial, sans-serif;
    font-size: 11pt;
    behavior: url("csshover.htc");
    /*background:#CCCCCC none repeat scroll 0 0;*/
    margin: 0;
    padding: 0;
    padding-top: 70px;
}

/* Offline mode styles */

/* Lekko szare menu w trybie offline */
body.offline-mode .navbar {
    background-color: #f0f0f0 !important;
}

/* Subtelny pasek u góry navbar informujący o trybie offline */
body.offline-mode .navbar::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #ff9800, #f44336, #ff9800);
    background-size: 200% 100%;
    animation: offline-bar-slide 2s linear infinite;
}

@keyframes offline-bar-slide {
    0% { background-position: 0% 0%; }
    100% { background-position: 200% 0%; }
}

/* Status offline w navbar desktop */
.offline-status-text {
    color: #f44336 !important;
    font-weight: 600;
    cursor: default !important;
    display: inline-flex !important;
    align-items: center;
    padding-top: 15px !important;
    padding-bottom: 15px !important;
}

.offline-status-text i,
.offline-status-text .wifi-off {
    margin-right: 6px;
}

/* Alert offline w menu mobilnym */
.mobile-menu-offline-alert {
    background-color: #fff3cd;
    border: 1px solid #ffc107;
    color: #856404;
    padding: 12px 15px;
    border-radius: 8px;
    margin-bottom: 15px;
    text-align: center;
    font-weight: 600;
}

.mobile-menu-offline-alert i {
    margin-right: 8px;
    color: #f44336;
}

/* Ikona wifi z czerwonym X w prawym górnym rogu */
.wifi-off {
    display: inline-block;
    width: 1.6em;
    height: 1.4em;
    margin-left: 4px;
    margin-right: 4px;
    vertical-align: middle;
    /* WiFi (ciemniejsza, grubsza) + czerwony X w kółku w prawym górnym rogu */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='26' viewBox='0 0 30 26'%3E%3Cpath fill='none' stroke='%23444444' stroke-width='2.5' stroke-linecap='round' d='M2 9c6-5 16-5 22 0'/%3E%3Cpath fill='none' stroke='%23444444' stroke-width='2.5' stroke-linecap='round' d='M5 13.5c4.5-3.5 11.5-3.5 16 0'/%3E%3Cpath fill='none' stroke='%23444444' stroke-width='2.5' stroke-linecap='round' d='M8.5 18c2.5-2 6.5-2 9 0'/%3E%3Ccircle cx='13' cy='22.5' r='2.5' fill='%23444444'/%3E%3Ccircle cx='24' cy='6' r='5.5' fill='%23e53935'/%3E%3Cpath stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' d='M21.5 3.5l5 5M26.5 3.5l-5 5'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Wersja z niebieskim wifi */
.wifi-off-blue {
    display: inline-block;
    width: 1.6em;
    height: 1.4em;
    margin-left: 4px;
    margin-right: 4px;
    vertical-align: middle;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='26' viewBox='0 0 30 26'%3E%3Cpath fill='none' stroke='%23537fbe' stroke-width='2.5' stroke-linecap='round' d='M2 9c6-5 16-5 22 0'/%3E%3Cpath fill='none' stroke='%23537fbe' stroke-width='2.5' stroke-linecap='round' d='M5 13.5c4.5-3.5 11.5-3.5 16 0'/%3E%3Cpath fill='none' stroke='%23537fbe' stroke-width='2.5' stroke-linecap='round' d='M8.5 18c2.5-2 6.5-2 9 0'/%3E%3Ccircle cx='13' cy='22.5' r='2.5' fill='%23537fbe'/%3E%3Ccircle cx='24' cy='6' r='5.5' fill='%23e53935'/%3E%3Cpath stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' d='M21.5 3.5l5 5M26.5 3.5l-5 5'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Większa wersja ikony */
.wifi-off-lg {
    width: 2em;
    height: 1.8em;
}

/* Mniejsza wersja ikony do menu */
.wifi-off-sm {
    width: 1.1em;
    height: 0.9em;
}

body.print {

    font-size: 11pt;
    behavior: url("csshover.htc");
    background: #FFF none repeat scroll 0 0;
}

.text-bold, strong {
    font-weight: 700;
}

.rd-navbar {
    display: none;
    box-shadow: none;
}


.rd-navbar-static {
    background: #fff;
    -webkit-box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.15);
    box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.15);
}

.rd-navbar-brand .brand-name {
    font-family: "Manrope", "Montserrat", Helvetica, Arial, sans-serif;
    color: #121212;
    font-size: 34px !important;
    letter-spacing: 1.02px;
    /*line-height: 1.2;*/
    margin: 7px;
    padding-left: 33px;
}

/* Najwezsze telefony (<=400px): logo w pelnym rozmiarze + select jezyka + kolo „Twoj dzien"
   + kanapka nie mieszcza sie w jednym wierszu i kolo spadalo pod pasek. Schodzi samo logo -
   reszta paska zostaje bez zmian. MUSI stac PO regule bazowej: ta ma `!important`, wiec przy
   tej samej specyficznosci rozstrzyga kolejnosc w pliku. */
@media (max-width: 400px) {
    .rd-navbar-brand .brand-name {
        font-size: 26px !important;
        padding-left: 8px;
    }
    /* Na 320 px (najwezszy telefon w uzyciu) brakowalo dwoch pikseli - kolo oddaje odstep. */
    .navbar-todaywork-mobile {
        margin-right: 6px;
        padding: 0 2px;
    }
}

.rd-navbar-static .rd-navbar-nav > li > a,
.rd-navbar-static .rd-navbar-nav > li > span {
    font-family: "Montserrat", Helvetica, Arial, sans-serif;
    margin: 5px;
    color: #537fbe;
    /*font-size: 16px;*/
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
}

.rd-navbar-static .rd-navbar-nav > li > .dropdown-menu > li > a {
    font-family: "Montserrat", Helvetica, Arial, sans-serif;
    padding: 10px;
    color: #537fbe;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
}

.rd-navbar-static .rd-navbar-nav > li > .dropdown-menu > li > a:hover {
    color: white;
}

.dropdown-menu > li.focus > a,
.dropdown-menu > li.opened > a,
.dropdown-menu > li > a:hover,
.dropdown-menu > li.active > a {
    color: white;
    font-weight: bold;
    background-color: #004080;
}

.dropdown-menu .drug-item-z {
    color: darkred;
    font-weight: bold;
}

.dropdown-menu .drug-item-mtm {
    color: #6abe6a;
    font-weight: bold;
}

.dropdown-menu .drug-item-z:hover {
    color: white;
    background-color: #004080 !important;
}

.dropdown-menu .drug-item-mtm:hover {
    color: white;
    background-color: #004080 !important;
}

.dropdown-menu .drug-item-ltm {
    color: darkred;
}

.rd-navbar-static .rd-navbar-nav > li.focus > a,
.rd-navbar-static .rd-navbar-nav > li.opened > a,
.rd-navbar-static .rd-navbar-nav > li > a:hover,
.rd-navbar-static .rd-navbar-nav > li.active > a {
    color: white;
    background-color: #004080;
}

.rd-navbar-static .rd-navbar-nav > li.focus > .rd-navbar-dropdown,
.rd-navbar-static .rd-navbar-nav > li.focus > .rd-navbar-megamenu,
.rd-navbar-static .rd-navbar-nav > li.opened > .rd-navbar-dropdown,
.rd-navbar-static .rd-navbar-nav > li.opened > .rd-navbar-megamenu {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateY(0);
    transform: translateY(0);

}

.rd-navbar-fixed .rd-navbar-nav li.focus > a,
.rd-navbar-fixed .rd-navbar-nav li > a:hover {
    color: #FFF;
    background: #537fbe;
}

.weter-navbar-text {
    margin-top: 21px;
}

.weter-main-title {
    background-color: #537fbe;
    padding: 10px;
    color: white;
}

#item, #sub {
    width: 160px;
    height: 20px;
    background: #b4c8db;
    color: #666;
    float: left;
    margin: 2px 2px 2px 2px;
    position: relative;
    text-align: center;
    font-weight: BOLD;
}

#sub #submenu {
    width: 150px;
    background: #666;
    color: #666;
    display: none;
    position: absolute;
    top: 20px;
    left: 0px;
}

#sub:hover #submenu {
    display: block;
}

#sub #submenu #sub_sub {
    width: 150px;
    background: #ffffff;
    color: #666;
    display: none;
    position: absolute;
    top: 20px;
    left: 0px;
}

#submenu:hover #sub_sub {
    display: block;
}

#sub_sub {
    width: 150px;
    height: 20px;
    margin: 0px 0px 1px 0px;
    background: #aaaaff;
    text-align: center;
    color: #666;
}

#sub_item {
    width: 150px;
    height: 20px;
    margin: 0px 0px 1px 0px;
    background: #bed0e1;
    color: #666;
    text-align: center;
}

#sub_item:hover {
    background: #FFA826;
    color: #FFF;

}

#item:hover, #sub:hover {
    background: #FFA826;
    color: #FFF;

}

a {
    border: none;
    outline: none;
}

a:link, a:visited, a:hover {
    color: #000000;
    text-decoration: none;
    outline: none;
}

a:link {
    cursor: HAND;
    text-decoration: NONE;
    outline: none;

}

a:vlink {
    cursor: HAND;
    text-decoration: NONE;
    outline: none;
}

a:hover {
    cursor: HAND;
    /* Solid dark blue — the old #fba95199 (semi-transparent orange) washed out on light
       backgrounds and made hovered link text unreadable. */
    color: #23527c;
    text-decoration: NONE;
    outline: none;
}

/* Links inside alert-warning panels. The a:hover above is a translucent orange that is unreadable
   on the alert background; an inline colour would beat it only by removing hover feedback
   altogether. A class selector outranks a:hover, so the link stays readable and still reacts.
   Colours are Bootstrap's alert-warning text / .alert-link pair. */
.psychotropic-skipped-drug-link,
.psychotropic-skipped-drug-link:link,
.psychotropic-skipped-drug-link:visited {
    color: #8a6d3b;
    font-weight: bold;
    text-decoration: underline;
}

.psychotropic-skipped-drug-link:hover,
.psychotropic-skipped-drug-link:focus {
    color: #66512c;
    background-color: #f7ecb5;
    text-decoration: underline;
}

/* In-text links that must READ as links. The global rule above strips the underline and the
   colour from every anchor, so a link sitting inside body text is indistinguishable from plain
   text. The pseudo-classes are REQUIRED, not decoration: `a:link` is specificity 0,1,1 and would
   outrank a bare class (0,1,0) — that is exactly why the older `.invoice-link-underline`
   (bez pseudoklas) nic nie podkreślało; zastąpiła je ta klasa. Kolory to bootstrapowa para
   link / link-hover. */
.link-underline,
.link-underline:link,
.link-underline:visited {
    color: #337ab7;
    text-decoration: underline;
}

.link-underline:hover,
.link-underline:focus {
    color: #23527c;
    text-decoration: underline;
}

/* Link-buttons (<a class="btn btn-primary">) rendered BLACK text on the coloured fill: the
   global `a:link, a:visited, a:hover { color:#000 }` above is specificity 0,1,1 and outranks
   Bootstrap's bare `.btn-primary { color:#fff }` (0,1,0). Individual templates patched it with
   inline `style="color:white"`; this fixes every link-button at once, hover/focus included, so
   the label keeps a readable contrast on the solid background. `.btn-default` is intentionally
   left alone - its Bootstrap text colour is already dark on a light fill. */
a.btn-primary, a.btn-primary:link, a.btn-primary:visited,
a.btn-primary:hover, a.btn-primary:focus, a.btn-primary:active,
a.btn-success, a.btn-success:link, a.btn-success:visited,
a.btn-success:hover, a.btn-success:focus, a.btn-success:active,
a.btn-info, a.btn-info:link, a.btn-info:visited,
a.btn-info:hover, a.btn-info:focus, a.btn-info:active,
a.btn-warning, a.btn-warning:link, a.btn-warning:visited,
a.btn-warning:hover, a.btn-warning:focus, a.btn-warning:active,
a.btn-danger, a.btn-danger:link, a.btn-danger:visited,
a.btn-danger:hover, a.btn-danger:focus, a.btn-danger:active {
    color: #fff;
}

/* Bootstrap składa `.label-warning` z białego tekstu (.label { color:#fff }) na jasnym
   pomarańczu #f0ad4e — kontrast 1.95:1, czyli daleko poniżej progu czytelności WCAG i realnie nie
   do przeczytania (np. „Starsza wersja stada" na szczegółach stada). Tło zostaje bez zmian, żeby
   nie przemalowywać całej aplikacji; ciemny brąz na tym samym tle daje 6.0:1. */
.label-warning {
    color: #4a3208;
}

/* Licznik zaległości na przycisku podlisty szczepień ("Zaległe").

   Bootstrap koloruje badge POD stan przycisku, na którym siedzi:
       .btn-primary .badge { color:#337ab7; background-color:#fff }
       .btn-default .badge { color:#fff;    background-color:#333 }
   czyli na ZAZNACZONEJ (niebieskiej) zakładce cyfra robi się niebieska — nie do odczytania.
   Inline style tego nie naprawiał, bo ustawiał samo tło i przegrywał o `color`.

   Stąd klasa, a nie inline: podwójny selektor (0,3,0) bije bootstrapowe `.btn-primary .badge`
   (0,2,0) w OBU stanach przycisku, więc licznik jest tak samo czytelny zaznaczony i nie. */
.btn .badge.overdue-count-badge,
.btn-primary .badge.overdue-count-badge,
.btn-default .badge.overdue-count-badge {
    color: #fff;
    background-color: #d9534f;
    margin-left: 4px;
}

a.account:hover {
    color: #004080;
}

a:visited {
    cursor: HAND;
    text-decoration: NONE;
}

table {
    /*font-family: Times New Roman;*/
    font-size: 14;

}

.borderless tbody tr td, .borderless tbody tr th, .borderless thead tr th {
    border: none;
}

table.print {
    /*font-family: Times New Roman;*/
    font-size: 12;
    background: #FFFFFF;
    border-width: 1;
    padding-left: 0;
    padding-rigth: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-width: 1;
}

table.print2 {
    /*font-family: Times New Roman;*/
    font-size: 12;
    background: #FFFFFF;
    border-width: 0;
    padding-left: 0;
    padding-rigth: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-width: 1;
}

table.sprzedaz {
    /*font-family: Latin;*/
    font-size: 12;
    font-weight: BOLD;
    padding-left: 0;
    padding-rigth: 0;
    padding-top: 0;
    padding-bottom: 0;
    left: 0%;
    top: 0%
}

table.leki {
    /*font-family: Latin;*/
    font-size: 12;
    font-weight: BOLD;
    padding-left: 0;
    padding-rigth: 0;
    padding-top: 0;
    padding-bottom: 0;
    left: 0%;
    top: 0%
}

td {
    text-align: CENTER;
    border-width: 1;
}

td.print {
    background: #FFFFFF;
    padding-top: 0;
    padding-bottom: 0;
    border-width: 1;
    padding-left: 0;
    padding-right: 0;
    border-style: 1;
}

td.print2 {
    background: #FFFFFF;
    padding-top: 0;
    padding-bottom: 0;
    border-width: 1;
    padding-left: 0;
    padding-right: 0;
    border-style: 1;
    font-weight: BOLD;
}

td.gora {
    text-align: CENTER;
    border-width: 1;
    color: #330099;
    background: #FFFF99;
}

td.nie {
    text-align: CENTER;
    border-width: 1;
    color: #FFFF00;
    background: #FF0000;
}

td.error {
    text-align: CENTER;
    border-width: 1;
    color: #FF0000;
    background: #FFCC99;
}

div.account {
    background: #9494A7;
    margin-left: 15px;
    margin-right: 15px;
    padding: 15px;
}

.account-menu {
    margin-right: 10px;
}

td.view1 {
    background: #9494a7;
    /*background: #ccc;*/
    padding-left: 10px;
    padding-right: 10px;
    border-color: black;
    /*border-style: solid;*/
    /*border-width: 1px;*/
}

td.view2 {
    background: #e6e6e6;
    padding-left: 10px;
    padding-right: 10px;
}

td.viewSideMenu {
    background: #e6e6e6;
}

td.viewSideMenu:hover {
    background: #C0C0C0;
}

td.viewSideMenu:hover a {
    color: black;
}

td.view3 {
    background: #C0C0C0;
}

td.view4 {
    background: #6666FF;
}

td.add a {
    background: transparent url("../img/addoo.png") no-repeat;
}

td.add a:hover {
    background: transparent url("../img/add_on.png") no-repeat;
}

p.message_ok {

    background: #72AC48;
    color: #000000;
    font-weight: BOLD;
    margin: 10px;
}

p.message_ok2 {
    background: #72AC48;
    color: #000000;
    font-weight: BOLD;
}

p.message {
    background: #9BB3CA;
    color: #004080;
    font-weight: BOLD;
}

.foot {
    width: 100%;
    padding: 10px;
    background: #537fbe;
    color: white;
    margin-top: 4px;
}

.foot a {
    padding: 10px;
    background: #537fbe;
    color: white;
    margin-top: 4px;

}

p.message2 {
    background: #1E3C73 none repeat scroll 0 0;
    color: #dde3ef;
    font-weight: BOLD;
}

p.message3 {
    background: #C0C0C0;
    color: #24551C;
    font-weight: BOLD;
}

p.error {
    background: #fba95199;
    color: #000000;
    font-weight: BOLD;
    margin: 10px;
}

p.error2 {
    background: #fba95199;
    color: #000000;
    font-weight: BOLD;
    margin: 10px;
}

p.page_break {
    page-break-after: always;
}

div#title {
    padding: 5px;
    background: #9BB3CA;
    margin-bottom: 00px;

}

.error {
    font-weight: BOLD;
    color: #FF0826;
}

#mainpanel {
    width: 95%;
    padding: 20px;
    margin: 0 auto;
    background: #E6E6E6;
    color: #000;
    padding-top: 0px;
    padding-bottom: 0px;

}

#group {
    width: 95%;
    padding: 20px;
    margin: 0 auto;
    background: #E6E6E6;
    color: #000;
    padding-top: 10px;
    padding-bottom: 0px;

}

div#menu2 {
    float: left;
    width: 100%;
    padding-top: 0px;
    padding-bottom: 5px;
    background: #e6e6e6;
}

.group {
    background: #9494a7;
}

.error {
    color: #FF0000;
    font-weight: BOLD;

}

div.komunikat {
    padding-bottom: 30px;
}

.buttonOption {
    background: #E6E6E6;
}

div.login-register-text {
    padding-top: 20px;
    padding-bottom: 20px;
}

div.login-regulation-text {
    /*color: #FF0000;*/
    font-weight: bold;
}

div.login-back-text {
    padding-top: 20px;
    padding-bottom: 20px;
}

.logo-link:link, .logo-link:active, .logo-link:visited {
    color: #000000;
    font-weight: bold;
    text-decoration: none;
}

.logo-link:hover {
    color: #000000;
    font-weight: bold;
    text-decoration: none;
}

div.logo {
    padding-top: 0px;
    margin-left: 20px;
    height: 120px;
    width: 130px;
    background: transparent url("../img/wet.png") no-repeat left 5px;
    background-size: 120px;
}

div.login-newpassword {
    padding-top: 30px;
    padding-bottom: 30px;
}

div.link-back {
    text-align: left;
    margin-left: 50px;
    float: left;
}

div.information-page {
    float: left;
}

div.regulation-acc-text {
    width: 400px;
}

div.exception {
    width: 500px;
}

div.info {
    background: white;
    width: 700px;
    font-weight: bold;
    margin-top: 5px;
    margin-bottom: 10px;
    margin-left: auto;
    margin-right: auto;
    color: #6f6f6f;

}

div.smallinfo {
    background: orange;

    font-weight: bold;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: auto;
    margin-right: auto;
    color: black;
}

div.addlisticons {
    width: 700px;
}

div.back {
    font-size: 20px;
}

.panel-body-weter {
    /*    background-color: #bcbcbc;*/
    background-color: white;
}

.weter-site-background {
    /*background-image: url("../img/mosaic.png");*/
    /*background-repeat: repeat;*/
    background-color: #537fbe;
    background-position: top left;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
}
.weter-site-background .navbar-toggle {
    display: none !important;
}

.icon-weter {
    margin-left: 8px;
    vertical-align: middle;
    color: white;
    background-color: #537fbe;
    border-color: darkblue;
    border-width: 1px;
    margin-right: 5px;
    display: inline;
}

.icon-weter-disabled {
    margin-left: 8px;
    vertical-align: middle;
    color: white;
    background-color: grey;
    border-color: slategrey;
    border-width: 1px;
    margin-right: 5px;
    display: inline;
}

.navbar-item-disabled {
    color: grey;
}

.submenu-weter {
    margin-bottom: 5px;
    z-index: 1;

}

.submenu-weter-active {
    margin-bottom: 5px;
    background: #ffffff;
    color: #666;
    font-weight: bold;
    font-size: 1.5em;
}

.dropdown-menu li {
    padding: 2px;
}

.main-menu {
    position: relative;
    text-align: left;
    top: 5px;
    z-index: 0;

}


.footer {
    padding: 20px;
}

.logo-container {
    padding-top: 25px;
}

.breadcrumbs {
    width: 100%;
    padding: 5px;
    background: #537fbe;
    color: white;
    margin-top: 4px;
}

.breadcrumbs a {
    padding: 5px;
    background: #537fbe;
    color: white;
    margin-top: 4px;
}

.ok-container {
    padding: 10px;
    background: #72AC48;
    color: #000000;
    margin-top: 4px;
    margin-bottom: 4px;
}

.info-container {
    padding: 10px;
    background: #ddd;
    color: #000000;
    margin-top: 4px;
    margin-bottom: 4px;
}

.error-container {
    background: #fba95199;
    color: black;
    margin-top: 4px;
    margin-bottom: 4px;
    border-color: #fba95199;
}

.error-register {
    padding: 10px;
    background: #fba95199;
    color: #000000;
    margin-top: 4px;
}

.btn-menu span {
    display: inline-block;
    padding: 7px 15px;
    margin-bottom: 8px;
    background: #b4c8db;
    font-size: 2em;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    font-weight: bold;
    border: 1px solid rgba(0, 0, 0, 1);
    min-width: 150px;
    text-align: center;

}

.btn-menu-active span {
    display: inline-block;
    padding: 7px 15px;
    margin-bottom: 8px;
    background: #ffffff;
    font-size: 2em;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    font-weight: bold;
    border: 1px solid rgba(0, 0, 0, 1);
    min-width: 150px;
    text-align: center;
}

.btn-menu:hover span {

    background-color: #FFA826;
    color: black;
    background: #FFA826;
    border: 1px solid rgba(0, 0, 0, 1);
}

.blue {
    background-color: #b4c8db;
    color: #666;
    font-weight: bold;
    font-size: 1.5em;
}

.blue:hover {
    background-color: #FFA826;
    color: #777;
    font-weight: bold;
    font-size: 1.5em;
}

.blue a:hover {
    background-color: #FFA826;
    color: black;
}

.green {
    background-color: #CCCCCC;
    color: #141414;
}

.green:hover {
    background-color: #8aff00;
    color: #ffffff;
}

.red {
    background-color: #CCCCCC;
    color: #141414;
}

.red:hover {
    background-color: #ff004e;
    color: #ffffff;
}


.panel-menu {
    background: #e6e9f0;
    margin-bottom: 10px;
    z-index: 0;
}

.asterix {
    color: #fba95199;
    text-shadow: 1px 1px #000000, 1px 0px #000000;
    font-weight: bolder;
}

h1 {
    font-size: 2em;
    color: #4B4545;
    text-align: center;
}

h2 {
    color: #537fbe;
}

table.datagrid {
    width: 100%;
    border-collapse: collapse;
}

table.datagrid thead th {
    text-align: left;
    background-color: #9494a7;
    background-repeat: no-repeat;
    background-position: right center;
    color: black;
    font-weight: bold;
    padding: .3em .7em;
    font-size: .9em;
    padding-right: 5px;
    background-repeat: no-repeat;
    background-position: 95% right;
}

table.datagrid thead th a {
    color: white;
    text-decoration: none;
    font-size: 1.0em;
    background-repeat: no-repeat;
    background-position: center right;
    padding-right: 15px;
}

table.datagrid thead th.over {
    background-color: #746B6B;
    cursor: pointer;
}

table.datagrid tbody td.over {
    background-color: #C0C0C0;
    cursor: pointer;
}

table.datagrid tbody td.overClick {
    background-color: #6666FF;
    cursor: pointer;
}

table.datagrid tbody th {
    font-weight: bold;

}

table.datagrid tbody td, table.datagrid tbody th {
    text-align: left;
    padding: .3em .7em;
    border-bottom: 1px solid #eee;
    background-color: white;
}

table.datagrid tbody tr.alternate td, table.datagrid tbody tr.alternate th {
    background-color: #f1f1f1;
}

table.datagrid tfoot td, table.datagrid tfoot th {
    background-color: #FFFEE3;
    color: #4B4545;
    padding: .5em;
    font-weight: bold;
    border-top: 2px solid #4B4545;
}

table.datagrid tfoot th {
    text-align: left;
}

table.datagrid tfoot td {
}

.invisible {
    display: none;
}

.remove-record:hover {
    cursor: pointer;
}

.remove-drug:hover {
    cursor: pointer;
}

.remove-drug {
    vertical-align: middle;
}

.ui-widget-header {
    background: #fba95199;
}

.help-icon-blue:hover {
    color: #537fbe;
}

.general-icon {
    vertical-align: middle;
    line-height: 0%;
}

.question-mark {
    color: black;
}

.question-mark:hover {
    color: black;
}

.btn-active-group {
    color: white;
}

.btn-active-group .disabled {
    color: black;
}

.btn-active-group:hover {
    color: black;
}

.btn-grid-option {
    cursor: pointer;
    color: black;
    text-decoration: none;
    display: inline-block;
    padding: 8px 15px;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.btn-grid-option:hover {
    background-color: #537fbe;
    color: white;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.btn-grid-option:hover .icon-weter {
    background-color: #537fbe !important;
    color: white !important;
    border-color: #537fbe !important;
    box-shadow: 0 2px 8px rgba(83,127,190,0.15);
}

/* „Usuń" w pasku opcji dokumentu na czerwono — sama klasa .text-danger nie wystarcza, bo
   .btn-grid-option ma zadeklarowany `color: black`, a globalne a:link/:visited też biją
   pojedynczą klasę. Najechanie zostaje czerwone (ciemniejsze tło), żeby akcja nieodwracalna
   nie zmieniała się w zwykły niebieski przycisk pod kursorem. */
a.btn-grid-option.text-danger,
a.btn-grid-option.text-danger:link,
a.btn-grid-option.text-danger:visited,
.navbar-default .navbar-nav > li > a.btn-grid-option.text-danger,
.navbar-default .navbar-nav > li > a.btn-grid-option.text-danger:link,
.navbar-default .navbar-nav > li > a.btn-grid-option.text-danger:visited {
    color: #a94442;
}

a.btn-grid-option.text-danger:hover,
a.btn-grid-option.text-danger:focus,
.navbar-default .navbar-nav > li > a.btn-grid-option.text-danger:hover,
.navbar-default .navbar-nav > li > a.btn-grid-option.text-danger:focus {
    background-color: #a94442;
    color: white;
}

a.btn-grid-option.text-danger:hover .icon-weter,
a.btn-grid-option.text-danger:focus .icon-weter,
.navbar-default .navbar-nav > li > a.btn-grid-option.text-danger:hover .icon-weter,
.navbar-default .navbar-nav > li > a.btn-grid-option.text-danger:focus .icon-weter {
    background-color: #a94442 !important;
    color: white !important;
    border-color: #a94442 !important;
    box-shadow: 0 2px 8px rgba(169,68,66,0.15);
}

/* Kafle wyboru drogi w modalu (np. „Dodanie faktury za zakupione leki"): dwie rownorzedne
   opcje zamiast przycisku w zielonym pasku i drugiego w szarym panelu. Caly kafel jest
   odsylaczem, wiec nie ma przycisku udajacego link w srodku. */
.choice-cards {
    display: flex;
    flex-wrap: wrap;
}
.choice-cards > .choice-cards-item {
    display: flex;
    float: none;
    margin-bottom: 10px;
}
a.choice-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 16px;
    border: 1px solid #dfe3ea;
    border-radius: 10px;
    background: #ffffff;
    color: inherit;
    text-decoration: none;
    transition: box-shadow 0.15s, border-color 0.15s, transform 0.15s;
}
a.choice-card:hover,
a.choice-card:focus {
    text-decoration: none;
    color: inherit;
    border-color: #337ab7;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    transform: translateY(-1px);
}
a.choice-card--recommended {
    border-color: #5cb85c;
}
.choice-card-icon {
    color: #337ab7;
    margin-bottom: 8px;
}
.choice-card-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 4px;
}
.choice-card-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 8px;
    border-radius: 10px;
    background: #dff0d8;
    color: #2f6f2f;
    font-size: 11px;
    font-weight: 600;
    text-transform: lowercase;
    vertical-align: middle;
}
.choice-card-desc {
    color: #6b7684;
    font-size: 13px;
}

.add-drug-invoice-check {
    vertical-align: middle;
    padding-left: 15px;
}

.mobile-menu {
    margin: 2px 0;
    padding: 2px 20px;
    position: sticky;
    top: 68px;
    z-index: 999;
    background-color: #fff;
    /* Pasek opcji to peine pasmo - nic nie stoi obok niego. Bez `clear` wchodzil pod
       PLYWAJACY pasek „Poprzednia / Następna" (.list-nav-bar--top) na podgladach dokumentow
       i - majac wlasny kontekst ukladania (sticky + z-index) oraz biale tlo - po prostu go
       zamalowywal. */
    clear: both;
}

/* Phones and tablets (below md - the range where the sub-menu has its "Opcje" toggle): the
   sub-menu scrolls away with the page instead of staying pinned under the main navbar; pinned,
   it took a third of a small screen. Desktop keeps the sticky behaviour. */
@media (max-width: 991px) {
    .mobile-menu {
        position: static;
        top: auto;
    }
}

/* Tablets (sm): Bootstrap forces every .navbar-collapse open from 768px up, which made the
   "Zwiń / Rozwiń" toggle a no-op there. The sub-menu keeps its toggle up to 991px, so its
   collapse has to keep working in that range - the states uib-collapse drives are
   .collapse (closed), .collapsing (animating) and .collapse.in (open). */
@media (min-width: 768px) and (max-width: 991px) {
    .mobile-menu .navbar-collapse.collapse {
        display: none !important;
        height: 0 !important;
        overflow: hidden !important;
    }

    .mobile-menu .navbar-collapse.collapsing {
        display: block !important;
    }

    .mobile-menu .navbar-collapse.collapse.in {
        display: block !important;
        height: auto !important;
        overflow: visible !important;
    }

    .mobile-menu .navbar-header {
        float: none;
    }
}

/* "Zakres dat" filter on the treatment history tab: on phones and tablets the body folds
   under a toggle next to the title; desktop always shows it and has no toggle. */
.treatment-history-filter-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* The title block wraps its hint text; the toggle keeps its place on the title row */
.treatment-history-filter-header > div:first-child {
    flex: 1 1 0;
    min-width: 0;
}

.treatment-history-filter-toggle {
    flex: 0 0 auto;
    margin-left: 10px;
    color: #537fbe;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
}

.treatment-history-filter-toggle i {
    margin-left: 5px;
    font-size: 11px;
}

/* Listing filter blocks folded on phones and tablets (<mobile-filters-toggle> + .mobile-filters-body,
   see services_20260915_1107_.js); the treatment history "Zakres dat" body shares the body class. */
.mobile-filters-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 0 8px;
}

.mobile-filters-title {
    font-weight: 600;
    color: #333;
}

.mobile-filters-toggle {
    flex: 0 0 auto;
    margin-left: 10px;
    color: #537fbe;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
}

.mobile-filters-toggle i {
    margin-left: 5px;
    font-size: 11px;
}

/* Datepicker popups and typeahead lists inside an open body must not be clipped */
.mobile-filters-body.collapse.in:not(.collapsing) {
    overflow: visible;
}

/* A tablet folded before being rotated/resized to desktop width must not stay folded there */
@media (min-width: 992px) {
    .mobile-filters-body.collapse {
        display: block !important;
        height: auto !important;
        overflow: visible !important;
    }

    /* a body wrapping some columns INSIDE a .row: transparent for the float layout on desktop */
    .mobile-filters-body--inline.collapse {
        display: contents !important;
    }
}

/* Refreshed navbar inside mobile-menu */
.mobile-menu .navbar-default {
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}

.mobile-menu .navbar-default .navbar-nav > li > a.btn-grid-option {
    border-radius: 6px;
    margin: 3px 2px;
    padding: 8px 16px;
    font-size: 14px;
    transition: all 0.2s ease;
}

.mobile-menu .navbar-default .navbar-nav > li > a .icon-weter {
    display: inline-block;
    width: 32px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    border-radius: 6px;
    margin: 0 10px 0 0;
    padding: 0;
    font-size: 16px;
    border: none;
}

.mobile-menu .navbar-default .navbar-nav {
    display: flex;
    flex-wrap: wrap;
    padding: 6px;
}

.mobile-menu .navbar-default .navbar-nav > li {
    float: none;
}

/* Mobile menu toggle - expand/collapse header */
.mobile-menu-toggle {
    display: flex;
    float: none;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    cursor: pointer;
    padding: 12px 16px;
    height: auto;
    color: #444;
    background-color: #f8f9fb;
    border-bottom: 2px solid #e8ecf1;
    transition: background-color 0.2s ease;
}

.mobile-menu-toggle:hover,
.mobile-menu-toggle:active,
.mobile-menu-toggle:focus {
    background-color: #edf1ff;
    text-decoration: none;
    color: #444;
}

.mobile-menu-toggle .toggle-label {
    font-weight: 600;
    font-size: 15px;
    color: #333;
}

.mobile-menu-toggle .toggle-action {
    font-size: 13px;
    color: #537fbe;
    font-weight: 500;
}

.mobile-menu-toggle .toggle-action i {
    margin-left: 5px;
    font-size: 11px;
}

/* Danger style for delete button */
.btn-grid-option--danger:hover {
    background-color: #d9534f !important;
    box-shadow: 0 4px 8px rgba(217,83,79,0.25) !important;
}

.btn-grid-option--danger:hover .icon-weter {
    background-color: #d9534f !important;
    border-color: #d9534f !important;
}

.btn-grid-option--danger .icon-weter {
    background-color: #d9534f;
    border-color: #c9302c;
}

/* Print options bar — icons in a distinct teal so wydruki stand out from other options */
.print-options-nav .icon-weter {
    background-color: #17a2b8;
}

.print-options-nav a.btn-grid-option:hover {
    background-color: #17a2b8 !important;
    box-shadow: 0 4px 8px rgba(23, 162, 184, 0.25) !important;
}

.print-options-nav a.btn-grid-option:hover .icon-weter {
    background-color: #117a8b !important;
}

/* "Drukuj" dropdown items are triggered via ng-click (no href) — keep a pointer cursor. */
.print-options-dropdown > li > a {
    cursor: pointer;
}

.logo-wrapper {
    width: 125px;
}

.sale-head {
    background: linear-gradient(135deg, #f4f7ff 0%, #e5ecff 100%);
    border-radius: 8px;
    box-shadow: 0 6px 12px rgba(74, 111, 182, 0.15);
}

.weter-panel {
    border: 1px solid #537fbe;
}

.animal-details-section {
    margin-top: 20px;
    margin-bottom: 10px;
    padding-bottom: 5px;
    border-bottom: 2px solid #537fbe;
}

.animal-details-section:first-child {
    margin-top: 0;
}

.animal-details-section h5 {
    margin: 0;
    color: #537fbe;
    font-weight: 600;
    font-size: 14px;
}

.animal-details-section h5 i {
    margin-right: 6px;
}

/* Transponder datetime responsive layout */
.transponder-datetime-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px;
}
.transponder-date-col {
    /* Keep the date readable inside narrow columns (col-md-4 at laptop widths):
       never shrink below a full "YYYY-MM-DD" + calendar button. The old min-width:0
       let it collapse to "20"; flex-wrap drops HH:MM to a second line instead.
       ~140px keeps date+time on one line on roomy desktops (>=1280px) and stacks
       them only when the column is genuinely too narrow (<=1200px). */
    flex: 1 1 140px;
    min-width: 140px;
}
.transponder-time-col {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}
.transponder-time-select {
    width: 60px !important;
    padding: 6px 4px;
}
.transponder-time-separator {
    font-weight: bold;
    line-height: 30px;
}

/* p96: data odczytu/wszczepienia transpondera — input jest input-sm (30px), a przycisk
   kalendarza łapał globalne `.input-group > .input-group-btn > .btn { height: 34px }`
   (remis specyficzności rozstrzygała kolejność w pliku). Cztery klasy wygrywają z trzema,
   więc ta grupa trzyma 30px w całości; pomiar na formularzu 2026-08-26. */
.transponder-date-col .input-group .form-control,
.transponder-date-col .input-group > .input-group-btn > .btn {
    height: 30px;
    padding-top: 0;
    padding-bottom: 0;
}
.transponder-date-col .input-group-btn .btn .fa {
    line-height: 1;
    vertical-align: middle;
}
/* Animal details - larger buttons */
.animal-details-panel .btn-xs {
    padding: 4px 10px;
    font-size: 13px;
}

/* Animal owner action buttons */
.animal-owner-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

@media (max-width: 480px) {
    .transponder-datetime-row {
        flex-wrap: wrap;
    }
    .transponder-date-col {
        width: 100%;
        flex: none;
    }
    .transponder-time-col {
        margin-top: 5px;
        width: 100%;
        flex: none;
        justify-content: flex-start;
    }
    .transponder-time-select {
        width: 70px !important;
    }
    .animal-owner-buttons .btn {
        font-size: 10px;
        padding: 2px 6px;
    }
}

.sale-head2 {
    background: linear-gradient(135deg, #f8f9ff 0%, #f0f4ff 100%);
    border-radius: 8px;
    box-shadow: 0 6px 12px rgba(74, 111, 182, 0.12);
}

.sale-drug-row {
    background: linear-gradient(135deg, #fafbff 0%, #f5f8ff 100%);
    border-radius: 8px;
    box-shadow: 0 6px 12px rgba(74, 111, 182, 0.10);
}

/* Section card for drug tables and finances */
.section-card {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

.section-card h3 {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin: 0 0 15px 0;
    padding-bottom: 10px;
    border-bottom: 2px solid #e9ecef;
    display: flex;
    align-items: center;
    gap: 10px;
}

.section-card h3 i {
    color: #537fbe;
    font-size: 18px;
}

/* Styled drug/transaction tables inside section-card */
.section-card .table {
    margin-bottom: 0;
}

.section-card .table > tbody > tr > td,
.section-card .table > thead > tr > td,
.section-card .table > tr > td {
    padding: 10px 12px;
    vertical-align: top;
    border-top: 1px solid #f0f0f0;
    font-size: 13px;
}

.section-card .table > tr:first-child > td,
.section-card .table > thead > tr > td {
    border-top: none;
    background-color: #f8f9fa;
    font-size: 12px;
}

.section-card .table > tr:first-child > td label,
.section-card .table > thead > tr > td label {
    color: #666;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 0;
}

.section-card .table > tbody > tr:hover > td,
.section-card .table > tr:not(:first-child):hover > td {
    background-color: #f8faff;
}

/* Finance summary card */
.section-card--finance {
    background: linear-gradient(135deg, #f8f9ff 0%, #f0f4ff 100%);
    border-color: #d4dff2;
}

.section-card--finance .finance-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
}

.section-card--finance .finance-layout {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
}

.section-card--finance .finance-layout-left {
    flex: 1;
}

.section-card--finance .finance-layout-right {
    flex-shrink: 0;
}

.section-card--finance .finance-payment label {
    font-size: 14px;
    color: #555;
    margin-bottom: 4px;
}

.section-card--finance .finance-payment select {
    max-width: 100%;
}

.section-card--finance .finance-details-table {
    margin-left: auto;
}

.section-card--finance .finance-details-label {
    text-align: right;
    padding: 4px 10px 4px 0;
    color: #555;
    font-size: 13px;
    font-weight: bold;
    white-space: nowrap;
}

.section-card--finance .finance-details-value {
    text-align: right;
    padding: 4px 0;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
}

.section-card--finance .finance-row label {
    margin-bottom: 0;
    color: #555;
    font-size: 13px;
    flex-shrink: 0;
}

.section-card--finance .finance-row span {
    font-size: 14px;
    font-weight: 500;
}

.section-card--finance .finance-totals-table {
    margin-left: auto;
    margin-top: 10px;
    border-top: 2px solid #537fbe;
}

.section-card--finance .finance-totals-label {
    text-align: right;
    padding: 8px 10px 4px 0;
    font-size: 18px;
    font-weight: 700;
    color: #333;
    white-space: nowrap;
}

.section-card--finance .finance-totals-value {
    text-align: right;
    padding: 8px 0 4px 0;
    font-size: 20px;
    font-weight: 700;
    color: #537fbe;
    white-space: nowrap;
}

/* Sub-total lines (partial sum, correction) sit visually below the grand totals */
.section-card--finance .finance-totals-label--sub,
.section-card--finance .finance-totals-value--sub {
    font-size: 14px;
    font-weight: 600;
    color: #7a7a7a;
    padding-top: 4px;
    padding-bottom: 2px;
}

/* Left column: grouped payment / settlement inputs */
.section-card--finance .finance-payment-group {
    max-width: 360px;
}

.section-card--finance .finance-field {
    margin-bottom: 18px;
}

.section-card--finance .finance-field:last-child {
    margin-bottom: 0;
}

.section-card--finance .finance-field > label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #555;
    margin-bottom: 6px;
}

.section-card--finance .finance-field .asterix {
    color: #dc3545;
}

.section-card--finance .finance-payment-group .form-control {
    width: 100%;
    max-width: 100%;
}

.section-card--finance .finance-payment-view {
    font-size: 15px;
    font-weight: 600;
    color: #333;
}

/* Paid-in-full: segmented Tak / Nie toggle */
.section-card--finance .finance-paid-options {
    display: flex;
    gap: 10px;
}

.section-card--finance .finance-paid-option {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 9px 12px;
    border: 1px solid #d4dff2;
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    font-size: 15px;
    font-weight: 500;
    color: #333;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}

.section-card--finance .finance-paid-option:hover {
    border-color: #537fbe;
}

.section-card--finance .finance-paid-option.is-selected {
    border-color: #537fbe;
    background: #eef3fb;
    color: #2c5aa0;
}

.section-card--finance .finance-paid-option input[type="radio"] {
    margin: 0;
}

.section-card--finance .finance-paid-view {
    font-size: 15px;
    font-weight: 600;
    color: #333;
}

/* Fully-paid confirmation badge (view mode) */
.section-card--finance .finance-paid-badge-full {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 12px;
    background: #e6f7ec;
    color: #1e7e34;
    border: 1px solid #b7e4c7;
    font-weight: 700;
}

.section-card--finance .finance-paid-badge-full i {
    color: #28a745;
}

/* Partial payment sub-panel (amount paid + remaining) */
.section-card--finance .finance-partial {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed #d4dff2;
}

.section-card--finance .finance-partial > label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #555;
    margin-bottom: 6px;
}

.section-card--finance .finance-remaining {
    margin-top: 8px;
    font-size: 14px;
    font-weight: 600;
}

.section-card--finance .finance-hint {
    font-size: 12px;
    color: #6c757d;
    margin-top: 4px;
}

.section-card--finance .finance-sum-warning {
    color: #dc3545;
    font-size: 12px;
    margin: 8px 0;
    text-align: right;
}

/* Final-amount correction sits in the right column, directly under the netto/brutto totals,
   aligned to the same right edge as the totals table above it. */
.section-card--finance .finance-layout-right .finance-rounding {
    margin: 14px 0 0 auto;
    max-width: 320px;
}

/* "Rozlicz" under the totals (card preview) — aligned with the totals table above it. */
.section-card--finance .finance-settle {
    margin-top: 12px;
    text-align: right;
}

@media (max-width: 768px) {
    .section-card {
        padding: 12px;
        border-radius: 8px;
        margin-bottom: 12px;
    }

    .section-card h3 {
        font-size: 15px;
    }

    .section-card .table > tbody > tr > td,
    .section-card .table > tr > td {
        padding: 8px 6px;
        font-size: 12px;
    }

    .section-card--finance .finance-layout {
        flex-direction: column;
    }

    .section-card--finance .finance-payment-group {
        max-width: none;
    }

    .section-card--finance .finance-details-table,
    .section-card--finance .finance-totals-table {
        margin-left: 0;
        width: 100%;
    }

    .section-card--finance .finance-layout-right {
        margin-top: 16px;
    }

    .section-card--finance .finance-layout-right .finance-rounding {
        max-width: none;
    }

    .section-card--finance .finance-payment select {
        max-width: 100%;
    }
}

.subMenuWhite {
    background-color: white;
}

.options-container {
    padding-top: 20px;
    padding-bottom: 10px;
    font-weight: bold;
}

.select-all {
    padding-bottom: 5px;
    cursor: pointer;
}

/* Pricing listings: page-size selector on the left, pager centered, optional count on the right.
   A 3-column grid (1fr auto 1fr) keeps the pager centered in the row regardless of side widths.
   Shared by base prices (Cenniki i marże) and client drug prices (Cennik klienta). */
.pricing-pager-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
.pricing-pager-row .pricing-page-size {
    grid-column: 1;
    justify-self: start;
    display: flex;
    align-items: center;
    gap: 6px;
}
.pricing-pager-row .pricing-page-size label {
    margin: 0;
    font-weight: normal;
    white-space: nowrap;
}
.pricing-pager-row .pricing-page-size select {
    width: auto;
}
.pricing-pager-row .pagination {
    grid-column: 2;
    justify-self: center;
    margin: 0;
}
.pricing-pager-row .pricing-page-count {
    grid-column: 3;
    justify-self: end;
    white-space: nowrap;
}

/* Cennik na telefonie (praca w terenie): trzy kolumny paska stronicowania nie mieszczą
   się obok siebie, więc układają się jedna pod drugą, wyrównane do lewej. */
@media screen and (max-width: 767px) {
    .pricing-pager-row {
        grid-template-columns: 1fr;
    }
    .pricing-pager-row .pricing-page-size,
    .pricing-pager-row .pricing-page-count {
        grid-column: 1;
        justify-self: start;
    }
    /* Same numery stron zostaja WYSRODKOWANE — przy lewej krawedzi wygladaly jak urwane,
       a to jedyny element paska, ktory uzytkownik na telefonie klika (p33). */
    .pricing-pager-row .pagination {
        grid-column: 1;
        justify-self: center;
    }
}

.menu-item {
    color: black;
    cursor: pointer;
}

/* Card-style nav-tabs */
.nav-tabs {
    border-bottom: none;
    display: table;
    table-layout: auto;
    width: 100%;
    padding: 0;
    margin-bottom: 8px;
    clear: both;
    list-style: none;
}

.nav-tabs > li {
    float: none;
    display: table-cell;
    vertical-align: bottom;
    margin-bottom: 0;
}

.nav-tabs > li > a,
.nav-tabs > li > a.menu-item {
    background-color: #f8f9fa;
    border: 1px solid #e0e0e0 !important;
    border-radius: 8px 8px 0 0 !important;
    color: #666;
    padding: 10px 16px;
    margin-right: 0;
    transition: all 0.2s ease;
}

.nav-tabs > li > a label {
    margin-bottom: 0;
    cursor: pointer;
    font-weight: 500;
    font-size: 13px;
    white-space: nowrap;
}

.nav-tabs > li > a label i {
    margin-right: 8px;
}

.nav-tabs > li > a label i.fa-2x {
    font-size: 15px;
}

.nav-tabs > li > a:hover,
.nav-tabs > li > a.menu-item:hover {
    background-color: #eef1f5;
    border-color: #ccc !important;
    color: #333;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a.menu-item,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    background-color: #fff !important;
    border: 1px solid #e0e0e0 !important;
    border-bottom-color: #fff !important;
    color: #537fbe !important;
    box-shadow: 0 -2px 6px rgba(0,0,0,0.06);
    position: relative;
    z-index: 1;
}

.nav-tabs > li.active > a label,
.nav-tabs > li.active > a.menu-item label {
    font-weight: 600;
    color: #537fbe;
}

.nav-tabs > li.active > a label i,
.nav-tabs > li.active > a.menu-item label i {
    color: #537fbe;
}

/* Tab content border to connect with active tab */
.tab-content {
    border-top: 1px solid #e0e0e0;
    margin-top: -1px;
}

/* Mobile: stack tabs vertically */
@media (max-width: 768px) {
    .nav-tabs {
        display: block;
        padding: 0;
        width: 100%;
    }

    .nav-tabs > li {
        display: block;
        margin-bottom: 2px;
    }

    .nav-tabs > li > a,
    .nav-tabs > li > a.menu-item {
        border-radius: 8px !important;
        border-bottom: 1px solid #e0e0e0 !important;
    }

    .nav-tabs > li.active > a,
    .nav-tabs > li.active > a.menu-item,
    .nav-tabs > li.active > a:hover,
    .nav-tabs > li.active > a:focus {
        border-bottom-color: #e0e0e0 !important;
        border-left: 3px solid #537fbe !important;
        box-shadow: 0 2px 4px rgba(0,0,0,0.06);
    }

    .tab-content {
        border-top: none;
        margin-top: 4px;
    }
}

.modal .modal-body {
    max-height: 420px;
    overflow-y: auto;
}

/* Master row - ALL children checked: strongest blue tint. */
.row-checked {
    background-color: #aed1ee;
}

/* Medical interview template picker modal: rows are click-to-select (no
   "Wybierz" link), so make the whole row a hover-highlighted, pointer target
   and let the table use the full modal width (strip the nested container
   padding that otherwise left empty side gutters). */
.select-medical-template-modal-body .container-fluid,
.select-medical-template-modal-body .panel-body {
    padding-left: 0;
    padding-right: 0;
}

/* Roomy but not full-screen dialog; the grid-wrapped table fills its width. */
.select-medical-template-window .modal-dialog {
    width: 85%;
}

/* Fixed layout makes the per-column width percentages authoritative
   (narrow Nazwa, wide Opis) regardless of content length. */
.select-medical-template-table {
    width: 100%;
    table-layout: fixed;
}

.select-medical-template-table td {
    word-break: break-word;
    overflow-wrap: anywhere;
}

.select-medical-template-hint {
    margin-bottom: 8px;
}

.select-medical-template-row {
    cursor: pointer;
}

.select-medical-template-row:hover > td {
    background-color: #d6eaf8;
}

/* Content preview in the "Opis" column: clamp to a few lines so long
   templates don't blow up row height; full text is in the cell title. */
.select-medical-template-opis {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-height: 4.6em;
    white-space: pre-wrap;
    color: #666;
    font-size: 0.92em;
}

/* Destructive action stands out from the neutral "Edytuj" link. */
.select-medical-template-row .select-medical-template-delete-link {
    color: #c0392b;
}
.select-medical-template-row .select-medical-template-delete-link:hover {
    color: #a5281b;
}

/* Master row - PARTIAL children checked: medium blue tint. */
.row-checked-partial {
    background-color: #d6eaf8;
}

/* Keep checked rows visually selected on hover (Bootstrap .table-hover would
   otherwise paint a gray hover, making the row look deselected). */
.table-hover > tbody > tr.row-checked:hover,
.table-hover > tbody > tr.row-checked:hover > td {
    background-color: #93c3e6;
}
.table-hover > tbody > tr.row-checked-partial:hover,
.table-hover > tbody > tr.row-checked-partial:hover > td {
    background-color: #b8d8ee;
}

/* ZK listing: zebra striping (.table-striped targets <tr>) out-specifies
   .row-checked on selected odd rows, so at rest they stayed grey and only turned
   blue on hover — reading as a flicker as the mouse swept the table. This table
   drops .table-hover and paints the selected cells directly, so a selected row is
   a stable solid blue regardless of stripe parity, with no hover repaint. */
.zk-list-table.table-striped > tbody > tr.row-checked > td {
    background-color: #aed1ee;
}

/* Slave (detail table) cells when item is checked: lightest blue tint.
   Overrides the master-scoped .row-checked so master/slave stay distinct. */
.drug-state-detail-table td.row-checked,
.drug-state-detail-table > tbody > tr > td.row-checked,
.drug-state-detail-table > tr > td.row-checked {
    background-color: #eaf2fa;
}

.drug-state-group-check {
    width: 16px;
    height: 16px;
    vertical-align: middle;
    margin-right: 6px;
    cursor: pointer;
}

/* Expanded detail sub-table under a group row. A neutral gray tint
   frames the slave region (header + content + tree connectors) so that
   the blue master row stays visually dominant.
   No left border — the outer vertical gray bar serves as the left boundary,
   so horizontal tree connectors can meet it flush with no pixel gap. */
.drug-state-detail-table {
    background-color: #f5f5f5;
    border: 1px solid #e8e8e8;
    border-left: 0;
}
/* Slave table header: neutral gray to visually differentiate from the
   blue master header above it. */
.drug-state-detail-table > tbody > tr > td.tbl-header,
.drug-state-detail-table > tr > td.tbl-header {
    background-color: #e8e8e8;
    color: #555;
}
.drug-state-detail-table > tbody > tr > td,
.drug-state-detail-table > tr > td {
    border-color: #e8e8e8;
}

/* Tree connector: a short horizontal branch on every detail data row that
   hooks into the blue vertical frame on the left. Line thickness (2 px)
   matches the frame outline.

   `background-origin: border-box` anchors the gradient to the cell's outer
   edge instead of the padding-box origin, so the branch's left end coincides
   with the <tbody>'s vertical frame line and the two visually touch. */
.drug-state-detail-table > tr:not(:first-child) > td:first-child,
.drug-state-detail-table > tbody > tr:not(:first-child) > td:first-child {
    background-image:
        linear-gradient(
            to bottom,
            transparent calc(50% - 1px),
            #537fbe calc(50% - 1px),
            #537fbe calc(50% + 1px),
            transparent calc(50% + 1px)
        );
    background-size: 22px 100%;
    background-position: 0 0;
    background-repeat: no-repeat;
    background-origin: border-box;
}
.drug-state-detail-table.drug-state-detail-table {
    /* Doubled class boosts specificity over Bootstrap's .table margin,
       removing the inline `margin-bottom:0` previously on the element. */
    margin-bottom: 0;
}

/* ==========================================================================
   Drug state listing — classes extracted from inline styles on
   serwis/public/template/drugstate/form_20260915_1107_.html.
   Kept co-located with the other drug-state rules above so the whole view's
   visual contract lives in one place.
   ========================================================================== */

/* Top filter tiles (Wszystkie leki / Nieprzeterminowane / Przeterminowane /
   7 dni / 30 dni / Stan poniżej minimalnego). Each variant colors its label
   and, when `.is-active` is set, its border; the shadow is shared. */
.drug-state-filter-tile                              { margin: 2px; }
.drug-state-filter-tile .drug-state-filter-label     { font-weight: bold; }
.drug-state-filter-tile--all  .drug-state-filter-label { color: #537fbe; }
.drug-state-filter-tile--not  .drug-state-filter-label { color: #337ab7; }
.drug-state-filter-tile--exp  .drug-state-filter-label { color: red; }
/* p66: ciemniejszy zolty (dark goldenrod) — #f0ad4e ginal na bialym tle. */
.drug-state-filter-tile--n7   .drug-state-filter-label { color: #b8860b; }
.drug-state-filter-tile--n30  .drug-state-filter-label { color: #5cb85c; }
.drug-state-filter-tile--min  .drug-state-filter-label { color: black; }
.drug-state-filter-tile.is-active                    { box-shadow: 0 2px 4px rgba(0,0,0,0.2); }
.drug-state-filter-tile--all.is-active               { border: 2px solid #537fbe; }
.drug-state-filter-tile--not.is-active               { border: 2px solid #337ab7; }
.drug-state-filter-tile--exp.is-active               { border: 2px solid red; }
.drug-state-filter-tile--n7.is-active                { border: 2px solid #b8860b; }
.drug-state-filter-tile--n30.is-active               { border: 2px solid #5cb85c; }
.drug-state-filter-tile--min.is-active               { border: 2px solid black; }

/* Small layout helpers that were previously inline margins. */
.drug-state-filter-info-alert  { margin-bottom: 20px; }
.drug-state-filter-row-2       { margin-top: 5px; }

/* Each group (master <tr> + slave <tr>) lives in its own <tbody> so the blue
   frame drawn when the group is expanded can wrap both rows at once.

   The frame is implemented as 2 px borders on the individual cells of the
   master and slave rows — with Bootstrap's `border-collapse: collapse`, the
   left borders of master+slave merge into one continuous vertical bar, and
   the horizontal gradient in the first detail cell shares the same layout
   coordinate frame so the two connectors meet flush with no gap.

   Borders are always 2 px wide (transparent when collapsed, blue when
   expanded) so switching state only fades the color — no layout shift. */

/* Suppress Bootstrap's default `.table > tbody + tbody { border-top: 2px solid #ddd }`
   on our group tbodies, which would otherwise merge over the master row's
   top border and make the frame appear without a top edge. */
.table > tbody.drug-state-group-container { border-top: 0; }

.drug-state-group-container > tr > td {
    transition: border-color 0.25s ease;
}
.drug-state-group-container > tr:first-child > td {
    border-top: 2px solid transparent;
}
.drug-state-group-container > tr:last-child > td {
    /* Stop the Bootstrap default 1 px top border from drawing a gray line
       between the master and slave rows inside a single group.
       NOTE: we intentionally do NOT set `border-bottom` here. In
       `border-collapse: collapse` mode, the spec resolves same-width /
       same-style / different-color collisions by picking the color of the
       *upper* cell — so a `2px solid transparent` on slave's bottom would
       silently suppress the *next* group's blue `border-top`. By leaving
       slave's bottom at 0 and drawing the bottom frame stroke via a
       pseudo-element below, no such merge happens. */
    border-top: 0;
}
.drug-state-group-container > tr > td:first-child {
    border-left: 2px solid transparent;
}
.drug-state-group-container > tr > td:last-child {
    border-right: 2px solid transparent;
}
.drug-state-group-container.is-expanded > tr:first-child > td     { border-top-color:    #537fbe; }
.drug-state-group-container.is-expanded > tr > td:first-child     { border-left-color:   #537fbe; }
.drug-state-group-container.is-expanded > tr > td:last-child      { border-right-color:  #537fbe; }

/* Bottom edge of the frame is a pseudo-element so it's not subject to
   border-collapse merging. The negative left/right offsets make it span the
   full outer width of the slave cell (including the vertical border columns),
   so bottom-left and bottom-right corners render flush with the left/right
   borders.

   `position: relative` is the positioning context for the ::after pseudo.
   `padding: 0` is doubled-class (specificity 0,2,0) to beat Bootstrap's
   `.table-condensed > tbody > tr > td { padding: 5px }` (0,1,3) — without
   this the 5 px left padding would separate the horizontal tree connector
   from the vertical frame line. */
.drug-state-detail-cell.drug-state-detail-cell { position: relative; padding: 0; }
.drug-state-detail-cell::after {
    content: '';
    position: absolute;
    left: -2px;
    right: -2px;
    bottom: 0;
    height: 2px;
    background-color: transparent;
    transition: background-color 0.25s ease;
    pointer-events: none;
}
.drug-state-detail-cell.is-expanded::after { background-color: #537fbe; }

/* On xs the Lp / Opcje cells (both `hidden-xs`) collapse to display:none, so
   the neighbors become the leftmost/rightmost visible — route the side
   borders to them. */
@media (max-width: 767px) {
    .drug-state-group-container > tr > td.hidden-xs + td        { border-left: 2px solid transparent; }
    .drug-state-group-container.is-expanded > tr > td.hidden-xs + td { border-left-color: #537fbe; }
}

.drug-state-group-row                { cursor: pointer; }
/* Caret to the left of the drug name: rotates smoothly from pointing right
   (collapsed) to pointing down (expanded) and its color transitions in sync
   with the slave region's frame. */
.drug-state-group-caret {
    margin-right: 4px;
    color: #777;
    display: inline-block;
    transition: transform 0.25s ease, color 0.25s ease;
}
.drug-state-group-caret.is-expanded { transform: rotate(90deg); }
.drug-state-group-container.is-expanded .drug-state-group-caret { color: #537fbe; }
/* Clickable text inside a listing row: the drug name and the invoice number on drug states,
   the animal on the insemination listing. Two rules, one behaviour - the global
   a:link / a:visited outrank a bare class selector, so the underline has to be repeated on the
   pseudo-classes or it never reaches the screen, and the global a:hover is a 60%-opacity orange
   unreadable on a white listing, hence the own hover colour (the blue used by invoice links). */
.drug-state-drug-link,
.drug-state-drug-link:link,
.drug-state-drug-link:visited,
.listing-link,
.listing-link:link,
.listing-link:visited {
    text-decoration: underline;
}

.drug-state-drug-link:hover,
.drug-state-drug-link:focus,
.listing-link:hover,
.listing-link:focus {
    color: #23527c;
    text-decoration: underline;
}

.drug-state-psych-label              { margin-left: 6px; }
.drug-state-group-meta               { color: #14315c; font-weight: 600; }
.drug-state-group-meta-selected      { margin-left: 6px; }
.drug-state-group-history-btn        { margin-top: 4px; margin-left: 4px; }

/* "Szczegóły partii" call-to-action on the master row. Sits next to
   "Historia leku" and acts as the primary affordance for expanding the
   batch detail table — discoverable text beats a bare caret. */
.drug-state-group-details-btn {
    margin-top: 4px;
    font-weight: 600;
}
.drug-state-group-details-btn .drug-state-group-details-count {
    font-weight: 400;
    opacity: 0.85;
    margin-left: 2px;
}

/* Zebra striping for drug groups. Each <tbody class="drug-state-group-container">
   is one drug; alternating background colors make it visually clear where one
   drug ends and the next begins. Row-checked / row-checked-partial classes
   win over zebra because their explicit selectors below are more specific. */
.drug-state-group-container > .drug-state-group-row > td {
    background-color: #fafbfc;
}
.drug-state-group-container:nth-of-type(even) > .drug-state-group-row > td {
    background-color: #eef2f6;
}
/* Hover hint on the master row — reinforces that it's clickable. The blue
   tint is the same family as the expanded-frame color so the user gets a
   consistent visual language across states. */
.drug-state-group-container > .drug-state-group-row:hover > td {
    background-color: #dbe7f4;
}
/* When checked classes are present, they win — explicit precedence so a
   user-selected row keeps its blue tint regardless of zebra position. */
.drug-state-group-container > .drug-state-group-row.row-checked > td {
    background-color: #aed1ee;
}
.drug-state-group-container > .drug-state-group-row.row-checked-partial > td {
    background-color: #d6eaf8;
}

/* Options cell + buttons. Shared by the master row and the detail (slave) row
   since both render the same Przemieszczenie / Zutylizuj action pair. */
.drug-state-opts-cell         { min-width: 180px; }
.drug-state-opts-move-btn     { margin-bottom: 3px; }
.drug-state-opts-dispose-btn  { margin-top: 0; }

/* Expanded detail region. The tbody carries the blue frame for the whole
   group, so the animator only drives the slide + fade of the content and the
   gray interior tint. */
.drug-state-detail-animator {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    background-color: transparent;
    transition:
        max-height 0.3s ease,
        opacity 0.2s ease,
        background-color 0.25s ease;
}
.drug-state-detail-cell.is-expanded .drug-state-detail-animator {
    /* Cap must exceed the tallest possible detail block; groups with ~30 batches
       sit comfortably under 2000 px. Max-height is necessary because `auto`
       can't be transitioned. */
    max-height: 2000px;
    opacity: 1;
    background-color: #e8e8e8;
    transition:
        max-height 0.4s ease,
        opacity 0.3s ease 0.1s,
        background-color 0.25s ease;
}

.drug-state-detail-title {
    padding: 8px 12px 6px 16px;
    background-color: #e8e8e8;
}
.drug-state-detail-title-text {
    font-size: 11px;
    color: #555;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.drug-state-detail-wrapper { padding: 0 12px 10px 0; }

/* Detail table column widths — named by column so the template markup no
   longer carries pixel-width inline styles. */
.drug-state-detail-col-check   { width: 30px; text-align: center; }
.drug-state-detail-col-series  { width: 90px; }
.drug-state-detail-col-exp     { width: 100px; }
.drug-state-detail-col-buy     { width: 150px; }

/* Outer (master) table header column widths. */
.drug-state-col-buy-master { width: 170px; }

.drug-state-detail-item-row { cursor: pointer; }

.row-invalidated {
    background-color: sandybrown;
}

.sale-form-lp {

    color: black;
    font-weight: bold;
    font-size: 16px;
}

.inventory-row {
    margin-top: 4px;
    margin-bottom: 4px;
}
.small-label-warning {
    color: red;
    font-size: 12px;
    font-weight: 700;
}
.pricing-margin {
    color: red;
    font-size: 12px;
    font-weight: 700;
}

.small-label-default {
    font-size: 12px;
    font-weight: 700;
    color: grey;
}

#chart1 {
    height: 400px;
    width: 800px;
}

/*.tbl-header {
    background-color: #CCCCCC;
    cursor: pointer;
}
.tbl-header a {
    cursor: pointer;
}
.tbl-header a:hover {
    color: black;
    cursor: pointer;
}*/

::-ms-clear {
    display: none;
}

.form-control-clear {
    z-index: 10;
    pointer-events: auto;
    cursor: pointer;
}

/* ============================================================
   dict-field: unified dictionary picker control
   Layout: [ control (with inline clear "−") ][ + ][ gear ]
   Rendered by the <dict-field> directive (weter.services).
   Uses flexbox instead of Bootstrap .input-group on purpose:
   native <select> collapses to a chevron sliver inside
   .input-group here (Bootstrap+MDB display:table conflict).
   ============================================================ */
.dict-field {
    display: flex;
    align-items: stretch;
    width: 100%;
}
.dict-field__control {
    position: relative;      /* anchor for the inline clear icon */
    flex: 1 1 auto;
    min-width: 0;            /* allow the control to shrink, never overflow the row */
    display: flex;
}
.dict-field__transclude {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
}
.dict-field__transclude > .form-control {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    /* butt flush against the action buttons */
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
/* inline clear ("−") sitting inside the control */
.dict-field__clear {
    position: absolute;
    top: 0;
    right: 11px;
    height: 100%;
    display: flex;
    align-items: center;
    z-index: 10;
    cursor: pointer;
    pointer-events: auto;
    font-size: 14px;
}
.dict-field__control.has-clear .dict-field__transclude > .form-control {
    padding-right: 28px;     /* keep text clear of the "−" icon */
}
/* native <select>: keep the "−" left of the browser chevron */
.dict-field--select .dict-field__clear {
    right: 30px;
}
.dict-field--select .dict-field__control.has-clear .dict-field__transclude > .form-control {
    padding-right: 46px;
}
/* action buttons ("+" add, gear = manage dictionary) */
.dict-field__actions {
    flex: 0 0 auto;
    display: flex;
    align-items: stretch;
}
.dict-field__btn {
    border-radius: 0;
    margin-left: -1px;       /* collapse the shared border with the neighbour */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
}
.dict-field__btn:hover,
.dict-field__btn:focus {
    z-index: 2;              /* raise the hovered border above its neighbour */
}
/* Akcja alternatywna („Zmień jednostkę") może nieść podpis obok ikony. Napis nie może się
   łamać na dwie linie — grupa przycisków jest jednym pasem o wysokości pola, a złamany
   wyraz rozpychałby ją w pionie i rozjeżdżał wiersz formularza. */
.dict-field__alt-label {
    margin-left: 6px;
    white-space: nowrap;
    font-size: 12px;
}
/* Podpis zjada szerokość grupy, a `.dict-field__control` ma `min-width: 0` i oddaje ją całą —
   bez podłogi select z jednostką ściskał się do ~59 px i dłuższy kod („TUBOSTRZYKAWKA")
   byłby ucięty. Modyfikator zakłada dyrektywa tylko wtedy, gdy akcja NAPRAWDĘ ma podpis, więc
   pozostałe pola słownikowe zostają bez zmian. */
.dict-field--alt-label .dict-field__control {
    min-width: 72px;
}
.dict-field__alt {
    padding-left: 8px;
    padding-right: 8px;
}
.dict-field__actions > *:last-child {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}
/* both actions grey (btn-default), matching the animal-card "− / + / ⚙" standard */
.dict-field__gear,
.dict-field__gear:hover,
.dict-field__gear:focus {
    text-decoration: none;
}
/* the host element also carries the hint line below the control row */
dict-field {
    display: block;
}
/* empty dictionary / no match: tell the user the entry has to be created first.
   Clickable — it opens the same add-to-dictionary modal as the "+" it points at. */
.dict-field__hint {
    display: flex;
    align-items: baseline;
    gap: 5px;
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.35;
    color: #8a6d3b;
    cursor: pointer;
}
.dict-field__hint:hover {
    text-decoration: underline;
}
/* "+" promoted to the call-to-action it becomes when the field cannot be used yet.
   The pulse runs a few times and stops: it must catch the eye, not nag. */
.dict-field__add--cta {
    animation: dict-field-add-pulse 1.6s ease-out 3;
}
@keyframes dict-field-add-pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(51, 122, 183, 0.5);
    }
    50% {
        box-shadow: 0 0 0 4px rgba(51, 122, 183, 0);
    }
}

@media screen and (min-width: 601px) {
    .nav-menu-item {
        font-size: inherit;
    }

    body {
        font-family: "Roboto", Helvetica, Arial, sans-serif;
        font-size: 11pt;
        behavior: url("csshover.htc");
        /*background:#CCCCCC none repeat scroll 0 0;*/
        margin: 0;
        padding: 0;
        padding-top: 70px;

    }

    .container-fluid {
        max-width: 80%;
    }
}

/* Menu jest teraz responsywne - nie trzeba zwiększać padding-top dla body */
@media screen and (max-width: 1440px) {
    .container-fluid {
        max-width: 80%;
    }
}

@media screen and (max-width: 765px) {
    .container-fluid {
        max-width: 80%;
    }
}

@media screen and (max-width: 600px) {

    body {
        font-family: "Roboto", Helvetica, Arial, sans-serif;
        font-size: 11pt;
        behavior: url("csshover.htc");
        /*background:#CCCCCC none repeat scroll 0 0;*/
        margin: 0;
        padding: 0;

    }

    .container {
        padding-top: 60px;
    }

    .container-fluid {
        padding-top: 50px;
        max-width: 99%;
    }
}

.row-30days {
    color: #5cb85c;
}

.row-100days {
    color: #537fbe;
}

/* p66: ciemniejszy zolty — jasny #f0ad4e byl nieczytelny na bialym tle. */
.row-7days {
    color: #b8860b;
}

.row-today {
    color: black;
}

.row-expired-days {
    color: red;
    font-weight: bold;
}

div.modal-send-document .modal-content {
    max-height: 1024px;
    overflow: auto;
}

div.modal .modal-body {
    max-height: 640px;
    overflow: auto;
}

div.item-selected {
    background-color: #537fbe;
    padding: 10px;
    cursor: pointer;
    color: white;
    margin: 1px;
}

div.item-selected:hover {
    background-color: #537fbe;
    border-color: black;
    padding: 10px;
    cursor: pointer;
    color: white;
    margin: 1px;
}

div.item-not-selected {
    background-color: white;
    padding: 10px;
    cursor: pointer;
    color: black;
    margin: 1px;
}

div.item-not-selected:hover {
    background-color: #CCCCCC;
    border-color: black;
    padding: 10px;
    cursor: pointer;
    margin: 1px;

}

.container-fluid-wide {
    max-width: 98% !important;
}

/* Cena domyślna wygląda jak każda inna wartość — o pochodzeniu informuje sam tekst
   "Domyślna" przy etykiecie, bez żółtego wyróżnienia (prośba użytkownika 2026-07-16) */
.drug-invoice-auto-margin {
    color: #333;
    font-weight: normal;
    cursor: help;
}

.drug-invoice-manual-margin {
    color: #333;
    font-weight: normal;
}

@media (min-width: 1200px) {
    .container {
        max-width: 1600px;
    }
}

div.register-package {
    border: 3px solid #537fbe;
    cursor: pointer;
}

div.register-package:hover {
    background: #dff0d8;
    border: 3px solid #3c763d;
    /*background: #3c763d;*/
}

div.register-package-selected {
    border: 3px solid #3c763d;
    background: #b2daa2;
    color: white;
}

div.feedback {
    z-index: 1000;
    cursor: pointer;
    font-size: x-large;
    position: fixed;
    right: -50px;
    padding-top: 15px;
    top: 45%;
    width: 160px;
    height: 60px;
    color: white;
    background: #537fbe;
    transform: rotate(270deg);
}

.large-modal-window .modal-dialog {
    width: 90%;
}

.select-animals-modal-fullscreen .modal-dialog {
    width: 90%;
}

.import-animals-td {
    padding: 10px;
    background: white;
    color: black;
}

.import-animals-td-error {
    padding: 10px;
    background: #f2dede;
    color: red;
}

.import-animals-modal .modal-dialog {
    width: 85%;
    max-width: 1300px;
}

.import-animals-modal .modal-body {
    max-height: 80vh;
    overflow-y: auto;
}

.import-animals-preview-modal .modal-dialog {
    width: 90%;
    max-width: 1400px;
}

.import-animals-preview-modal .modal-body {
    max-height: 80vh;
    overflow-y: auto;
}

.import-animals-dropzone {
    border: 2px dashed #ccc;
    border-radius: 8px;
    padding: 30px 20px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s, background-color 0.2s;
}

.import-animals-dropzone:hover {
    border-color: #5cb85c;
    background-color: #f9fff9;
}

.import-animals-dropzone.nv-file-over {
    border-color: #5cb85c;
    background-color: #efffef;
}

.import-animals-file-info {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 12px 15px;
    background-color: #f9f9f9;
}

.selected-drugs-error {
    background-color: #fba95199;
}

.selected-drugs-ok {
    padding: 2px;
}

/* Red border flagging a not-yet-filled / unusable transfer field in the
   change-magazine modal. Higher specificity than .form-control(:focus) so the
   cue persists while the field is focused. */
.input-incomplete.form-control,
.input-incomplete.form-control:focus {
    border-color: #d9534f;
    box-shadow: 0 0 0 1px #d9534f;
}

.hint {
    color: darkorange;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
}

.success-text {
    color: #5cb85c;
}

.clear-filters-button {
    margin-top: 5px;
}

.form-group .row .col-md-4,
.form-group .row .col-md-2 {
    margin-top: 15px;
}

.btn-default-sms {
    background-color: #f5f5f5;
    border-color: #ccc;
}

/* Style dla modala schematów leczenia */
.modal-xl {
    width: 95%;
    max-width: 1200px;
}

/* Grace period modal - fit viewport without scrolling.
   Poszerzony 2026-08-14: doszła kolumna z liczbą dni karencji i datą jej końca,
   przez co opis + tkanka + liczba dni nie mieściły się już w jednym wierszu. */
.grace-period-modal .modal-dialog {
    width: 96%;
    max-width: 1500px;
    margin: 10px auto;
    height: calc(100vh - 20px);
    display: flex;
    flex-direction: column;
}

.grace-period-modal .modal-content {
    display: flex;
    flex-direction: column;
    max-height: 100%;
}

.grace-period-modal .modal-header {
    padding: 10px 15px;
    flex-shrink: 0;
}

.grace-period-modal .modal-body {
    padding: 10px 25px;
    flex: 1;
    overflow-y: auto;
}

.grace-period-modal .modal-footer {
    padding: 8px 15px;
    flex-shrink: 0;
}

/* Treatment Plans Modal - XL size specific styles */
.modal-xl.treatment-plans-modal .modal-dialog {
    width: 95%;
    max-width: 1200px;
    margin: 30px auto;
}

.modal-xl.treatment-plans-modal .modal-content {
    min-height: 600px;
    max-height: 90vh;
}

.modal-xl.treatment-plans-modal .modal-body {
    min-height: 450px;
    max-height: 70vh;
    overflow-y: auto;
    padding: 20px;
}

.modal-xl.treatment-plans-modal .form-control {
    max-width: 100%;
    box-sizing: border-box;
}

.modal-xl.treatment-plans-modal .col-xs-12,
.modal-xl.treatment-plans-modal .col-md-6 {
    padding-left: 10px;
    padding-right: 10px;
}

.modal-xl.treatment-plans-modal .row {
    margin-left: -10px;
    margin-right: -10px;
}

.treatment-plan-form {
    margin-bottom: 20px;
}

.treatment-plan-drugs-table {
    margin-top: 15px;
}

.treatment-plan-drugs-table th {
    background-color: #f5f5f5;
    font-weight: bold;
}

.treatment-plan-actions {
    margin-top: 10px;
}

.treatment-plan-actions .btn {
    margin-right: 5px;
}

.treatment-plan-info {
    background-color: #f9f9f9;
    padding: 15px;
    border-radius: 5px;
    margin-bottom: 20px;
}

.treatment-plan-info h5 {
    margin-top: 0;
    color: #333;
}

.treatment-plan-drug-item {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 3px;
    padding: 10px;
    margin-bottom: 10px;
}

.treatment-plan-drug-item:hover {
    border-color: #537fbe;
}

.treatment-plan-empty-state {
    text-align: center;
    padding: 30px;
    color: #666;
    font-style: italic;
}

.treatment-plan-form-section {
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 20px;
    margin-bottom: 20px;
    background-color: #fafafa;
}

.treatment-plan-form-section h5 {
    margin-top: 0;
    margin-bottom: 15px;
    color: #333;
}

/* Modal rozpoznania - wyższy z-index */
.modal-disease-overlay {
    z-index: 1060;
}

.modal-disease-overlay .modal-backdrop {
    z-index: 1055;
}

/* Treatment Plans Modal - Increased minimum height */
.treatment-plans-modal .modal-dialog {
    min-height: 600px;
    max-width: 95%;
    width: 1200px;
}

.treatment-plans-modal .modal-content {
    min-height: 600px;
}

.treatment-plans-modal .modal-body {
    min-height: 450px;
    max-height: 70vh;
    overflow-y: auto;
    padding: 20px;
}

/* Treatment Plans Modal - Responsive fixes */
.treatment-plans-modal .form-control {
    max-width: 100%;
    box-sizing: border-box;
}

.treatment-plans-modal .col-xs-12,
.treatment-plans-modal .col-md-6 {
    padding-left: 10px;
    padding-right: 10px;
}

.treatment-plans-modal .row {
    margin-left: -10px;
    margin-right: -10px;
}

/* Mobile responsive for treatment plans modal */
@media (max-width: 768px) {
    .treatment-plans-modal .modal-dialog,
    .modal-xl.treatment-plans-modal .modal-dialog {
        width: 95%;
        margin: 10px auto;
    }
    
    .treatment-plans-modal .modal-body,
    .modal-xl.treatment-plans-modal .modal-body {
        padding: 15px;
    }
    
    .treatment-plans-modal .col-xs-12,
    .modal-xl.treatment-plans-modal .col-xs-12 {
        padding-left: 5px;
        padding-right: 5px;
    }
    
    .treatment-plans-modal .row,
    .modal-xl.treatment-plans-modal .row {
        margin-left: -5px;
        margin-right: -5px;
    }
    
    .treatment-plans-modal .form-control,
    .modal-xl.treatment-plans-modal .form-control {
        font-size: 16px; /* Prevents zoom on iOS */
    }
    
    .treatment-plans-modal .btn,
    .modal-xl.treatment-plans-modal .btn {
        padding: 8px 12px;
        font-size: 14px;
    }
}

/* Extra small devices */
@media (max-width: 480px) {
    .treatment-plans-modal .modal-dialog,
    .modal-xl.treatment-plans-modal .modal-dialog {
        width: 98%;
        margin: 5px auto;
    }
    
    .treatment-plans-modal .modal-body,
    .modal-xl.treatment-plans-modal .modal-body {
        padding: 10px;
    }
    
    .treatment-plans-modal .col-xs-12,
    .modal-xl.treatment-plans-modal .col-xs-12 {
        padding-left: 2px;
        padding-right: 2px;
    }
    
    .treatment-plans-modal .row,
    .modal-xl.treatment-plans-modal .row {
        margin-left: -2px;
        margin-right: -2px;
    }
}

/* Treatment Plans Modal - Drugs section height */
.treatment-plans-modal .table-responsive {
    min-height: 300px;
    max-height: 400px;
    overflow-y: auto;
}

.treatment-plans-modal .table {
    margin-bottom: 0;
}

.treatment-plans-modal .table tbody {
    min-height: 200px;
}

.treatment-plans-modal .table tbody tr {
    min-height: 60px;
}

.treatment-plans-modal .table tbody td {
    vertical-align: middle;
    padding: 12px 8px;
}

/* Typeahead dropdowns - ensure they appear above modals */
.uib-typeahead-match {
    z-index: 1070 !important;
}

/* The secondary line of a suggestion (species, series, barcode) is .text-muted grey,
   which is unreadable on the blue highlight — uib marks the hovered row .active too.
   !important is needed because .text-muted itself is declared !important above.
   ⚠ Dotyczy juz TYLKO ekranow bez skorki (rezerwacja online, layout `booking`), gdzie
   podswietlenie wiersza jest ciemnoniebieskie (#004080, regula wyzej). */
.uib-typeahead-match.active > a,
.uib-typeahead-match.active > a small,
.uib-typeahead-match.active > a .text-muted,
.uib-typeahead-match.active > a i {
    color: #fff !important;
}

/* Skorka „soft" podswietla aktywny wiersz JASNYM tlem (#dfe9f7 —
   `.weter-soft-ui .dropdown-menu > li.active > a` w soft-refresh_20260915_1107_.css), a regula
   wyzej trzymala na nim BIALY tekst z !important: napis znikal w tle (2026-09-15, droplista
   „Zadanie" na modalu zadania — ale tak samo kazda inna podpowiedz w aplikacji).
   Pod skorka tekst aktywnego wiersza jest CIEMNY, druga linia przygaszona, ale czytelna. */
.weter-soft-ui .uib-typeahead-match.active > a:not(.drug-item-z):not(.drug-item-mtm):not(.drug-item-ltm),
.weter-soft-ui .uib-typeahead-match.active > a i {
    color: #1e3049 !important;
}
.weter-soft-ui .uib-typeahead-match.active > a small,
.weter-soft-ui .uib-typeahead-match.active > a .text-muted {
    color: #4d6180 !important;
}

/* Leki niosa kolor STATUSU przydatnosci i mialy wlasne, ciemnoniebieskie tlo najechania
   (`!important`, regula ~830). Pod skorka zostawialo to jeden wiersz w starej stylistyce,
   a z ciemnym tekstem bylby nieczytelny — wiec tlo jest to samo jasne co reszty listy,
   a kolor statusu przyciemniony tak, zeby sie na nim bronil. */
.weter-soft-ui .dropdown-menu .drug-item-z:hover,
.weter-soft-ui .dropdown-menu .drug-item-mtm:hover {
    background-color: #dfe9f7 !important;
}
.weter-soft-ui .uib-typeahead-match.active > a.drug-item-z,
.weter-soft-ui .dropdown-menu .drug-item-z:hover {
    color: #a3161d !important;
}
.weter-soft-ui .uib-typeahead-match.active > a.drug-item-mtm,
.weter-soft-ui .dropdown-menu .drug-item-mtm:hover {
    color: #2f7a35 !important;
}
.weter-soft-ui .uib-typeahead-match.active > a.drug-item-ltm {
    color: #a3161d !important;
}

/* Treatment Plans Listing Page Styles */
.treatment-plan-card {
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.treatment-plan-card:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    transform: translateY(-2px);
}

.treatment-plan-card h4 {
    border-bottom: 2px solid #337ab7;
    padding-bottom: 10px;
    margin-bottom: 15px;
}

.treatment-plan-card .table {
    background-color: white;
    border-radius: 4px;
    overflow: hidden;
}

.treatment-plan-card .table th {
    background-color: #f5f5f5;
    border-bottom: 2px solid #ddd;
    font-weight: 600;
    color: #333;
}

.treatment-plan-card .table td {
    vertical-align: middle;
    border-top: 1px solid #f0f0f0;
}

.treatment-plan-card .badge {
    font-size: 12px;
    padding: 5px 8px;
}

.referrals-referred-users-table th,
.referrals-referred-users-table td {
    vertical-align: middle;
    padding: 8px 15px;
}

.referrals-referred-users-table thead th {
    background-color: #f5f5f5;
    border-bottom: 2px solid #ddd;
    font-weight: 600;
    color: #333;
}

.referrals-referred-users-table tbody td {
    border-top: 1px solid #f0f0f0;
}

.treatment-plan-card .label {
    font-size: 11px;
    padding: 4px 6px;
}

.treatment-plan-card .btn-sm {
    padding: 4px 8px;
    font-size: 12px;
}

/* Search and filter styles */
.input-group-addon {
    background-color: #f8f9fa;
    border-color: #ced4da;
}

/* Removed form-select styling - keeping original size for pagination select */

.form-control:focus {
    border-color: #80bdff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* Statistics panel */
.alert-success {
    background-color: #d4edda;
    border-color: #c3e6cb;
    color: #155724;
}

.alert-success i {
    color: #155724;
}

/* Empty state styles */
.text-muted {
    color: #6c757d !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .treatment-plan-card {
        margin-bottom: 15px;
        padding: 15px;
    }
    
    .treatment-plan-card .table-responsive {
        font-size: 12px;
    }
    
    .treatment-plan-card .btn-sm {
        padding: 3px 6px;
        font-size: 11px;
    }
    
    .treatment-plan-card .label {
        font-size: 10px;
        padding: 3px 5px;
    }
}

/* Delete Treatment Plan Modal Styles */
.delete-treatment-plan-modal .modal-header {
    background-color: #f8d7da;
    border-bottom: 1px solid #f5c6cb;
}

.delete-treatment-plan-modal .modal-title {
    color: #721c24;
}

.delete-treatment-plan-modal .well {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 15px;
    margin: 15px 0;
}

.delete-treatment-plan-modal .well h5 {
    color: #495057;
    margin-bottom: 10px;
}

.delete-treatment-plan-modal .list-unstyled li {
    padding: 3px 0;
    color: #6c757d;
}

.delete-treatment-plan-modal .list-unstyled li i {
    margin-right: 8px;
    color: #007bff;
}

.dropdown-menu {
    z-index: 1070 !important;
}

.typeahead {
    z-index: 1070 !important;
}

/* Global typeahead fixes - minimal version */
.uib-typeahead-match {
    z-index: 9999 !important;
}

/* Ensure typeahead dropdowns are visible in modals */
.treatment-plans-modal .uib-typeahead-match {
    z-index: 9999 !important;
}

/* Typeahead popups (uib emits role="listbox" on the <ul>): cap height and scroll so a long
   list — especially one appended to <body> near the viewport bottom inside a modal — stays
   fully reachable instead of running off-screen. Does not affect nav/menu .dropdown-menu. */
.dropdown-menu[role="listbox"] {
    z-index: 1100; /* above .modal (1050): popups appended to <body> from a modal stay visible */
    max-height: 280px;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Recalculate numbering option - special highlight */
.dropdown-menu .menu-item-recalculate-numbering {
    background-color: #fff8e1;
    border-left: 3px solid #ff9800;
    margin: 2px 0;
}

.dropdown-menu .menu-item-recalculate-numbering a {
    color: #333;
    font-weight: 500;
}

.dropdown-menu .menu-item-recalculate-numbering a:hover {
    background-color: #ffe0b2 !important;
    color: #333 !important;
}

.dropdown-menu .menu-item-recalculate-numbering a i {
    color: #ff5722;
}

.dropdown-menu .menu-item-recalculate-numbering a:hover i {
    color: #e64a19 !important;
}

/* Mobile options cell */
.options-cell {
    white-space: nowrap;
}

/* Ikony akcji na telefonie stoją w `.options-cell` obok siebie — odstęp z reguły, nie z inline'a
   powtórzonego w każdym listingu słownika. */
.options-cell .btn-xs + .btn-xs {
    margin-left: 3px;
}

/* <dict-row-actions> to element własny, więc bez tej reguły przeglądarka trzyma go jako `inline`
   i pełnowymiarowe `.btn-block` w środku dostają inline'owego rodzica. */
dict-row-actions {
    display: block;
}

/* "Więcej opcji" menu on the WZ-tki / MM documents listings. The default dropdown item is
   cramped next to the full-width buttons above it, so the entries get a roomier hit area. */
.options-menu > li > a {
    padding: 9px 20px;
    font-size: 15px;
}

.options-menu > li > a > .icon-weter {
    margin-right: 8px;
}

@media screen and (max-width: 767px) {
    .options-cell {
        width: 40px;
        text-align: center;
    }

    .dropdown-menu .menu-item-recalculate-numbering {
        background-color: #fff8e1;
        border-left: 3px solid #ffc107;
    }
}

/* Pasek „Opcje" na listingach słowników.

   Wszystkie te ekrany wciągają pasek przez <div ng-include="common_dict_list_menu">.
   position:sticky wewnątrz .mobile-menu było martwe, bo blokiem zawierającym jest wtedy
   opakowanie ng-include — div dokładnie wysokości paska, więc nie ma po czym jechać.
   Sticky dostaje więc OPAKOWANIE (jego blokiem zawierającym jest cała treść strony),
   a wewnętrzny .mobile-menu wraca do statycznego, żeby dwa sticky się nie biły.
   top:68px = wysokość przyklejonego navbara (.navbar-fixed-top), jak w .mobile-menu. */
.dict-list-options {
    position: sticky;
    top: 68px;
    z-index: 999;
    background-color: #fff;
}

/* Szczegoly leku: „Anuluj" i „Zapisz" zawsze pod reka.

   Formularz ma kilkaset wierszy, a przyciski stały tylko na jego koncu - po pierwszym
   przewinieciu nie bylo ich widac i trzeba bylo wracac na dol, zeby zapisac. Pasek przykleja
   sie pod menu gornym (top = wysokosc .navbar-fixed-top, ta sama wartosc co w .mobile-menu).

   Pasek „Opcje" tej strony traci lepkosc, bo dwa elementy przyklejone do tej samej wysokosci
   zachodza na siebie. Zawezone do BEZPOSREDNIEGO paska strony leku - paski w zakladkach
   („Stan leku") siedza glebiej i zostaja lepkie. */
.drug-edit-page > div > .mobile-menu {
    position: static;
}
.drug-details-actions {
    position: sticky;
    top: 68px;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
    padding: 10px 0;
    margin-bottom: 10px;
    /* Tlo NIEPRZEZROCZYSTE - bez niego pola formularza przebijaja spod przyklejonego paska. */
    background-color: #fff;
    border-bottom: 1px solid #e8ecf1;
}
/* Wolna przestrzen pod dolna para przyciskow - inaczej „Zapisz" konczy sie tuz przy
   krawedzi okna i nie ma gdzie polozyc kciuka na telefonie. */
.drug-details-actions-bottom {
    overflow: hidden;
    padding-bottom: 60px;
}
@media screen and (max-width: 767px) {
    .drug-details-actions {
        padding: 8px 0;
    }
    .drug-details-actions-bottom {
        padding-bottom: 40px;
    }
}

.dict-list-options .mobile-menu {
    position: static;
    top: auto;
}

/* Wiersz słownika zaznacza się kliknięciem w dowolne miejsce (kolumna z checkboxem
   została usunięta), więc potrzebne jest podświetlenie hover. Nie używamy .table-hover:
   te listingi trzymają .row-checked na <td>, a reguła Bootstrapa (tr:hover > td) ma
   wyższą specyficzność i malowałaby zaznaczony wiersz na szaro („odznaczony"). Kolejność
   i specyficzność poniżej pilnują, żeby zaznaczenie zawsze wygrywało z hoverem. */
.dict-list-table tr:hover > td {
    background-color: #f5f5f5;
}

.dict-list-table tr > td.row-checked {
    background-color: #aed1ee;
}

.dict-list-table tr:hover > td.row-checked {
    background-color: #93c3e6;
}







/* Treatment Plans Modal Drug Rows */
.treatment-plan-drug-row {
    margin-bottom: 15px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #f9f9f9;
}

.treatment-plan-drug-row .mobile-label {
    font-size: 12px;
    color: #666;
    margin-bottom: 5px;
}

.treatment-plan-drug-row .delete-btn {
    width: 100%;
    text-align: center;
    padding: 6px 4px;
}

/* Mobile responsive adjustments for drug rows */
@media (max-width: 767px) {
    .treatment-plan-drug-row .col-xs-1 {
        padding-right: 5px;
        padding-left: 5px;
    }

    .treatment-plan-drug-row .delete-btn {
        min-width: 35px;
        padding: 6px 2px;
    }
}

/* ===== STEP INDICATOR (modal wizards) ===== */

.step-indicator {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
    padding: 15px 0;
    background-color: #f8f9fa;
    border-radius: 8px;
}

.step-indicator .step {
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 600;
    color: #999;
}

.step-indicator .step.active {
    color: #333;
}

.step-indicator .step.completed {
    color: #28a745;
}

.step-indicator .step-number {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #ccc;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
    font-weight: bold;
    font-size: 13px;
}

.step-indicator .step.active .step-number {
    background-color: #537fbe;
}

.step-indicator .step.completed .step-number {
    background-color: #28a745;
}

.step-indicator .step-separator {
    width: 40px;
    height: 2px;
    background-color: #ccc;
    margin: 0 10px;
}

.step-indicator .step-separator.completed {
    background-color: #28a745;
}

/* ===== MOBILE OPTIMIZATIONS FOR TREATMENT CARD FORM ===== */

/* Mobile-specific styles for treatment card form */
@media (max-width: 767px) {
    /* General mobile improvements */
    .container {
        padding-left: 10px;
        padding-right: 10px;
    }

    /* Larger touch targets for mobile */
    .btn {
        min-height: 44px;
        padding: 12px 16px;
        font-size: 16px;
        border-radius: 8px;
        margin-bottom: 8px;
    }

    .btn-lg {
        min-height: 48px;
        padding: 14px 20px;
        font-size: 18px;
    }

    /* Form controls mobile optimization */
    .form-control {
        height: 44px;
        font-size: 16px;
        border-radius: 6px;
        padding: 10px 12px;
    }

    /* Removed form-select styling - keeping original size for pagination select */

    /* Panel improvements for mobile */
    .panel {
        border-radius: 8px;
        margin-bottom: 15px;
    }

    .panel-heading {
        padding: 12px 15px;
        border-radius: 8px 8px 0 0;
    }

    .panel-body {
        padding: 15px;
    }

    /* Button group mobile optimization */
    .btn-group-justified .btn {
        margin-bottom: 0;
        border-radius: 6px;
    }

    /* Radio buttons mobile optimization */
    .radio-inline {
        display: block;
        margin-bottom: 10px;
        padding: 12px;
        border: 1px solid #ddd;
        border-radius: 6px;
        background-color: #f9f9f9;
    }

    .radio-inline input[type="radio"] {
        margin-right: 8px;
        transform: scale(1.2);
    }

    /* Alert improvements for mobile */
    .alert {
        padding: 15px;
        border-radius: 8px;
        margin-bottom: 15px;
    }

    .alert i {
        margin-right: 8px;
    }

    /* Navigation improvements */
    .mobile-menu .navbar-default .navbar-nav {
        display: block;
        padding: 4px;
    }

    .mobile-menu .navbar-nav > li > a {
        padding: 14px 16px;
        font-size: 15px;
        border-bottom: 1px solid #f0f0f0;
        border-radius: 0;
        margin: 0;
    }

    .mobile-menu .navbar-nav > li:last-child > a {
        border-bottom: none;
    }

    .mobile-menu .navbar-nav > li > a i {
        margin-right: 10px;
        width: 20px;
        text-align: center;
    }

    .mobile-menu .navbar-default {
        border-radius: 10px;
        overflow: hidden;
    }

    /* Form group spacing */
    .form-group {
        margin-bottom: 20px;
    }

    /* Label improvements */
    label {
        font-size: 16px;
        font-weight: 600;
        margin-bottom: 8px;
        color: #333;
    }

    /* Textarea mobile optimization */
    textarea.form-control {
        min-height: 80px;
        font-size: 16px;
    }

    /* Modal improvements for mobile */
    .modal-dialog {
        margin: 10px;
        max-width: calc(100% - 20px);
    }

    .modal-content {
        border-radius: 12px;
    }

    .modal-header {
        padding: 15px 20px;
        border-radius: 12px 12px 0 0;
    }

    .modal-body {
        padding: 20px;
        max-height: 70vh;
        overflow-y: auto;
    }

    .modal-footer {
        padding: 15px 20px;
        border-radius: 0 0 12px 12px;
    }

    /* Table improvements for mobile */
    .table-responsive {
        border-radius: 8px;
        border: 1px solid #ddd;
    }

    .table {
        margin-bottom: 0;
    }

    .table th,
    .table td {
        padding: 12px 8px;
        font-size: 14px;
    }

    /* Mobile-specific form sections */
    .mobile-form-section {
        background-color: #fff;
        border: 1px solid #ddd;
        border-radius: 8px;
        padding: 20px;
        margin-bottom: 20px;
    }

    .mobile-form-section h4 {
        margin-top: 0;
        margin-bottom: 15px;
        color: #333;
        font-size: 18px;
        font-weight: 600;
    }

    /* Floating action button for mobile */
    .mobile-fab {
        position: fixed;
        bottom: 20px;
        right: 20px;
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background-color: #537fbe;
        color: white;
        border: none;
        box-shadow: 0 4px 12px rgba(0,0,0,0.3);
        z-index: 1000;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
    }

    .mobile-fab:hover {
        background-color: #004080;
        transform: scale(1.1);
    }

    /* Mobile-specific button groups */
    .mobile-btn-group {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .mobile-btn-group .btn {
        width: 100%;
        text-align: center;
    }

    /* Mobile-specific alerts */
    .mobile-alert {
        border-radius: 8px;
        padding: 15px;
        margin-bottom: 15px;
        border-left: 4px solid;
    }

    .mobile-alert.alert-warning {
        border-left-color: #ffc107;
        background-color: #fff3cd;
    }

    .mobile-alert.alert-danger {
        border-left-color: #dc3545;
        background-color: #f8d7da;
    }

    .mobile-alert.alert-success {
        border-left-color: #28a745;
        background-color: #d4edda;
    }

    /* Mobile-specific input groups */
    .mobile-input-group {
        margin-bottom: 15px;
    }

    .mobile-input-group label {
        display: block;
        margin-bottom: 5px;
        font-weight: 600;
    }

    .mobile-input-group .form-control {
        width: 100%;
    }

    /* Mobile-specific spacing utilities */
    .mobile-mt-2 { margin-top: 10px !important; }
    .mobile-mb-2 { margin-bottom: 10px !important; }
    .mobile-mt-3 { margin-top: 15px !important; }
    .mobile-mb-3 { margin-bottom: 15px !important; }
    .mobile-p-3 { padding: 15px !important; }

    /* Mobile-specific text utilities */
    .mobile-text-center { text-align: center !important; }
    .mobile-text-left { text-align: left !important; }
    .mobile-text-right { text-align: right !important; }

    /* Mobile-specific visibility */
    .mobile-hidden { display: none !important; }
    .mobile-visible { display: block !important; }

    /* Mobile-specific grid adjustments */
    .mobile-col-12 { width: 100% !important; }
    .mobile-col-6 { width: 50% !important; }

    /* Mobile-specific card improvements */
    .mobile-card {
        background: white;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        margin-bottom: 20px;
        overflow: hidden;
    }

    .mobile-card-header {
        background-color: #f8f9fa;
        padding: 15px 20px;
        border-bottom: 1px solid #dee2e6;
        font-weight: 600;
        font-size: 16px;
    }

    .mobile-card-body {
        padding: 20px;
    }

    /* Mobile-specific list improvements */
    .mobile-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .mobile-list-item {
        padding: 15px;
        border-bottom: 1px solid #eee;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .mobile-list-item:last-child {
        border-bottom: none;
    }

    /* Mobile-specific progress indicators */
    .mobile-progress {
        height: 8px;
        border-radius: 4px;
        background-color: #e9ecef;
        overflow: hidden;
        margin: 15px 0;
    }

    .mobile-progress-bar {
        height: 100%;
        background-color: #537fbe;
        transition: width 0.3s ease;
    }

    /* Mobile options container */
    .mobile-options-container {
        padding: 0;
        margin-bottom: 20px;
    }

    /* Mobile section title */
    .mobile-section-title {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-top: 0;
        margin-bottom: 15px;
        color: #333;
        font-size: 18px;
        font-weight: 600;
        padding-bottom: 10px;
        border-bottom: 2px solid #e9ecef;
    }

    .mobile-section-title i {
        color: #537fbe;
        font-size: 20px;
    }

    /* Mobile options grid */
    .mobile-options-grid {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    /* Mobile option card */
    .mobile-option-card {
        display: flex;
        align-items: center;
        padding: 15px;
        background-color: #fff;
        border: 1px solid #e0e0e0;
        border-radius: 10px;
        text-decoration: none;
        color: #333;
        transition: all 0.3s ease;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        min-height: 70px;
    }

    .mobile-option-card:hover,
    .mobile-option-card:focus {
        background-color: #f8f9fa;
        border-color: #537fbe;
        box-shadow: 0 4px 8px rgba(83, 127, 190, 0.15);
        text-decoration: none;
        color: #333;
        transform: translateY(-2px);
    }

    .mobile-option-card:active {
        transform: translateY(0);
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    /* Mobile option icon */
    .mobile-option-icon {
        flex-shrink: 0;
        width: 48px;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #f0f4f8;
        border-radius: 10px;
        margin-right: 15px;
    }

    .mobile-option-icon i {
        font-size: 22px;
        color: #537fbe;
        display: inline-block;
        width: auto;
        height: auto;
    }

    /* Mobile option text */
    .mobile-option-text {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .mobile-option-text strong {
        font-size: 16px;
        font-weight: 600;
        color: #333;
        line-height: 1.3;
    }

    .mobile-option-text small {
        font-size: 13px;
        color: #6c757d;
        line-height: 1.2;
    }

    /* Mobile option arrow */
    .mobile-option-arrow {
        flex-shrink: 0;
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #adb5bd;
    }

    .mobile-option-card:hover .mobile-option-arrow,
    .mobile-option-card:focus .mobile-option-arrow {
        color: #537fbe;
    }

    .mobile-option-arrow i {
        font-size: 14px;
    }

    /* Mobile option card action (clickable) */
    .mobile-option-card-action {
        cursor: pointer;
    }

    .mobile-option-card-action:active {
        transform: translateY(0);
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    /* Mobile option action (instead of arrow) */
    .mobile-option-action {
        flex-shrink: 0;
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #537fbe;
    }

    .mobile-option-card-action:hover .mobile-option-action,
    .mobile-option-card-action:focus .mobile-option-action {
        color: #537fbe;
    }

    .mobile-option-action i {
        font-size: 16px;
    }

    /* Mobile option card action disabled */
    .mobile-option-card-action.disabled {
        opacity: 0.6;
        cursor: not-allowed !important;
        pointer-events: none;
    }

}

/* Desktop Options Styles */
.desktop-options-container {
    margin-bottom: 30px;
}

.desktop-options-section {
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 25px;
    height: 100%;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    transition: box-shadow 0.3s ease;
}

.desktop-options-section:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

.desktop-section-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 0;
    margin-bottom: 20px;
    color: #333;
    font-size: 20px;
    font-weight: 600;
    padding-bottom: 15px;
    border-bottom: 2px solid #e9ecef;
}

.desktop-section-title i {
    color: #537fbe;
    font-size: 22px;
}

.desktop-options-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.desktop-option-item {
    display: flex;
    align-items: center;
    padding: 15px 18px;
    background-color: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    text-decoration: none;
    color: #333;
    transition: all 0.3s ease;
    cursor: pointer;
}

.desktop-option-item:hover,
.desktop-option-item:focus {
    background-color: #537fbe;
    border-color: #537fbe;
    color: white;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(83, 127, 190, 0.25);
}

.desktop-option-item:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(83, 127, 190, 0.2);
}

.desktop-option-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    border-radius: 8px;
    margin-right: 15px;
    transition: all 0.3s ease;
}

.desktop-option-icon i {
    font-size: 18px;
    color: #537fbe;
    transition: color 0.3s ease;
    display: inline-block;
    width: auto;
    height: auto;
}

.desktop-option-item:hover .desktop-option-icon,
.desktop-option-item:focus .desktop-option-icon {
    background-color: rgba(255, 255, 255, 0.2);
}

.desktop-option-item:hover .desktop-option-icon i,
.desktop-option-item:focus .desktop-option-icon i {
    color: white;
}

.desktop-option-label {
    flex: 1;
    /* p195: opcje kroku 3 (karta/szczepienie, online i offline dzielą te klasy) były
       zbyt drobne na desktopie — jeden rozmiar dla obu światów. */
    font-size: 17px;
    font-weight: 500;
    line-height: 1.4;
}

/* Desktop options section fullwidth */
.desktop-options-section-fullwidth {
    margin-top: 25px;
}

/* Desktop options list horizontal */
.desktop-options-list-horizontal {
    flex-direction: row;
}

.desktop-option-item-fullwidth {
    width: 100%;
    justify-content: space-between;
    padding: 20px;
}

.desktop-option-item-fullwidth .desktop-option-icon {
    width: 56px;
    height: 56px;
    margin-right: 20px;
}

.desktop-option-item-fullwidth .desktop-option-icon i {
    font-size: 24px;
}

/* Desktop option item action (clickable) */
.desktop-option-item-action {
    cursor: pointer;
}

.desktop-option-item-action:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(83, 127, 190, 0.2);
}

.desktop-option-item-action[ng-disabled="true"],
.desktop-option-item-action:disabled,
.desktop-option-item-action.disabled {
    opacity: 0.6;
    cursor: not-allowed !important;
    pointer-events: none;
}

/* Tablet-specific optimizations */
@media (min-width: 768px) and (max-width: 1024px) {
    .container {
        max-width: 95%;
    }

    .btn {
        min-height: 40px;
        padding: 10px 14px;
        font-size: 15px;
    }

    .form-control {
        height: 40px;
        font-size: 15px;
    }

    .panel-body {
        padding: 20px;
    }
}

/* Large mobile devices (landscape) */
@media (max-width: 767px) and (orientation: landscape) {
    .modal-dialog {
        margin: 5px;
        max-height: 90vh;
    }

    .modal-body {
        max-height: 60vh;
    }

    .mobile-fab {
        bottom: 10px;
        right: 10px;
        width: 48px;
        height: 48px;
        font-size: 20px;
    }
}

/* Treatment Plans Modal Mobile Improvements */
@media (max-width: 767px) {
    .treatment-plans-modal .modal-dialog {
        margin: 10px;
        max-width: calc(100% - 20px);
    }

    .treatment-plans-modal .modal-body {
        padding: 15px;
        max-height: 70vh;
        overflow-y: auto;
    }

    .treatment-plan-drug-row {
        padding: 10px;
        margin-bottom: 15px;
    }

    .treatment-plan-drug-row .row > div {
        margin-bottom: 10px;
    }

    .treatment-plan-drug-row .mobile-label {
        font-size: 14px;
        font-weight: 600;
        margin-bottom: 5px;
        color: #333;
    }

    .treatment-plan-drug-row .form-control {
        height: 40px;
        font-size: 16px;
    }

    .treatment-plan-drug-row .btn {
        min-height: 40px;
        font-size: 14px;
        padding: 8px 12px;
    }

    .treatment-plan-drug-row .btn-sm {
        min-height: 36px;
        font-size: 13px;
        padding: 6px 10px;
    }

    .treatment-plan-drug-row .delete-btn {
        width: 100%;
        max-width: none;
        min-height: 40px;
        margin-top: 10px;
    }

    /* Unit measure and grace period buttons mobile optimization */
    .treatment-plan-drug-row .col-xs-6 .btn {
        width: 100%;
        margin-bottom: 5px;
        white-space: normal;
        text-align: center;
    }

    .treatment-plan-drug-row .col-xs-6 .btn i {
        margin-right: 5px;
    }

    /* Better spacing for mobile drug rows */
    .treatment-plan-drug-row .col-xs-6 {
        margin-bottom: 15px;
    }

    /* Alert improvements for mobile */
    .treatment-plan-drug-row .alert {
        padding: 8px 12px;
        font-size: 13px;
        margin-top: 5px;
    }

    /* Modal header improvements */
    .treatment-plans-modal .modal-header {
        padding: 15px 20px;
    }

    .treatment-plans-modal .modal-title {
        font-size: 18px;
    }

    /* Modal footer improvements */
    .treatment-plans-modal .modal-footer {
        padding: 15px 20px;
    }

    .treatment-plans-modal .modal-footer .btn {
        min-height: 44px;
        font-size: 16px;
        padding: 10px 20px;
    }
}

/* Tablet optimizations for treatment plans modal */
@media (min-width: 768px) and (max-width: 1024px) {
    .treatment-plans-modal .modal-dialog {
        width: 90%;
        max-width: 900px;
    }

    .treatment-plan-drug-row .btn {
        min-height: 38px;
        font-size: 14px;
    }
}


/* Mobile Menu Styles */
.mobile-menu-modal {
    padding: 0;
}

/* Phones: the menu is a full-screen sheet, not a floating card - the white surface reaches
   both edges and the full viewport height even when the item list is short. 100dvh follows
   the collapsing browser chrome on iOS/Android; 100vh stays as the fallback. */
@media (max-width: 767px) {
    .mobile-menu-window .modal-dialog {
        width: 100%;
        max-width: none;
        margin: 0;
    }

    .mobile-menu-window .modal-content {
        min-height: 100vh;
        min-height: 100dvh;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    /* The outer .modal-body is only a click-to-close surface; it must stretch too, otherwise
       the sheet ends where the item list ends. */
    .mobile-menu-window .modal-content > .modal-body {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
        min-height: 100dvh;
        padding: 0;
    }

    /* flex: 1 to flex-basis: 0 — element NIE rosnie do wysokosci tresci, wiec dluga lista
       (u nas ~2070 px przy ekranie 780 px) byla ucieta i nie dalo sie do niej doscrollowac:
       .modal ma overflow-y: auto, ale jego scrollHeight rowna sie wysokosci okna.
       flex: 1 1 auto + wlasne przewijanie sprawia, ze cale menu jest osiagalne. */
    .mobile-menu-window .mobile-menu-modal {
        flex: 1 1 auto;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}

.mobile-menu-header {
    background: linear-gradient(135deg, #537fbe, #3d66a1);
    padding: 20px;
    text-align: center;
    color: white;
    margin-bottom: 0;
}

.mobile-menu-header h4 {
    margin: 0;
    font-weight: 600;
}

.mobile-menu-section {
    background: #f8f9fa;
    padding: 15px;
    border-bottom: 1px solid #e9ecef;
}

.mobile-menu-section-white {
    background: white;
    padding: 15px;
    border-bottom: 1px solid #e9ecef;
}

.mobile-menu-section-title {
    color: #6c757d;
    margin-bottom: 10px;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 12px;
}

.mobile-menu-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mobile-menu-button {
    color: #333;
    border: none;
    border-radius: 12px;
    padding: 16px 20px;
    text-decoration: none;
    display: flex;
    align-items: center;
    text-align: left;
    transition: all 0.3s ease;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
    min-height: 60px;
    width: 100%;
    margin-bottom: 8px;
    background: white;
    border: 1px solid #e9ecef;
}

.mobile-menu-button:hover {
    text-decoration: none;
    color: #333;
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
}

.mobile-menu-button i {
    font-size: 32px;
    margin-right: 16px;
    flex-shrink: 0;
}

.mobile-menu-button span {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.2;
}

/* Color variants with colored icons */
.mobile-menu-primary {
    border-left: 4px solid #537fbe;
}

.mobile-menu-primary i {
    color: #537fbe;
}

.mobile-menu-primary:hover {
    background: #f8f9ff;
    border-color: #537fbe;
}

.mobile-menu-success {
    border-left: 4px solid #5cb85c;
}

.mobile-menu-success i {
    color: #5cb85c;
}

.mobile-menu-success:hover {
    background: #f8fff8;
    border-color: #5cb85c;
}

.mobile-menu-info {
    border-left: 4px solid #5bc0de;
}

.mobile-menu-info i {
    color: #5bc0de;
}

.mobile-menu-info:hover {
    background: #f8fdff;
    border-color: #5bc0de;
}

.mobile-menu-warning {
    border-left: 4px solid #f0ad4e;
}

.mobile-menu-warning i {
    color: #f0ad4e;
}

.mobile-menu-warning:hover {
    background: #fffef8;
    border-color: #f0ad4e;
}

.mobile-menu-danger {
    border-left: 4px solid #d9534f;
}

.mobile-menu-danger i {
    color: #d9534f;
}

.mobile-menu-danger:hover {
    background: #fff8f8;
    border-color: #d9534f;
}

.mobile-menu-neutral {
    border-left: 4px solid #6c757d;
}

.mobile-menu-neutral i {
    color: #6c757d;
}

.mobile-menu-neutral:hover {
    background: #f8f9fa;
    border-color: #6c757d;
}

/* Responsive adjustments */
@media (max-width: 480px) {
    .mobile-menu-grid {
        gap: 6px;
    }

    .mobile-menu-button {
        padding: 14px 16px;
        min-height: 55px;
    }

    .mobile-menu-button i {
        font-size: 28px;
        margin-right: 12px;
    }

    .mobile-menu-button span {
        font-size: 16px;
    }

    .mobile-menu-logout {
        padding: 16px;
    }

    .mobile-menu-logout span {
        font-size: 15px;
    }
}

/* Alternative layout: Icons on the left with larger text */
.mobile-menu-button-horizontal {
    color: white;
    border: none;
    border-radius: 12px;
    padding: 16px 20px;
    text-decoration: none;
    display: flex;
    align-items: center;
    text-align: left;
    transition: all 0.3s ease;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
    min-height: 60px;
    width: 100%;
    margin-bottom: 8px;
}

.mobile-menu-button-horizontal:hover {
    text-decoration: none;
    color: white;
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
}

.mobile-menu-button-horizontal i {
    font-size: 32px;
    margin-right: 16px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    flex-shrink: 0;
}

.mobile-menu-button-horizontal span {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.2;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Horizontal grid for alternative layout */
.mobile-menu-grid-horizontal {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Color variants for horizontal layout */
.mobile-menu-horizontal-primary {
    background: linear-gradient(135deg, #537fbe, #3d66a1);
}

.mobile-menu-horizontal-primary:hover {
    background: linear-gradient(135deg, #4a6fa8, #365a8f);
}

.mobile-menu-horizontal-success {
    background: linear-gradient(135deg, #5cb85c, #449d44);
}

.mobile-menu-horizontal-success:hover {
    background: linear-gradient(135deg, #52a852, #3d8b3d);
}

.mobile-menu-horizontal-info {
    background: linear-gradient(135deg, #5bc0de, #31b0d5);
}

.mobile-menu-horizontal-info:hover {
    background: linear-gradient(135deg, #52acc8, #2c9fc0);
}

.mobile-menu-horizontal-warning {
    background: linear-gradient(135deg, #f0ad4e, #ec971f);
}

.mobile-menu-horizontal-warning:hover {
    background: linear-gradient(135deg, #e79c45, #d3881c);
}

.mobile-menu-horizontal-danger {
    background: linear-gradient(135deg, #d9534f, #c9302c);
}

.mobile-menu-horizontal-danger:hover {
    background: linear-gradient(135deg, #c44a46, #b52b27);
}

.mobile-menu-horizontal-neutral {
    background: linear-gradient(135deg, #6c757d, #495057);
}

.mobile-menu-horizontal-neutral:hover {
    background: linear-gradient(135deg, #616a70, #40474e);
}

.mobile-menu-logout {
    color: #333;
    background: white;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    padding: 18px;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
    width: 100%;
    border-left: 4px solid #6c757d;
}

.mobile-menu-logout:hover {
    text-decoration: none;
    color: #333;
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
    background: #f8f9fa;
}

.mobile-menu-logout i {
    font-size: 24px;
    margin-right: 12px;
    color: #6c757d;
}

.mobile-menu-logout span {
    font-weight: 600;
    font-size: 16px;
}

/* Style dla kart wybranych elementów w modalu zarządzania zespołem */
.selected-item-card {
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border: 1px solid #ddd;
}

.selected-item-card:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    transform: translateY(-1px);
}

.selected-item-card .delete-btn {
    transition: all 0.2s ease;
}

.selected-item-card .delete-btn:hover {
    transform: scale(1.1);
}

/* Style dla istniejących członków zespołu */
.selected-item-card.existing-member {
    background-color: #f8f9fa;
    border-color: #dee2e6;
}

.selected-item-card.existing-member:hover {
    background-color: #e9ecef;
    border-color: #adb5bd;
}

/* Style dla nowo dodanych członków */
.selected-item-card.new-member {
    background-color: #d4edda;
    border-color: #c3e6cb;
}

.selected-item-card.new-member:hover {
    background-color: #c3e6cb;
    border-color: #a8d5b5;
}

/* Badge dla nowych członków */
.new-member-badge {
    background-color: #28a745;
    color: white;
    font-size: 10px;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 10px;
    margin-left: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Style dla listy wybranych elementów w modalu */
.selected-items-list {
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 15px;
    margin-bottom: 15px;
    position: relative;
}

/* Mobile optimizations for selected items */
@media (max-width: 767px) {
    .selected-item-card {
        padding: 15px !important;
        margin-bottom: 15px !important;
    }

    .selected-item-card .row {
        margin: 0;
    }

    .selected-item-card .col-xs-10,
    .selected-item-card .col-xs-2 {
        padding: 0;
    }

    .selected-item-card .delete-btn {
        min-width: 40px !important;
        height: 40px !important;
        padding: 8px !important;
        border-radius: 6px;
        font-size: 16px;
    }

    .selected-item-card strong {
        font-size: 16px;
        line-height: 40px;
    }

    .new-member-badge {
        font-size: 9px;
        padding: 1px 4px;
        margin-left: 6px;
    }
}

/* Tablet optimizations */
@media (min-width: 768px) and (max-width: 1024px) {
    .selected-item-card {
        padding: 14px !important;
    }

    .selected-item-card .delete-btn {
        min-width: 38px !important;
        height: 38px !important;
        padding: 7px !important;
    }

    .selected-item-card strong {
        font-size: 15px;
        line-height: 38px;
    }

    .new-member-badge {
        font-size: 9px;
        padding: 1px 5px;
        margin-left: 7px;
    }
}

/* Style dla nagłówków sekcji wybranych elementów */
.selected-items-section h5 {
    font-size: 16px;
    font-weight: 600;
    color: #555;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid #e9ecef;
}

.selected-items-section h5 i {
    margin-right: 8px;
    color: #537fbe;
}

/* Mobile optimizations for section headers */
@media (max-width: 767px) {
    .selected-items-section h5 {
        font-size: 18px;
        margin-bottom: 15px;
        padding-bottom: 10px;
    }

    .selected-items-section h5 i {
        font-size: 20px;
        margin-right: 10px;
    }
}

.wrapper {
    position: relative;
    width: 400px;
    height: 200px;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

/* Signature Fullscreen Styles */
/* Przywrócone oryginalne style signature pad */
.signature-fullscreen-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: white;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    padding: 20px;
}

.signature-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.signature-instruction {
    margin-bottom: 10px;
    margin-top: 2px;
    font-size: 1.5rem;
    font-weight: bold;
    text-align: center;
}

.signature-pad-fullscreen {
    flex: 1;
    border: 3px solid #333;
    background-color: white;
    width: 100%;
    min-height: 300px;
    position: relative;
    overflow: hidden;
}

.signature-footer {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    gap: 20px;
}

.signature-footer .btn {
    padding: 12px 30px;
    font-size: 16px;
    min-width: 120px;
}

/* Owner consent signature: full-screen capture surface, identical look to the
   treatment-card signature overlay. Rendered through uib-modal (body-appended =
   reliable), but stripped of all box chrome and sized edge-to-edge so the
   signature pad uses the WHOLE screen — not a small modal window. Reuses the
   .signature-content / .signature-pad-fullscreen / .signature-footer styles
   above (incl. their responsive + landscape rules). */
.signature-capture-modal .modal-dialog {
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    margin: 0;
}
.signature-capture-modal .modal-content {
    height: 100vh;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background-color: #fff;
}
.signature-capture-fullscreen {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 20px;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .signature-capture-fullscreen {
        padding: 10px;
    }
    .signature-fullscreen-overlay {
        padding: 10px;
    }
    .signature-instruction {
        font-size: 1.2rem;
        margin-bottom: 8px;
        margin-top: 1px;
    }
    .signature-pad-fullscreen {
        min-height: 200px;
    }
    .signature-footer {
        margin-top: 15px;
        gap: 10px;
    }
    .signature-footer .btn {
        padding: 10px 20px;
        font-size: 14px;
        min-width: 100px;
    }
}

@media (max-width: 768px) and (orientation: landscape) {
    .signature-fullscreen-overlay {
        padding: 5px;
        height: 100vh;
        overflow: hidden;
    }
    .signature-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        max-height: calc(100vh - 80px);
    }
    .signature-instruction {
        font-size: 1rem;
        margin-bottom: 5px;
        margin-top: 0px;
        flex-shrink: 0;
    }
    .signature-pad-fullscreen {
        flex: 1;
        min-height: 200px;
        max-height: 65vh;
        border: 2px solid #333;
        overflow: hidden;
    }
    .signature-footer {
        margin-top: 10px;
        gap: 8px;
        flex-shrink: 0;
    }
    .signature-footer .btn {
        padding: 6px 12px;
        font-size: 12px;
        min-width: 70px;
    }
}

/* AI Response Styling */
.ai-response-content {
    line-height: 1.6;
    font-size: 14px;
}

.ai-response-content ul {
    margin: 10px 0;
    padding-left: 20px;
}

.ai-response-content li {
    margin-bottom: 5px;
    line-height: 1.4;
}

.ai-response-content strong {
    color: #2c3e50;
    font-weight: 600;
}

.ai-response-content br {
    margin-bottom: 8px;
}

.panel-info .panel-heading {
    background-color: #d9edf7;
    border-color: #bce8f1;
    color: #31708f;
}

.panel-info .panel-heading .fa-robot {
    margin-right: 8px;
    color: #31708f;
}

.panel-info .panel-body {
    background-color: #f8f9fa;
    border-color: #bce8f1;
    padding: 15px;
}

/* AI Code Block Styling */
.ai-code-block {
    background-color: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 10px;
    margin: 10px 0;
    font-family: 'Courier New', monospace;
    font-size: 13px;
    line-height: 1.4;
    overflow-x: auto;
    white-space: pre-wrap;
    color: #333;
}

.ai-response-content em {
    font-style: italic;
    color: #666;
}

.ai-response-content strong {
    font-weight: 600;
    color: #2c3e50;
}

.ai-response-content h2 {
    font-size: 18px;
    font-weight: 600;
    color: #2c3e50;
    margin: 15px 0 10px 0;
    padding-bottom: 5px;
    border-bottom: 2px solid #3498db;
}

.ai-response-content h3 {
    font-size: 16px;
    font-weight: 600;
    color: #34495e;
    margin: 12px 0 8px 0;
}

.ai-response-content h4 {
    font-size: 14px;
    font-weight: 600;
    color: #34495e;
    margin: 10px 0 6px 0;
}

.ai-response-content p {
    margin: 8px 0;
    line-height: 1.6;
}

.ai-response-content ul {
    margin: 10px 0;
    padding-left: 20px;
}

.ai-response-content li {
    margin-bottom: 5px;
    line-height: 1.4;
}

/* AI Assistant Button Styling */
.btn-ai-assistant {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white !important;
    font-weight: bold;
    border: 2px solid #667eea;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
    position: relative;
    z-index: 1;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-appearance: none;
    vertical-align: middle;
    padding: 6px 15px;
}

.btn-ai-assistant:hover {
    background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
    color: white !important;
    text-decoration: none;
    box-shadow: 0 6px 12px rgba(0,0,0,0.3);
}

.btn-ai-assistant .icon-weter {
    color: #fff !important;
    background-color: transparent !important;
    border-color: transparent !important;
}

.btn-ai-assistant:hover .icon-weter {
    color: #fff !important;
    background-color: transparent !important;
    border-color: transparent !important;
    box-shadow: none;
}

/* Override for AI assistant button to prevent icon frame from disappearing */
.btn-ai-assistant.btn-grid-option:hover .icon-weter {
    background-color: transparent !important;
    color: white !important;
    border-color: transparent !important;
    box-shadow: none;
}

/* Styles for mobile-friendly drug listing */
.drugs-listing-container {
    margin-top: 20px;
}

.drug-item-card {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    overflow: visible;
}

.drug-item-header {
    background: #f8f9fa;
    padding: 15px 20px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
}

.drug-header-main {
    flex: 1;
    min-width: 200px;
}

.drug-name {
    margin: 0;
    color: #333;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
}

.drug-info-inline {
    font-weight: 400;
    font-size: 16px;
    color: #666;
}

.drug-item-content {
    padding: 20px;
}


.drug-form-row {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.drug-form-row-first,
.drug-form-row-second {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.drug-form-item {
    flex: 1;
    min-width: 250px;
    margin-bottom: 15px;
}

.drug-form-label {
    font-weight: 600;
    color: #555;
    margin-bottom: 8px;
    display: block;
    font-size: 14px;
}

.drug-form-item .form-control {
    margin-bottom: 5px;
}

.drug-form-item .btn {
    margin-right: 5px;
    margin-top: 5px;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .drug-item-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    
    .drug-header-main {
        min-width: auto;
    }
    
    .drug-name {
        font-size: 16px;
    }
    
    .drug-info-inline {
        font-size: 14px;
        display: block;
        margin-top: 5px;
    }
    
    .drug-form-row-first,
    .drug-form-row-second {
        flex-direction: column;
        gap: 15px;
    }
    
    .drug-form-item {
        min-width: auto;
    }
    
    .drug-item-content {
        padding: 15px;
    }
}

@media (max-width: 480px) {
    .drug-item-header {
        padding: 10px 15px;
    }
    
    .drug-item-content {
        padding: 10px 15px;
    }
    
    .drug-name {
        font-size: 15px;
    }
    
    .drug-info-label,
    .drug-form-label {
        font-size: 13px;
    }
    
    .drug-info-value {
        font-size: 13px;
    }
}

/* Invoice item styles - matching drug item styles */
.invoice-item-card {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    overflow: visible;
}

.invoice-item-header {
    background: #f8f9fa;
    padding: 15px 20px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.invoice-header-main {
    flex: 1;
}

.invoice-name {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #333;
    line-height: 1.4;
}

.invoice-info-inline {
    font-weight: 400;
    color: #666;
    font-size: 14px;
}

.invoice-item-content {
    padding: 20px;
}

.invoice-form-label {
    font-weight: 600;
    color: #555;
    margin-bottom: 8px;
    display: block;
    font-size: 14px;
}

.invoice-header-highlight {
    background: linear-gradient(140deg, #eef3ff 0%, #dbe5ff 100%);
    border: 1px solid #4869b3;
    border-radius: 10px;
    padding: 22px 24px 12px;
    margin-bottom: 25px;
    box-shadow: 0 10px 24px rgba(72, 105, 179, 0.18);
}

.invoice-header-highlight .invoice-form-label,
.invoice-header-highlight .form-control-static {
    color: #1f356a;
}

.invoice-header-highlight .form-control,
.invoice-header-highlight .btn-default,
.invoice-header-highlight .input-group-addon {
    border-color: #6f8dde;
}

.invoice-header-highlight .form-control:focus {
    border-color: #3f5faa;
    box-shadow: 0 0 8px rgba(63, 95, 170, 0.35);
}

.invoice-header-highlight .btn-default {
    background-color: #f3f6ff;
    color: #1f356a;
}

.invoice-header-highlight .btn-default:hover,
.invoice-header-highlight .btn-default:focus {
    background-color: #e4ebff;
    color: #1f356a;
}

.invoice-header-section {
    background: linear-gradient(135deg, #f4f7ff 0%, #e5ecff 100%);
    border-left: 4px solid #4a6fb6;
    border-radius: 8px;
    padding: 20px 20px 10px;
    margin-bottom: 20px;
    box-shadow: 0 6px 12px rgba(74, 111, 182, 0.15);
}

.invoice-header-section .invoice-form-label,
.invoice-header-section .form-control-static {
    color: #1f3668;
}

.invoice-action-buttons {
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Mobile responsiveness for invoice items */
@media (max-width: 768px) {
    .invoice-item-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    
    .invoice-name {
        font-size: 15px;
    }
    
    .invoice-item-content {
        padding: 15px;
    }
}

@media (max-width: 480px) {
    .invoice-item-header {
        padding: 10px 15px;
    }
    
    .invoice-item-content {
        padding: 10px 15px;
    }
    
    .invoice-name {
        font-size: 15px;
    }
    
    .invoice-form-label {
        font-size: 13px;
    }
}

/* Enhanced UX styles for follow-up sections - unified blue theme */
.page-header-section {
    background: linear-gradient(135deg, #f8f9fa 0%, #e3f2fd 100%);
    border-bottom: 3px solid #5bc0de;
    padding: 20px 0;
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.page-header-content {
    text-align: center;
}

.page-title {
    color: #2c3e50;
    font-weight: 600;
    margin: 0;
    font-size: 28px;
}

.page-subtitle {
    display: block;
    color: #34495e;
    font-size: 16px;
    font-weight: 500;
    margin-top: 5px;
}

.instructions-section {
    margin-bottom: 25px;
}

.section-header-priority-normal {
    background: linear-gradient(135deg, #f8f9fa 0%, #f0f8ff 100%);
    border: 1px solid #2c5aa0;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 20px;
}

.progress-section {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #e9ecef;
}

.section-navigation {
    background: #f8f9fa;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #e9ecef;
}

.summary-panel {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 0;
}

.summary-panel .panel {
    border: none;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.summary-panel .panel-heading {
    background: linear-gradient(135deg, #5bc0de 0%, #46b8da 100%);
    color: white;
    border: none;
}

.summary-panel .panel-title {
    font-weight: 600;
}

.summary-panel .list-unstyled li {
    padding: 3px 0;
    border-bottom: 1px solid #f0f0f0;
}

.summary-panel .list-unstyled li:last-child {
    border-bottom: none;
}

/* Supplier button layout improvements */
.invoice-action-buttons .row {
    display: flex;
    align-items: center;
    margin-left: -15px;
    margin-right: -15px;
}

.invoice-action-buttons .row .col-md-8,
.invoice-action-buttons .row .col-md-4 {
    padding-left: 15px;
    padding-right: 15px;
    display: flex;
    align-items: center;
}

.invoice-action-buttons .row .col-md-8 {
    padding-right: 15px;
}

.invoice-action-buttons .row .col-md-4 {
    padding-left: 15px;
}

.invoice-action-buttons .row .col-md-8 select {
    height: 34px;
    width: 100%;
}

.invoice-action-buttons .row .col-md-4 .btn {
    height: 34px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 768px) {
    .invoice-action-buttons .row {
        flex-direction: column;
        align-items: stretch;
    }
    
    .invoice-action-buttons .row .col-md-8,
    .invoice-action-buttons .row .col-md-4 {
        margin-bottom: 10px;
    }
    
    .invoice-action-buttons .row .col-md-4 .btn {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .invoice-action-buttons .row .col-md-8,
    .invoice-action-buttons .row .col-md-4 {
        margin-bottom: 8px;
    }
}

@media (max-width: 480px) {
    .card-info-button-row h3 {
        font-size: 16px;
    }
    
    .card-info-button-row .btn-lg {
        font-size: 14px;
        padding: 8px 16px;
    }
}
@media (max-width: 480px) {
    .page-title {
        font-size: 20px;
    }
    
    .page-subtitle {
        font-size: 13px;
        color: #34495e;
    }
    
    .section-header-priority-normal h3 {
        font-size: 18px;
    }
    
    .summary-panel .col-md-4,
    .summary-panel .col-md-6 {
        margin-bottom: 15px;
    }
}

/* Invoice form styles */
.invoice-warning-icon {
    vertical-align: middle;
}

.invoice-warning-alert {
    padding: 40px;
}

.invoice-warehouse-icon {
    color: #2c5aa0;
}

.invoice-warehouse-title {
    margin-top: 0;
    color: #2c5aa0;
    font-weight: bold;
}

.invoice-warehouse-description {
    margin-bottom: 0;
    font-size: 14px;
}

.invoice-section-title {
    color: #2c5aa0;
    margin-bottom: 15px;
    border-left: 4px solid #2c5aa0;
    padding-left: 15px;
}

.invoice-supplier-buttons {
    margin-top: 0;
}

.invoice-supplier-input {
    margin-bottom: 5px;
    width: 100%;
}

.invoice-supplier-button {
    width: 100%;
}

.invoice-loading-center {
    text-align: center;
    margin-top: 5px;
}

.invoice-drug-item-section {
    border: 1px solid #ddd;
    margin-bottom: 20px;
    padding: 15px;
    border-radius: 5px;
    background: #f9f9f9;
}

.invoice-drug-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.invoice-drug-item-title {
    margin: 0;
    color: #333;
}

/* Nowy, większy label "Pozycja X" w nagłówku pozycji */
.invoice-pozycja-label {
    font-size: 18px;
    font-weight: 700;
    color: #222;
    flex: 0 0 auto;
    white-space: nowrap;
}

/* Kontener nazw leku w nagłówku pozycji (zastępuje col-md-8 dla Nazwa towaru) */
.invoice-drug-header-names {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    font-size: 14px;
}

.invoice-drug-header-names .invoice-drug-header-label {
    font-weight: 600;
    color: #555;
    white-space: nowrap;
    font-size: 15px;
}

/* Pojedynczy link nazwy leku (Wariant C - view mode z identyczna nazwa) */
.invoice-drug-header-names > div > .invoice-drug-link {
    font-size: 18px;
    font-weight: 700;
}

/* Pigułka z nazwą (Na dokumencie / Główna) w nagłówku */
.invoice-drug-header-name-pill {
    background: #f0f4f8;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 16px;
    word-break: break-word;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background 0.15s ease, box-shadow 0.15s ease;
}

/* Wartosc nazwy w pigulce - wieksza czcionka dla czytelnosci */
.invoice-drug-header-name-pill .pill-value {
    font-size: 18px;
}

.invoice-drug-header-name-pill.pill-clickable {
    cursor: pointer;
}

.invoice-drug-header-name-pill.pill-clickable:hover {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.invoice-drug-header-name-pill.pill-clickable[disabled],
.invoice-drug-header-name-pill.pill-clickable.pill-disabled {
    cursor: not-allowed;
    opacity: 0.65;
}

.invoice-drug-header-name-pill .pill-value {
    white-space: normal;
}

/* Nazwa na dokumencie - zolty */
.invoice-drug-header-name-pill.pill-document {
    background: #fcf8e3;
    color: #8a6d3b;
}

.invoice-drug-header-name-pill.pill-document.pill-clickable:hover {
    background: #faf2cc;
}

/* Nazwa glowna - zielony + pogrubiona */
.invoice-drug-header-name-pill.pill-reference {
    background: #dff0d8;
    color: #3c763d;
}

.invoice-drug-header-name-pill.pill-reference .pill-value {
    font-weight: 700;
}

.invoice-drug-header-name-pill.pill-reference.pill-clickable:hover {
    background: #d0e9c6;
}

/* Link-value wewnatrz pigulki (nazwa glowna jako link) */
.invoice-drug-header-name-pill .pill-value-link {
    color: inherit;
    text-decoration: underline;
    font-weight: 700;
}

.invoice-drug-header-name-pill .pill-value-link:hover {
    color: inherit;
    text-decoration: underline;
}

/* Prawa strona nagłówka — minus icon + opcjonalne ikony */
.invoice-drug-header-actions {
    margin-left: auto;
    flex: 0 0 auto;
    display: flex;
    gap: 8px;
    align-items: center;
}

/* Wiersz akcji w trybie podglądu (pod nagłówkiem) */
.invoice-drug-view-actions {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    margin: 0 0 12px 0;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}

.invoice-drug-view-actions .btn {
    margin: 0;
}

/* Wiersz 5 pól podstawowych (Data ważności, Seria, Jednostka, Ilość, Stan) */
.invoice-drug-basic-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 15px 0;
}

.invoice-drug-basic-row > .invoice-drug-field {
    /* Six fields fit on one line: a semen row adds "Data produkcji nasienia" between the series and
       the unit, and "Aktualny stan" must not drop to a second line. Rows without it keep filling the
       whole width, because the items still grow. */
    flex: 1 1 calc((100% - 50px) / 6);
    min-width: 125px;
    margin-bottom: 0;
}

@media (max-width: 991px) {
    .invoice-drug-basic-row > .invoice-drug-field {
        flex-basis: calc((100% - 20px) / 3);
    }
}

@media (max-width: 767px) {
    .invoice-drug-basic-row > .invoice-drug-field {
        flex-basis: calc((100% - 10px) / 2);
    }
}

.invoice-remove-drug {
    color: #d9534f;
    cursor: pointer;
    font-size: 28px;
    line-height: 1;
}

.invoice-remove-drug:hover {
    color: #b52b27;
}

.invoice-drug-basic-info {
    margin-bottom: 15px;
}

.invoice-drug-basic-title {
    color: #666;
    margin-bottom: 10px;
    border-bottom: 1px solid #eee;
    padding-bottom: 5px;
}

.invoice-drug-field {
    margin-bottom: 10px;
}

a.invoice-drug-link,
a.invoice-drug-link:link,
a.invoice-drug-link:visited,
a.invoice-drug-link:hover {
    text-decoration: underline !important;
}

.invoice-drug-grey {
    color: grey;
}

.invoice-drug-error {
    color: red;
    font-size: 12px;
}

.invoice-drug-error-link {
    color: red;
    text-decoration: underline;
}

.invoice-drug-button {
    /* margin-top: 1px usunięty — pchał ikonkę kalendarza pixel niżej niż input daty.
       Klasa jest używana tylko przy datepickerze pola "Data ważności", więc nic innego się nie zepsuje. */
}

.invoice-drug-spinner {
    margin-left: 10px;
}

.invoice-drug-dod-info {
    margin-bottom: 15px;
}

.invoice-drug-dod-panel {
    border-color: #2c5aa0;
    box-shadow: 0 2px 4px rgba(44, 90, 160, 0.1);
}

/* Cenniki - niebieski naglowek (rozroznienie wzrokowe) */
.invoice-drug-financial-heading {
    background: linear-gradient(135deg, #e8f2ff 0%, #d1e7ff 100%) !important;
    border-bottom: 2px solid #2c5aa0 !important;
    cursor: pointer;
}

/* Psychotropy - szary naglowek (tak jak DOD) */
.drug-psychotropic-info .invoice-drug-dod-heading {
    background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
    border-bottom: 2px solid #999;
}

/* Psychotropy - szara ramka panelu (zamiast niebieskiej) */
.drug-psychotropic-info .invoice-drug-dod-panel {
    border-color: #ccc;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.drug-psychotropic-info .invoice-drug-dod-body {
    background: #fafafa;
    border-top: 1px solid #ddd;
}

/* DOD - szary naglowek (zamiast niebieskiego) */
.drug-dod-info .invoice-drug-dod-heading,
.invoice-drug-dod-heading {
    background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
    border-bottom: 2px solid #999;
    cursor: pointer;
}

/* DOD - szara ramka panelu (zamiast niebieskiej #2c5aa0) */
.drug-dod-info .invoice-drug-dod-panel {
    border-color: #ccc;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.drug-dod-info .invoice-drug-dod-body {
    background: #fafafa;
    border-top: 1px solid #ddd;
}

.invoice-drug-dod-header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.invoice-drug-dod-title {
    margin: 0;
    font-size: 16px;
    font-weight: bold;
    color: #000;
}

.invoice-drug-dod-title .fa-file-text {
    color: #000;
}

.invoice-drug-dod-icon {
    margin-right: 5px;
}

.invoice-drug-dod-drug-name {
    font-size: 16px;
    font-weight: normal;
    color: #000;
}

.invoice-drug-dod-complete-text {
    font-size: 12px;
    font-weight: normal;
    color: #666;
}

.invoice-drug-dod-toggle {
    padding: 6px 12px;
    font-size: 13px;
    color: #2c5aa0;
}

.invoice-drug-dod-body {
    padding: 20px;
    background: #f8fbff;
    border-top: 1px solid #d1e7ff;
}

.invoice-drug-dod-section {
    margin-bottom: 20px;
}

.invoice-drug-dod-section-title {
    color: #666;
    margin-bottom: 10px;
    border-bottom: 1px solid #eee;
    padding-bottom: 5px;
}

.invoice-drug-dod-button {
    margin-top: 5px;
}

.invoice-drug-financial-info {
    margin-bottom: 15px;
}

.invoice-drug-financial-panel {
    border-color: #2c5aa0;
    box-shadow: 0 2px 4px rgba(44, 90, 160, 0.1);
}

.invoice-drug-financial-heading {
    background: linear-gradient(135deg, #e8f2ff 0%, #d1e7ff 100%);
    border-bottom: 2px solid #2c5aa0;
    cursor: pointer;
}

.invoice-drug-financial-header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.invoice-drug-financial-title {
    margin: 0;
    color: #2c5aa0;
    font-size: 16px;
    font-weight: bold;
}

.invoice-drug-financial-drug-name {
    font-size: 16px;
}

/* Styles for government reference drugs */
.gov-ref-drug {
    color: #337ab7 !important;
    font-weight: bold !important;
}

.invoice-drug-financial-toggle {
    padding: 6px 12px;
    font-size: 13px;
    color: #2c5aa0;
}

/* Krotkie potwierdzenie udanego zapisu pozycji / cennika / DOD w naglowku danej sekcji
   faktury za leki. Sam gasnie; JS zdejmuje element po 3 s, czyli dokladnie wtedy, gdy
   animacja konczy sie na opacity 0 — dzieki temu nie ma przeskoku przy znikaniu. */
.invoice-saved-flash {
    display: inline-block;
    margin-right: 12px;
    color: #3c763d;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    animation: invoiceSavedFlash 3s ease-out forwards;
}

@keyframes invoiceSavedFlash {
    0%   { opacity: 0; transform: translateY(-3px); }
    12%  { opacity: 1; transform: translateY(0); }
    75%  { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(0); }
}

.invoice-drug-financial-body {
    padding: 20px;
    background: #f8fbff;
    border-top: 1px solid #d1e7ff;
}

.invoice-drug-financial-row {
    margin-bottom: 15px;
}

.invoice-drug-financial-field {
    margin-bottom: 10px;
}

/* Flex row z 7 polami cennikowymi w jednej linii */
.invoice-drug-financial-row-flex {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 0;
}

/* flex-basis: 0 — pola rosną proporcjonalnie od zera, min-width zapobiega zbyt wąskim kolumnom.
   Naturalne wrapowanie przez flex-wrap, bez wymuszania 4/rząd na szerokości 1199px, żeby "Wartość marży"
   trzymała się w tym samym wierszu co pozostałe pola cennika. */
.invoice-drug-financial-row-flex > .invoice-drug-financial-field {
    flex: 1 1 0;
    min-width: 85px;
    margin-bottom: 0;
}

/* "Wartość marży" pokazuje dwie kwoty (N/B) — potrzebuje więcej miejsca, żeby zmieścić się w jednej linii */
.invoice-drug-financial-row-flex > .invoice-drug-financial-field--wide {
    flex: 2 1 0;
    min-width: 160px;
}

.invoice-drug-margin-value {
    white-space: nowrap;
    font-size: 12px;
}

/* Inputy/wartości wszystkich pól cennika na wspólnej dolnej linii: kolumnowy flex,
   a etykieta (flex-grow) pochłania różnice wysokości — etykiety łamią się na 1-3 linie
   zależnie od szerokości i bez tego każde pole siedziało na innej wysokości */
.invoice-drug-financial-row-flex > .invoice-drug-financial-field {
    display: flex;
    flex-direction: column;
}
.invoice-drug-financial-row-flex > .invoice-drug-financial-field > label {
    flex: 1 0 auto;
}

/* Podpowiedź "wygląda na promocję": pełnoszerokościowy element w row-flex wymusza własną linię
   (pola mają flex-basis 0, więc flex-wrap sam z siebie nigdy nie zawija) — alert w środku jest
   inline-block, dzięki czemu zaczyna się pod "Cena zakupu netto" i nie rozciąga na cały wiersz */
.invoice-drug-financial-row-flex > .invoice-drug-promo-hint-row {
    flex: 0 0 100%;
    min-width: 100%;
}

@media (max-width: 767px) {
    .invoice-drug-financial-row-flex > .invoice-drug-financial-field {
        flex-basis: calc((100% - 10px) / 2);
        min-width: 0;
    }
    .invoice-drug-financial-row-flex > .invoice-drug-financial-field--wide {
        flex-basis: 100%;
    }
}

/* "Zwiń" jako tekstowy link (zamiast przycisku) w nagłówku Cenniki */
.invoice-drug-financial-collapse-link {
    color: #2c5aa0;
    text-decoration: underline;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    font-size: 14px;
    font-weight: 600;
}

.invoice-drug-financial-collapse-link:hover,
.invoice-drug-financial-collapse-link:focus {
    color: #1a3d6e;
    text-decoration: underline;
    outline: none;
}

/* Info message w nagłówku Cenniki (po pałce) */
.invoice-drug-financial-info-message {
    font-size: 13px;
    font-weight: normal;
    color: #555;
    font-style: italic;
}

.invoice-drug-financial-warning {
    color: #777;
    font-size: 12px;
    font-weight: normal;
    cursor: help;
}

/* Sekcja akcji leku */
.invoice-drug-actions-section {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 5px;
    padding: 15px;
    margin-top: 10px;
}

.invoice-drug-action-button {
    margin-bottom: 10px;
}

.invoice-drug-action-button:last-child {
    margin-bottom: 0;
}

.invoice-drug-magazine-states {
    margin-bottom: 15px;
    padding: 10px;
    background-color: #ffffff;
    border: 1px solid #e9ecef;
    border-radius: 3px;
}

.invoice-drug-magazine-states small {
    display: block;
    margin-bottom: 2px;
}

/* Szczegóły stanów magazynowych w polu "Aktualny stan" */
.invoice-drug-magazine-states-details {
    margin-top: 8px;
    padding: 8px;
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 3px;
    font-size: 11px;
}

.invoice-drug-magazine-item {
    display: block;
    margin-bottom: 2px;
    color: #6c757d;
}

/* Sekcja stanów magazynowych */
.invoice-drug-magazine-section {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 5px;
    padding: 15px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.invoice-drug-magazine-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 10px;
}

.invoice-drug-magazine-item {
    background-color: #ffffff;
    border: 1px solid #e9ecef;
    border-radius: 5px;
    padding: 10px;
    min-width: 150px;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.invoice-drug-magazine-name {
    font-weight: bold;
    color: #495057;
    margin-bottom: 5px;
    font-size: 12px;
}

.invoice-drug-magazine-state {
    font-size: 16px;
    font-weight: bold;
    color: #28a745;
}

/* Kompaktowa sekcja stanów magazynowych */
.invoice-drug-magazine-compact {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 5px;
    padding: 12px 15px;
    margin-top: 5px;
    margin-bottom: 10px;
    font-size: 15px;
}

.invoice-drug-magazine-compact-header {
    display: inline-block;
    margin-right: 12px;
    color: #495057;
    font-size: 15px;
}

.invoice-drug-magazine-compact-list {
    display: inline-block;
    font-size: 15px;
}

.invoice-drug-magazine-compact-item {
    color: #6c757d;
    font-size: 15px;
}

.invoice-drug-magazine-compact-item strong {
    color: #28a745;
    font-weight: bold;
    font-size: 16px;
}

/* Przyciski akcji na poziomie pozycji */
.invoice-drug-position-actions {
    display: inline-block;
    margin-left: 15px;
}

.invoice-drug-position-actions .btn {
    margin-right: 5px;
    margin-bottom: 2px;
}

/* Czerwone ramki dla niewypełnionych pól DOD */
.field-error-border {
    border: 1px solid #d9534f !important;
    box-shadow: 0 0 3px rgba(217, 83, 79, 0.2) !important;
}

.field-error-border:focus {
    border-color: #d9534f !important;
    box-shadow: 0 0 5px rgba(217, 83, 79, 0.3) !important;
}

/* Form-validation standard: any Angular-validated field (ng-required / ng-pattern / type=…)
   that stays invalid after the user leaves it gets the same red border. Custom-validated
   forms (controller-side checks) bind .field-error-border directly — see admin/resources. */
.form-control.ng-invalid.ng-touched {
    border-color: #d9534f !important;
    box-shadow: 0 0 3px rgba(217, 83, 79, 0.2) !important;
}

.field-warning-border {
    border: 1px solid #f0ad4e !important;
    box-shadow: 0 0 3px rgba(240, 173, 78, 0.2) !important;
}

.field-warning-border:focus {
    border-color: #f0ad4e !important;
    box-shadow: 0 0 5px rgba(240, 173, 78, 0.3) !important;
}

/* ===== STYLE REJESTRACJI ===== */

/* Panel rejestracji podczas ładowania */
.register-panel-loading {
    opacity: 0.7;
    pointer-events: none;
}

/* Overlay podczas ładowania */
.register-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255,255,255,0.3);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}

/* Komunikat ładowania */
.register-loading-message {
    text-align: center;
    background: rgba(255,255,255,0.95);
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    border: 2px solid #337ab7;
}

.register-loading-spinner {
    color: #337ab7;
    margin-bottom: 15px;
}

.register-loading-title {
    color: #337ab7;
    margin: 0 0 10px 0;
    font-weight: 600;
}

.register-loading-text {
    color: #555;
    margin: 0;
    font-size: 14px;
}

.register-loading-warning {
    color: #f0ad4e;
}

/* Przyciski podczas ładowania */
.register-btn-loading {
    opacity: 0.6;
    cursor: not-allowed;
}

.register-btn-primary-loading {
    opacity: 0.8;
    cursor: not-allowed;
}

.register-btn-spinner {
    display: flex;
    align-items: center;
    justify-content: center;
}

.register-btn-spinner-icon {
    margin-right: 8px;
}

/* Overlay na całą stronę podczas ładowania */
.register-page-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.1);
    z-index: 9999;
    pointer-events: none;
}

/* Wyłączenie wszystkich linków podczas ładowania */
.register-loading-active a {
    pointer-events: none !important;
    cursor: not-allowed !important;
    opacity: 0.6 !important;
}

/* Wyłączenie przycisków podczas ładowania */
.register-loading-active button {
    pointer-events: none !important;
    cursor: not-allowed !important;
    opacity: 0.6 !important;
}

/* Wyłączenie formularzy podczas ładowania */
.register-loading-active input {
    pointer-events: none !important;
    cursor: not-allowed !important;
    opacity: 0.6 !important;
}

/* Start page tile styles */
.start-page-tile {
    padding: 10px;
    margin-bottom: 15px;
    transition: all 0.15s ease;
    border: 1px solid #ddd;
    border-radius: 4px;
    display: flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
}
.start-page-tile:hover {
    background-color: #e8f4f8;
    border-color: #5bc0de;
    box-shadow: 0 2px 8px rgba(91, 192, 222, 0.3);
    text-decoration: none;
    color: inherit;
}
.start-page-tile-icon {
    color: #537fbe;
    font-size: 2em;
    margin-right: 15px;
    min-width: 60px;
    text-align: center;
    transition: all 0.15s ease;
}
.start-page-tile:hover .start-page-tile-icon {
    color: #004080;
    transform: scale(1.1);
}
.start-page-tile-content {
    flex: 1;
}
.start-page-tile-content h3 {
    margin-top: 0;
    margin-bottom: 5px;
    color: #537fbe;
}
.start-page-tile-content p {
    margin-bottom: 0;
}

/* Sticky header dla strony właściciela na urządzeniach mobilnych */
.client-sticky-header {
    position: fixed;
    top: 50px;
    left: 0;
    right: 0;
    background-color: #537fbe;
    color: white;
    padding: 10px 15px;
    z-index: 998;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    transition: transform 0.3s ease-in-out;
}

.client-sticky-header-content {
    text-align: center;
    max-width: 100%;
}

.client-sticky-header-name {
    font-size: 16px;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    margin: 0;
}

/* Sticky header dla strony zwierzęcia na urządzeniach mobilnych */
.animal-sticky-header {
    position: fixed;
    top: 50px;
    left: 0;
    right: 0;
    background-color: #537fbe;
    color: white;
    padding: 10px 15px;
    z-index: 998;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    transition: transform 0.3s ease-in-out;
}

.animal-sticky-header-content {
    text-align: center;
    max-width: 100%;
}

.animal-sticky-header-name {
    font-size: 16px;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    margin: 0;
}

/* p88: odstep pod formularzem karty OFFLINE — zafiksowany pasek akcji nie moze zaslaniac
   ostatnich pol. Na desktopie pasek siedzi w rogu, wystarczy staly zapas; na mobile pasek
   ma pelna szerokosc, wiec zapas rowna sie jego realnej wysokosci (--sticky-bar-h). */
.offline-sticky-spacer {
    height: 24px;
}

@media (max-width: 767px) {
    .offline-sticky-spacer {
        height: calc(var(--sticky-bar-h, 90px) + 16px + env(safe-area-inset-bottom, 0px));
    }
}

/* Sticky przycisk Wykonaj na formularzu karty leczenia */
.sale-form-sticky-execute {
    position: fixed !important;
    bottom: 0 !important;
    right: 0 !important;
    z-index: 9999 !important;
    padding: 15px 20px;
    background-color: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
    border-top-left-radius: 8px;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.sale-form-sticky-execute-content {
    text-align: right;
}

.sale-form-sticky-execute .btn {
    min-width: 150px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Ukryj sticky przycisk gdy modal jest otwarty - zapobiega zasłanianiu przycisków w modalu */
body.modal-open .sale-form-sticky-execute {
    display: none !important;
}

@media (max-width: 767px) {
    .sale-form-sticky-execute {
        left: 0 !important;
        right: 0 !important;
        padding: 10px 15px;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }
    
    /* Flex zamiast width: 100% na przycisku — w trybie skanowania w pasku stoja DWA
       przyciski („Skanuj" + „Dalej") i maja podzielic szerokosc po rowno, a przy jednym
       (zwykly formularz) pojedynczy przycisk nadal wypelnia caly pasek. */
    .sale-form-sticky-execute-content {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        justify-content: center;
    }


    .sale-form-sticky-execute .btn {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
    }

    /* MUSI byc PO regule .btn wyzej — ta sama specyficznosc (dwie klasy), wiec decyduje
       kolejnosc. Wczesniej stala przed nia i „Wybierz zwierzeta" ladowalo w jednym wierszu
       ze „Skanuj"/„Dalej" zamiast nad nimi. */
    .sale-form-sticky-execute .sticky-full-row {
        flex: 1 0 100%;
    }
}

/* Sticky przyciski dla kroku drugiego */
.sale-form-sticky-step-two {
    position: fixed !important;
    bottom: 0 !important;
    right: 0 !important;
    z-index: 9999 !important;
    padding: 15px 20px;
    background-color: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
    border-top-left-radius: 8px;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Ukryj sticky przycisk step-two gdy modal jest otwarty - zapobiega zasłanianiu przycisków w modalu */
body.modal-open .sale-form-sticky-step-two {
    display: none !important;
}

.sale-form-sticky-step-two-content {
    text-align: right;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.sale-form-sticky-step-two .btn {
    min-width: 150px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.sale-form-sticky-step-two .btn-default {
    min-width: auto;
    width: auto;
    padding: 10px 15px;
}

@media (max-width: 767px) {
    .sale-form-sticky-step-two {
        left: 0 !important;
        right: 0 !important;
        padding: 10px 15px;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }
    
    .sale-form-sticky-step-two-content {
        text-align: center;
        justify-content: center;
    }
    
    .sale-form-sticky-step-two .btn-primary {
        flex: 1;
        min-width: auto;
    }
    
    .sale-form-sticky-step-two .btn-default {
        flex: 0 0 auto;
    }
}

/* Padding-bottom na formularzu faktury za leki, żeby sticky "Zapisz" nie zasłaniał przycisku "Dodaj następny wiersz" */
.druginvoice-form-with-sticky {
    padding-bottom: 110px;
}

/* Czerwona ramka na polu daty ważności gdy parser nie odczytał wartości i wstawiono sentinel 9999-12-31.
   Outline zamiast border/box-shadow — rysuje się poza layoutem, nie zmienia wymiarów ani nie miesza
   się z renderowaniem display:table w .input-group (gdzie box-shadow: inset rozjeżdżał się na styku
   komórek input + przycisk kalendarza). */
.invoice-drug-expire-missing .input-group {
    outline: 2px solid #dc3545;
    outline-offset: -1px;
    border-radius: 4px;
}
.invoice-drug-expire-missing .input-group input.form-control {
    background-color: #fff5f5 !important;
}

/* Sticky przycisk Zapisz dla faktury za leki */
.druginvoice-sticky-save {
    position: fixed !important;
    bottom: 0 !important;
    right: 0 !important;
    z-index: 9999 !important;
    padding: 15px 20px;
    background-color: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
    border-top-left-radius: 8px;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Ukryj sticky przycisk faktury za leki gdy modal jest otwarty - zapobiega zasłanianiu przycisków w modalu */
body.modal-open .druginvoice-sticky-save {
    display: none !important;
}

.druginvoice-sticky-save-content {
    text-align: right;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.druginvoice-sticky-save .btn {
    min-width: 150px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

@media (max-width: 767px) {
    .druginvoice-sticky-save {
        left: 0 !important;
        right: 0 !important;
        padding: 10px 15px;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }
    
    .druginvoice-sticky-save-content {
        text-align: center;
        justify-content: center;
    }
    
    .druginvoice-sticky-save .btn-primary {
        flex: 1;
        min-width: auto;
    }
}

/* Sticky przycisk Zapisz i kontynuuj dla aktualizacji kart obrotu detalicznego */
.updatedods-sticky-save {
    position: fixed !important;
    bottom: 0 !important;
    right: 0 !important;
    z-index: 9999 !important;
    padding: 15px 20px;
    background-color: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
    border-top-left-radius: 8px;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Ukryj sticky przycisk DOD gdy modal jest otwarty - zapobiega zasłanianiu przycisków w modalu */
body.modal-open .updatedods-sticky-save {
    display: none !important;
}

.updatedods-sticky-save .btn {
    min-width: 200px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

@media (max-width: 767px) {
    .updatedods-sticky-save {
        left: 0 !important;
        right: 0 !important;
        padding: 10px 15px;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }
    
    .updatedods-sticky-save .btn {
        width: 100%;
        min-width: auto;
    }
}

/* ==========================================================================
   Sale form "Opcje" dropdown buttons
   ========================================================================== */
.sale-options-dropdown > li > a {
    cursor: pointer;
}
.input-group > div[ng-show] {
    display: table-cell;
    width: 100%;
    vertical-align: top;
}
/* ==========================================================================
   Options list (.vet-opt-*): one full-width row-card per option. Rows are
   independent, so any combination of role/clinic gates can hide any subset
   without breaking the layout (no orphan half-columns, no unequal panel
   heights). Used by the add/edit employee options (vet_weter_option) and the
   account settings "Uprawnienia" tab.
   ========================================================================== */
.vet-opt-section-title {
    margin: 22px 0 8px 0;
    color: #337ab7;
    font-size: 16px;
    font-weight: bold;
    /* independent of ancestors that center text (vetdetails page) */
    text-align: left;
}
.vet-opt-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    padding: 10px 14px;
    margin-bottom: 8px;
    border: 1px solid #e3e3e3;
    border-radius: 6px;
    background: #fff;
    text-align: left;
}
.vet-opt-main {
    flex: 1 1 320px;
    min-width: 240px;
}
.vet-opt-title {
    font-weight: bold;
    margin: 0;
}
.vet-opt-icon {
    color: #337ab7;
    width: 20px;
    text-align: center;
    margin-right: 6px;
}
.vet-opt-desc {
    margin: 2px 0 0 26px;
    font-size: 12.5px;
    color: #777;
}
.vet-opt-control {
    flex: 0 0 250px;
}
.vet-opt-control .btn-group {
    display: flex;
    width: 100%;
}
.vet-opt-control .btn-group .btn {
    flex: 1 1 50%;
}
/* Full-width area under the row: errors, hints and sub-configuration. */
.vet-opt-extra {
    flex-basis: 100%;
    min-width: 100%;
}
.vet-opt-extra .alert {
    margin-bottom: 8px;
}
.vet-opt-extra .alert:last-child {
    margin-bottom: 0;
}
@media (max-width: 767px) {
    .vet-opt-control {
        flex: 1 1 100%;
    }
}

.input-group > .input-group-btn > .btn,
.input-group > .input-group-btn > .btn-group > .btn {
    height: 34px;
}
.input-group-sm > .input-group-btn > .btn,
.input-group-sm > .input-group-btn > .btn-group > .btn {
    height: 30px;
}
/* The 34px normalization above beats Bootstrap's own .input-group-lg sizing (equal
   specificity, later sheet), so the -lg variant must be restated here. */
.input-group-lg > .input-group-btn > .btn,
.input-group-lg > .input-group-btn > .btn-group > .btn {
    height: 46px;
}

/* On a phone .form-control is bumped to 44px for touch, but the addon (unit of measure) and
   the trailing button (e.g. "Max" on the WZ quantity field) kept the desktop 34px and rendered
   visibly shorter than the input. Keep the whole input-group on one height. */
@media (max-width: 767px) {
    .input-group:not(.input-group-sm):not(.input-group-lg) > .input-group-addon,
    .input-group:not(.input-group-sm):not(.input-group-lg) > .input-group-btn > .btn,
    .input-group:not(.input-group-sm):not(.input-group-lg) > .input-group-btn > .btn-group > .btn {
        height: 44px;
        font-size: 16px;
    }
    .input-group:not(.input-group-sm):not(.input-group-lg) > .input-group-addon {
        padding: 10px 12px;
    }
}
@media (max-width: 767px) {
    .sale-options-dropdown > li > a {
        padding: 12px 20px !important;
        font-size: 16px !important;
    }
}

/* Reports */
/* Jeden kafelkowy grid na CALY ekran raportow zamiast recznych wierszy po 3: kafle ukryte
   uprawnieniami (.ng-hide) po prostu wypadaja, a reszta domyka wiersze. Przy wierszach
   „po trzy" gabinet bez modulu finansow widzial uklad 3 / 2 / 1. */
.report-tiles {
    display: flex;
    flex-wrap: wrap;
}
.report-tiles > .report-tiles-item {
    display: flex;
    float: none; /* kolumny Bootstrapa sa float:left - we flexie psuloby to kolejnosc zawijania */
    margin-bottom: 0;
}
.report-tiles > .report-tiles-item > a.report-tile {
    display: flex;
    width: 100%;
}
.report-tiles > .report-tiles-item > a.report-tile > .panel {
    flex: 1;
}

a.report-tile {
    text-decoration: none;
    color: inherit;
}
a.report-tile:hover {
    text-decoration: none;
    color: inherit;
}
a.report-tile .panel {
    transition: box-shadow 0.2s;
    cursor: pointer;
}
a.report-tile:hover .panel {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* ===== STRONA REJESTRACJI - MODERNIZACJA ===== */

.register-hero-title {
    color: white;
    font-size: 42px;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-bottom: 5px;
    text-align: center;
}

.register-hero-subtitle {
    color: white;
    font-size: 24px;
    font-weight: 400;
    text-align: center;
    margin-bottom: 30px;
    opacity: 0.92;
}

.register-step-title {
    color: white;
    font-size: 36px;
    text-align: center;
    margin-bottom: 25px;
}

.register-card {
    border: 3px solid #537fbe;
    cursor: pointer;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    background: white;
    padding: 10px;
    height: 100%;
}

.register-card:hover {
    transform: scale(1.03);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.18);
    border-color: #3c763d;
    background: #f0faf0;
}

.register-card .caption h3 {
    font-size: 22px;
    color: #537fbe;
    margin-bottom: 12px;
}

.register-card .caption ul li {
    font-size: 14px;
    margin-bottom: 4px;
}

.register-card-icon {
    font-size: 48px;
    color: #537fbe;
    margin-bottom: 10px;
    display: block;
    text-align: center;
}

.register-card-feature {
    color: #537fbe;
    font-weight: bold;
}

.register-form-panel {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
    border: 1px solid #ddd;
    padding: 30px 20px;
    max-width: 680px;
    margin: 0 auto;
    position: relative;
}

.register-form-panel .form-group {
    margin-bottom: 18px;
}

.register-type-label {
    color: white;
    text-align: center;
    font-size: 22px;
    margin-bottom: 20px;
}

.register-promo-box {
    border: 2px solid rgba(255, 255, 255, 0.7);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.1);
    padding: 25px 30px;
    text-align: center;
    max-width: 680px;
    margin: 30px auto 0;
    color: white;
}

.register-promo-box .promo-days {
    font-size: 72px;
    font-weight: 700;
    line-height: 1;
    display: block;
}

.register-promo-box .promo-label {
    font-size: 36px;
    font-weight: 700;
    display: block;
    margin-bottom: 5px;
}

.register-promo-box .promo-note {
    font-size: 20px;
    opacity: 0.9;
}

.register-promo-box .promo-link {
    display: block;
    margin-top: 10px;
    font-size: 15px;
    opacity: 0.85;
}

.register-promo-box .promo-link a {
    color: white;
    text-decoration: underline;
}

.register-btn-submit {
    background: linear-gradient(135deg, #337ab7, #2e6da4);
    border: none;
    border-radius: 8px;
    color: white;
    font-size: 18px;
    padding: 12px 35px;
    transition: background 0.2s ease, transform 0.15s ease;
    float: right;
}

.register-btn-submit:hover {
    background: linear-gradient(135deg, #2e6da4, #265a8c);
    transform: translateY(-1px);
    color: white;
}

.register-btn-back {
    border-radius: 8px;
    padding: 10px 25px;
    font-size: 15px;
}

.register-form-actions {
    margin-top: 20px;
    overflow: hidden;
}

/* Login form - desktop: centered, mobile: near top */
.login-form-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - 120px);
    padding: 20px 0;
}

/* Register page container */
.register-page-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 40px 20px;
}

@media (max-width: 767px) {
    .login-form-container {
        align-items: flex-start;
        min-height: auto;
        padding: 15px 0;
    }
    .register-page-container {
        padding: 15px 10px;
    }
    .register-hero-title {
        font-size: 30px;
    }
    .register-hero-subtitle {
        font-size: 18px;
    }
    .register-step-title {
        font-size: 26px;
    }
    .register-form-panel {
        margin: 0 10px;
        padding: 20px 15px;
    }
    .register-card {
        padding: 15px;
    }
    .register-card .caption h3 {
        font-size: 18px;
    }
    .register-promo-box {
        margin: 20px 10px 0;
    }
    .register-promo-box .promo-days {
        font-size: 52px;
    }
    .register-promo-box .promo-label {
        font-size: 26px;
    }
}

/* ==========================================================================
   Section-level loading overlays for treatment card form
   ========================================================================== */
.section-loading-container {
    position: relative;
    z-index: 0;
}
.section-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.7);
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}
.section-loading-overlay .fa-spin,
.fa-cog.fa-spin {
    color: #537fbe;
}
/* Paged-listing reloads (clients/animals/drugs/book): the table can be far
   taller than the viewport, so the centered overlay spinner above ends up below
   the fold and the table just looks greyed-out with no loading icon. For lists,
   pin the spinner to the TOP of the table area (right under the pager, where the
   reload was triggered) and make the backdrop more opaque so the table reads as
   replaced by the icon. Filters and the pager sit OUTSIDE this overlay, so they
   stay put and visible. (No sticky: it would collide with the app's fixed top
   action toolbar when a tall table is scrolled.) */
.section-loading-overlay--list {
    align-items: flex-start;
    background: rgba(255, 255, 255, 0.9);
}
.section-loading-overlay--list .fa-spin {
    margin-top: 28px;
}
/* A reloading listing must reserve room for the overlay even when the table under it is
   hidden (first entry, or a filter that matched nothing). Without a height the container
   collapses to 0 px, the absolutely positioned overlay collapses with it, and the spinner
   ends up floating outside any backdrop. */
.section-loading-container.is-loading {
    min-height: 120px;
}

/* Full-page loading screen for initial form data loading (e.g. from WZ-tki) */
.form-init-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    color: #537fbe;
}
.form-init-loading p {
    margin-top: 15px;
    font-size: 16px;
    color: #666;
}

/* Vaccination toggle button */
.vacc-toggle {
    display: inline-block;
    padding: 6px 14px;
    border: 2px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    font-weight: normal;
    color: #666;
    background-color: #f9f9f9;
    transition: all 0.2s;
    user-select: none;
}
.vacc-toggle:hover {
    border-color: #537fbe;
    color: #537fbe;
}
.vacc-toggle-active {
    border-color: #28a745;
    color: #28a745;
    background-color: #e8f5e9;
}
.vacc-toggle-active:hover {
    border-color: #1e7e34;
    color: #1e7e34;
}

/* Promotional price toggle — same structure as vacc-toggle but warning-orange semantics */
.promo-toggle {
    display: inline-block;
    padding: 6px 14px;
    border: 2px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    font-weight: normal;
    color: #666;
    background-color: #f9f9f9;
    transition: all 0.2s;
    user-select: none;
    white-space: nowrap;
}
.promo-toggle:hover {
    border-color: #ec971f;
    color: #ec971f;
}
.promo-toggle-active {
    border-color: #f0ad4e;
    color: #8a6d3b;
    background-color: #fcf8e3;
}
.promo-toggle-active:hover {
    border-color: #ec971f;
    color: #8a6d3b;
}

/* Modern, rich tooltip — apply via `tooltip-class="weter-tooltip-rich"` on uib-tooltip */
.tooltip.weter-tooltip-rich {
    opacity: 1 !important;
}
.tooltip.weter-tooltip-rich .tooltip-inner {
    max-width: 360px;
    padding: 12px 16px;
    font-size: 14px;
    line-height: 1.55;
    text-align: left;
    background-color: #2b3444;
    color: #f5f7fa;
    border-radius: 8px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28), 0 2px 6px rgba(0, 0, 0, 0.18);
    letter-spacing: 0.1px;
    white-space: pre-line;
}
.tooltip.weter-tooltip-rich.top .tooltip-arrow { border-top-color: #2b3444; }
.tooltip.weter-tooltip-rich.bottom .tooltip-arrow { border-bottom-color: #2b3444; }
.tooltip.weter-tooltip-rich.left .tooltip-arrow { border-left-color: #2b3444; }
.tooltip.weter-tooltip-rich.right .tooltip-arrow { border-right-color: #2b3444; }

/* Treatment-card listing — "Zwierzęta" cell shows the first few animals; the full list
   appears in the weter-tooltip-rich hover tooltip when a card has more than 3 animals. */
.book-animals-more {
    display: inline-block;
    margin-left: 3px;
    padding: 0 7px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    color: #2b3444;
    background: #e7eaf0;
    border-radius: 10px;
    white-space: nowrap;
    cursor: help;
}

/* Animal card frames on treatment card form */
.animal-card {
    border: 1px solid #5bc0de;
    border-radius: 6px;
    padding: 10px 12px 8px;
    margin-bottom: 8px;
    background: #f9fbfd;
    position: relative;
}
.animal-card-first {
    margin-top: 10px;
}
.animal-card-single {
    border-color: #5bc0de;
    background: #fcfdfe;
}
.animal-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}
.animal-card-label {
    font-size: 12px;
    font-weight: 600;
    color: #6c8ea4;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.animal-card-label .fa-paw {
    margin-right: 3px;
}
.animal-card-remove {
    background: none;
    border: none;
    color: #b0b8c0;
    font-size: 16px;
    padding: 0 4px;
    cursor: pointer;
    line-height: 1;
    transition: color 0.15s;
}
.animal-card-remove:hover {
    color: #d9534f;
}

/* Inline info shown when dosage or purchase notes differ from drug dictionary defaults */
.drug-field-change-info {
    font-size: 12px;
    color: #6c757d;
    margin-top: 4px;
    line-height: 1.4;
}
.drug-field-change-info .fa-info-circle {
    color: #5bc0de;
    margin-right: 3px;
}
.drug-field-change-info a {
    color: #337ab7;
    text-decoration: underline;
    cursor: pointer;
}
.drug-field-change-info a:hover {
    color: #23527c;
}

/* Datepicker popup z-index fix */
[uib-datepicker-popup-wrap] {
    z-index: 1050;
}

/* Highlighted task from email link */
.occ-highlighted {
    box-shadow: 0 0 0 3px #337ab7, 0 0 12px rgba(51, 122, 183, 0.4) !important;
    animation: occ-highlight-pulse 2s ease-in-out 3;
}

@keyframes occ-highlight-pulse {
    0%, 100% { box-shadow: 0 0 0 3px #337ab7, 0 0 12px rgba(51, 122, 183, 0.4); }
    50% { box-shadow: 0 0 0 5px #337ab7, 0 0 20px rgba(51, 122, 183, 0.6); }
}

/* Calendar type toggle buttons */
.cal-type-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border: 2px solid #ccc;
    border-radius: 6px;
    background: #fff;
    color: #888;
    cursor: pointer;
    transition: all 0.15s ease;
    font-weight: normal;
    user-select: none;
}
.cal-type-toggle:hover {
    border-color: #999;
    color: #555;
}
.cal-type-toggle--active {
    border-color: #5cb85c;
    background: #f0fff0;
    color: #3c763d;
}
.cal-type-toggle--active:hover {
    border-color: #449d44;
}

/* Neutral gray button (btn-default base) for destructive actions.
   Looks like a regular button; the red trash icon carries the danger signal. */
.btn-dispose .fa-trash {
    color: #c9302c;
}
.btn-dispose:hover,
.btn-dispose:focus,
.btn-dispose:active,
.btn-dispose.active {
    color: #ffffff;
    background-color: #c9302c;
    border-color: #ac2925;
}
.btn-dispose:hover .fa-trash,
.btn-dispose:focus .fa-trash,
.btn-dispose:active .fa-trash,
.btn-dispose.active .fa-trash {
    color: #ffffff;
}

/* ── Mobile task list: collapsible filters ──────────────────────────────
   On phones the time-range buttons + search/team/priority filters eat most
   of the screen. Collapse them behind a toggle (default hidden) so the task
   list itself is easy to browse. Desktop (>=768px) is unaffected: the toggle
   is hidden and the filters are always shown. */
.occ-filters-toggle {
    display: none;
}
@media (max-width: 767px) {
    .occ-filters-toggle {
        display: block;
    }
    .occ-filters-collapse {
        display: none;
    }
    .occ-filters-collapse.occ-filters-open {
        display: block;
    }
}

/* Pasek zakresów na liście zadań. Wcześniej każdy zakres siedział w osobnej kolumnie siatki
   (col-md-2), więc przy dziewięciu zakresach łamały się 6+3 z dziurą na końcu wiersza, a każdy
   miał inny kolor. Flex + wrap układa je w zwartą wstęgę: kafelki rosną do treści, a nie do
   szerokości kolumny, i same przechodzą do kolejnej linii. */
.occ-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}

.occ-filter-bar .btn {
    flex: 1 1 auto;
    font-weight: bold;
    white-space: nowrap;
}

/* Zakresy czasu mają wspólną szerokość minimalną, żeby wstęga czytała się jak oś czasu,
   a nie jak przypadkowe klocki. */
.occ-filter-btn {
    min-width: 120px;
}

/* Wizualne odcięcie widoków, które NIE są oknem czasowym („wszystkie", „zakończone”). Zwykły
   odstęp, nie `margin-left:auto` — kafelki mają flex-grow, więc wolnego miejsca do wypchnięcia
   i tak nigdy nie ma, a przerwa czytelnie kończy oś czasu. */
.occ-filter-btn--sep {
    margin-left: 18px;
}

.occ-filter-count {
    margin-left: 6px;
}

/* Pasek przełączników pod zakresami — mniejsze przyciski, nierozciągane na całą szerokość. */
.occ-filter-bar--tools .btn {
    flex: 0 0 auto;
}

/* Akcje („Wyczyść filtry", „Zaawansowane") odsunięte na prawy koniec paska. Działa, bo przyciski
   w tym pasku NIE rosną (flex: 0 0 auto), więc jest wolne miejsce do wypchnięcia. Przy zawinięciu
   na wąskim ekranie margines znika sam — auto liczy się od pozostałej przestrzeni w linii. */
.occ-filter-tools-right {
    margin-left: auto;
}

.occ-filters-row {
    margin-bottom: 6px;
}

/* Pasek zaznaczania nad listą zadań — ten sam układ co `.occ-filter-bar`: odstępy z `gap`,
   a nie z marginesów doklejanych osobno do każdego elementu. */
.occ-select-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}

/* Zaznaczanie wiersza na liscie zadan: wlasna kolumna po lewej stronie wiersza, klikalna na
   calej wysokosci i wysrodkowana w pionie. Samo pole jest powiekszone (`transform: scale`
   dziala na natywnym checkboksie w kazdej przegladarce, w odroznieniu od `width/height`,
   ktore w starszych silnikach tylko rozciagaly ramke). Wypelnienie z lewej strony wiersza
   musi byc `!important`, bo `.panel-body` niesie `padding` w stylu INLINE. */
.occ-row-check {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    cursor: pointer;
}

.occ-row-body--selectable {
    padding-left: 36px !important;
}

.occ-row-checkbox {
    width: 18px;
    height: 18px;
    margin: 0;
    transform: scale(1.25);
    cursor: pointer;
}

/* Linia z numerem oborowym i wiekiem pod nazwą zwierzęcia w modalu wyboru ze stada —
   wcięcie równa ją do tekstu obok checkboxa w wierszu wyżej. */
.herd-animal-select-meta {
    margin-left: 22px;
}

/* Plakietka „Stado: …" na pozycji karty leczenia (tryb edycji). Stado wybiera się w modalu
   wyboru zwierząt, więc to jedyne miejsce, w którym widać, że karta go dotyczy — a od tego
   zależy historia leczenia stada. Kolory jak alert-info, bez ramki alertu (to nie ostrzeżenie). */
.record-herd-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #d9edf7;
    color: #31708f;
    border-radius: 4px;
    padding: 6px 10px;
    margin-bottom: 8px;
}

.record-herd-badge > span {
    flex: 1;
}

/* „z wybranych zwierząt" — skąd wzięło się przypisanie stada. Drobne i wyciszone: to metadana,
   nie treść karty. */
.record-herd-badge__source {
    font-size: 12px;
    opacity: 0.75;
}

.record-herd-badge__detach {
    border: none;
    background: transparent;
    color: #31708f;
    padding: 0 4px;
    line-height: 1;
}

/* Numer stada w gabinecie — krotki identyfikator obok nazwy, ta sama forma na kazdym
   listingu (stada, wybor na karcie, historia stada), zeby dalo sie go szukac wzrokiem. */
.herd-no-badge {
    display: inline-block;
    min-width: 34px;
    padding: 0 6px;
    margin-right: 4px;
    border-radius: 10px;
    background-color: #eef1f4;
    color: #4b5a68;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
}

.item-selected .herd-no-badge {
    background-color: rgba(255, 255, 255, 0.85);
    color: #31708f;
}

.record-herd-badge__detach:hover,
.record-herd-badge__detach:focus {
    color: #a94442;
}

/* „Cała karta na stado" w modalu wyboru zwierząt, wariant dla stada BEZ zwierząt z kartoteką.
   Wtedy to nie jest jedna z pozycji listy, tylko JEDYNY możliwy wybór — więc zamiast wąskiego
   wiersza dostaje wyśrodkowany panel na całą szerokość. Kolory tła/tekstu niosą klasy
   .item-selected / .item-not-selected, te same co wiersze zwierząt. */
.whole-herd-panel {
    text-align: center;
    padding: 28px 20px;
    cursor: pointer;
}

.whole-herd-panel__title {
    font-size: 18px;
    font-weight: bold;
    margin-top: 10px;
}

.whole-herd-panel__meta {
    margin-top: 6px;
}

.whole-herd-panel__action {
    margin-top: 14px;
    font-weight: bold;
}


/* ============================================================
   Onboarding modal (module visibility tiles shown after login)
   ============================================================ */
.onboarding-header .modal-title {
    font-weight: 600;
}

.onboarding-header .modal-title .fa {
    margin-right: 8px;
    color: #28a745;
}

.onboarding-intro {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 18px auto;
}

.onboarding-intro-lead {
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 6px;
}

.onboarding-intro-sub {
    font-size: 13px;
    color: #777;
    margin-bottom: 0;
}

.onboarding-intro-sub .fa {
    color: #28a745;
    margin-right: 4px;
}

.onboarding-tiles {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
    align-items: stretch;
}

.onboarding-tile {
    flex: 1 1 235px;
    max-width: 260px;
    border: 2px solid #ddd;
    border-radius: 12px;
    padding: 18px 14px 14px 14px;
    text-align: center;
    cursor: pointer;
    background: #fff;
    position: relative;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    -webkit-user-select: none;
    user-select: none;
}

.onboarding-tile:hover {
    border-color: #9fd7ac;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
}

.onboarding-tile-on {
    border-color: #28a745;
    background: #f2fbf4;
}

.onboarding-tile-on:hover {
    border-color: #28a745;
}

.onboarding-tile-disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.onboarding-tile-disabled:hover {
    border-color: #ddd;
    box-shadow: none;
}

.onboarding-tile-icon {
    font-size: 34px;
    color: #888;
    margin-bottom: 10px;
    transition: color 0.15s ease;
}

.onboarding-tile-on .onboarding-tile-icon {
    color: #28a745;
}

.onboarding-tile-title {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 8px;
}

.onboarding-tile-desc {
    font-size: 12.5px;
    color: #666;
    line-height: 1.45;
    min-height: 72px;
}

.onboarding-switch-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
}

.onboarding-switch {
    display: inline-block;
    width: 46px;
    height: 24px;
    border-radius: 12px;
    background: #ccc;
    position: relative;
    flex-shrink: 0;
    transition: background 0.15s ease;
}

.onboarding-switch-on {
    background: #28a745;
}

.onboarding-switch-knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    transition: left 0.15s ease;
}

.onboarding-switch-on .onboarding-switch-knob {
    left: 24px;
}

.onboarding-state {
    font-size: 13px;
    font-weight: 600;
}

.onboarding-state-on {
    color: #28a745;
}

.onboarding-state-off {
    color: #999;
}

.onboarding-saved {
    font-size: 12px;
    color: #28a745;
    font-weight: 600;
    white-space: nowrap;
}

.onboarding-unavailable {
    margin-top: 8px;
    font-size: 12px;
    color: #a94442;
}

.onboarding-footer {
    text-align: right;
}

@media (max-width: 767px) {
    .onboarding-tile {
        flex-basis: 100%;
        max-width: none;
    }

    .onboarding-tile-desc {
        min-height: 0;
    }
}


/* Role shown under an author name on listings (WZ-tki) - plain muted text.
   Own colour declaration so it is not repainted by the inline colours the listing
   rows set on their cells. */
.role-note {
    font-size: 12px;
    color: #777777 !important;
}

/* WZ-tka split into positions. The box only appears in positions mode - a classic
   single-position issue renders the drug list bare, exactly as before the feature. */
.egi-position-box {
    border-left: 3px solid #337ab7;
    padding-left: 15px;
    margin-bottom: 20px;
}

.egi-position-box:nth-child(even) {
    border-left-color: #5cb85c;
}

/* The WZ-tka page sits inside an align="center" wrapper, which centres every inline
   element - labels would float above the middle of their field and .input-group
   (inline-table in this app) would shrink away from its column. The position header is
   an ordinary form, so it opts out; the drug rows below keep the page's historical look. */
.egi-position-header {
    margin: 8px 0 10px 0;
    text-align: left;
}

.egi-position-header label {
    margin-bottom: 2px;
}

/* .input-group is floated + inline-table here, so it needs an explicit full width to
   fill its grid column instead of shrinking to its content. */
.egi-position-header .input-group {
    display: flex;
    width: 100%;
    float: none;
    margin-left: 0;
}

.egi-position-header .input-group .form-control {
    flex: 1;
    min-width: 0;
}

.egi-position-header .input-group .input-group-btn {
    flex: 0 0 auto;
    width: max-content;
}

/* Reserves a button's slot while it is not applicable, so the field next to it keeps its
   final width from the start instead of shrinking the moment a value is picked.
   Used on the clear buttons of the WZ-tka form (recipient, diagnosis). */
.btn-hidden-slot {
    visibility: hidden;
}

/* Drug-state screen on phones: both filter blocks (the form at the top and the result filters
   above the table) start collapsed and open only through their "Pokaż filtry" toggle. Desktop
   never sees these rules, so the filters stay permanently visible there. */
@media (max-width: 767px) {
    .drug-state-filters,
    .drug-state-result-filters {
        display: none;
    }

    .drug-state-filters.is-open,
    .drug-state-result-filters.is-open {
        display: block;
    }

    /* Compact controls: the mobile stylesheet sizes every input for a primary form (44px),
       which is too tall for a stack of filters. font-size STAYS at 16px on purpose - iOS
       Safari zooms the page when focusing an input smaller than that. */
    .drug-state-filters .form-control,
    .drug-state-result-filters .form-control {
        height: 38px;
        padding: 4px 8px;
        font-size: 16px;
    }

    .drug-state-filters label,
    .drug-state-result-filters label {
        font-size: 13px;
        margin-bottom: 2px;
    }

    .drug-state-filters .form-group,
    .drug-state-result-filters .form-group {
        margin-bottom: 8px;
    }

    .drug-state-filters .input-group,
    .drug-state-result-filters .input-group {
        margin-bottom: 0;
    }

    /* "Rozwiń szczegóły partii" / "Historia leku" sit inside a listing cell, under the drug
       name - the global 44px touch-target rule for .btn blew them up into two banners. They
       stay btn-xs sized here (~28px), which is still a comfortable tap on a row control. */
    .drug-state-group-details-btn,
    .drug-state-group-history-btn {
        min-height: 0;
        padding: 4px 8px;
        font-size: 12px;
        border-radius: 4px;
        margin-bottom: 4px;
    }
}

/* "Moje dane" permission statuses (niezależna książka / magazyn, magazynier, kalendarz
   online) as one row of compact tiles instead of a stack of full-width alerts. Spacing
   comes from the tiles' own margin, not row-gap, so a strip whose every tile is ng-hidden
   collapses to zero height instead of leaving a gap above the form. */
.status-tiles {
    display: flex;
    flex-wrap: wrap;
    column-gap: 10px;
}

.status-tile {
    flex: 1 1 200px;
    min-width: 0;
    margin-bottom: 12px;
    padding: 10px 12px;
    display: flex;
    align-items: flex-start;
    text-align: left;
    background-color: #f4f8fc;
    border: 1px solid #d9e2ec;
    border-left: 4px solid #537fbe;
    border-radius: 4px;
}

.status-tile-icon {
    flex: 0 0 auto;
    margin-right: 10px;
    font-size: 20px;
    line-height: 1.3;
    color: #537fbe;
}

.status-tile-body {
    min-width: 0;
    word-wrap: break-word;
}

.status-tile-body strong {
    display: block;
    font-size: 13px;
    line-height: 1.3;
}

.status-tile-hint {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    line-height: 1.4;
    color: #666666;
}

/* "Nie posiadasz…" / "Chcesz mieć…" is information, not a fault - muted, never alarming. */
.status-tile-off {
    background-color: #f7f7f7;
    border-left-color: #b0b8c1;
}

.status-tile-off .status-tile-icon {
    color: #99a1aa;
}

/* Opcje w wierszu stada. Wczesniej byl tu .row/.col-md-12 wewnatrz <td> — ujemne
   marginesy .row wypychaly przyciski poza komorke, a tabela rozpychala ekran
   (641 px przy viewporcie 390 px). Kolumna dostaje sensowna szerokosc minimalna,
   zeby dlugie etykiety nie lamaly sie po jednej literze. */
.herd-row-options {
    min-width: 170px;
}

.herd-row-options .btn-block + .btn-block {
    margin-top: 3px;
}

/* Filtr typu zwierzat w modalu wyboru zwierzat. Na desktopie etykieta stoi w linii
   z przyciskami; na waskim ekranie „Typ zwierzat:" + trzy przyciski sie nie miescily,
   wiec etykieta przechodzi nad nie, a przyciski dziela szerokosc po rowno. */
.animal-type-filter {
    flex: 0 1 auto;
    display: flex;
    align-items: center;
}

.animal-type-filter__label {
    margin-right: 8px;
    color: #777;
    white-space: nowrap;
}

@media (max-width: 767px) {
    .animal-type-filter {
        display: block;
        width: 100%;
    }

    .animal-type-filter__label {
        display: block;
        margin: 0 0 4px 0;
    }

    .animal-type-filter .btn-group {
        display: flex;
        width: 100%;
    }

    .animal-type-filter .btn-group > .btn {
        flex: 1 1 0;
    }
}

/* Akcje przy wierszu zwierzecia w modalu wyboru zwierzat. Style byly w atrybucie style=""
   i media query nie mialo ich jak nadpisac bez !important. */
.select-animals-row-actions {
    flex-shrink: 0;
    margin-left: 8px;
    white-space: nowrap;
}

@media (max-width: 767px) {
    /* Dwa przyciski obok siebie zjadaly szerokosc nazwie zwierzecia. W kolumnie kolumna
       akcji jest szeroka na najdluzsza etykiete zamiast na sume obu. */
    .select-animals-row-actions {
        margin-left: 6px;
        white-space: normal;
    }

    .select-animals-row-actions > .btn {
        display: block;
        width: 100%;
        padding: 2px 6px;
        font-size: 11px;
        text-align: left;
    }

    .select-animals-row-actions > .btn + .btn {
        margin-top: 3px;
    }
}

/* Ikonka kopiowania numeru w modalu ujednoznaczniania skanu. Cel dotykowy jest wiekszy
   niz sama ikonka, bo siedzi w klikalnym wierszu i musi byc trafialna palcem. */
.copy-number-btn {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 6px;
    cursor: pointer;
    color: #537fbe;
    border-radius: 3px;
}

.copy-number-btn:hover,
.copy-number-btn:focus {
    background-color: #edf1ff;
}

/* Kafle ostrzeżeń o ukrytych modułach (ustawienia → Formularze). Każde ostrzeżenie pojawia
   się niezależnie od drugiego, więc wiersz musi wyglądać dobrze i z jednym, i z dwoma:
   flex z `flex: 1 1 320px` daje pełną szerokość przy jednym kaflu i pół na pół przy dwóch,
   a poniżej ~700 px zawija je pod siebie. `.alert` ma własny margines dolny - zerujemy go,
   bo odstęp trzyma już `gap` wiersza. */
.module-notice-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 15px;
}
.module-notice-row > .module-notice {
    flex: 1 1 320px;
    min-width: 0;
    margin-bottom: 0;
}

/* Pasek kroków formularza (dyrektywa <form-steps>) - JEDNA linia pigułek zamiast napisu
   „krok 2 / 3 - ...". Ma pokazywać, gdzie jesteśmy, a nie zabierać ekranu: ~30 px wysokości,
   bez ramek i nagłówków. Na telefonie etykiety poza bieżącym krokiem znikają - zostają numery. */
.form-steps {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 2px 0 12px;
    padding: 0;
    list-style: none;
    font-size: 13px;
}
.form-steps__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 12px 3px 4px;
    border-radius: 999px;
    background-color: #f1f4fa;
    color: #6b7a90;
}
.form-steps__item.is-current {
    background-color: #dfe9f7;
    color: #1e3049;
    font-weight: 700;
}
.form-steps__no {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: 1px solid #cfd9ea;
    border-radius: 50%;
    background-color: #fff;
    font-size: 12px;
    font-weight: 700;
}
.form-steps__item.is-current .form-steps__no {
    border-color: #4168cf;
    background-color: #4168cf;
    color: #fff;
}
.form-steps__item.is-done .form-steps__no {
    border-color: #2f7a55;
    background-color: #2f7a55;
    color: #fff;
}
@media (max-width: 767px) {
    .form-steps__item:not(.is-current) .form-steps__label {
        display: none;
    }
    .form-steps__item {
        padding-right: 4px;
    }
}

/* Wiersz filtrów listingów kart (książka leczenia, konsultacje, sprzedaż).
   Siatka Bootstrapa wymagała, żeby szerokości kolumn ZGADZAŁY SIĘ z liczbą widocznych pól -
   a ta zależy od rodzaju książki i roli (sprzedaż nie ma zwierzęcia, konsultacje rozpoznania,
   filtr książki lekarza bywa ukryty). Efekt: dziury w wierszu i pola spadające do drugiej linii.
   Flex układa tylko to, co widoczne: pola dzielą wiersz po równo, a przy braku miejsca zawijają
   się same. `min-width: 0` jest konieczne, żeby pole mogło zwęzić się poniżej swojej treści. */
.book-filters-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0 12px;
}
.book-filters-row > .book-filters-field {
    flex: 1 1 170px;
    min-width: 0;
}
/* Nazwa właściciela i zwierzęcia potrzebują więcej miejsca niż numer czy data. */
.book-filters-row > .book-filters-field--wide {
    flex: 2 1 220px;
}

/* Para „wartość + ikonka kopiowania" jako JEDEN nierozdzielny kawałek.
   Sama spacja w kodzie to za mało: gdy numer wypełnia wąską kolumnę, ikonka i tak spada niżej.
   Dopiero nowrap zmusza tabelę, żeby oddała tej kolumnie kilka pikseli więcej.
   ⚠ Owijamy tym WYŁĄCZNIE krótkie, niełamliwe wartości (numery, serie, kody) - nazwa leku czy
   zwierzęcia łamie się sama i ikonka idzie za ostatnim słowem, a nowrap tylko rozpychałby kolumnę. */
.copy-pair {
    white-space: nowrap;
}

/* <copy-btn> directive. Same look as .copy-number-btn, but the directive renders a real <button>,
   so the Bootstrap link-button padding has to be reset to keep listing rows compact. */
.copy-btn {
    margin-left: 6px;
    padding: 0 4px;
    color: #537fbe;
    border-radius: 3px;
    vertical-align: baseline;
}

.copy-btn:hover,
.copy-btn:focus {
    background-color: #edf1ff;
    text-decoration: none;
}

/* Etykiety "SMS dzień przed / w dniu zadania" na listingu zadań i planowanych szczepień.
   NIE opierają się na bootstrapowym .label: w tym arkuszu .label jest okrojony do
   `border:1px solid #000`, bez `color:#fff`, więc tekst dziedziczył kolor z wiersza
   (row-100days itp.) i wychodził jasny na jasnym tle .label-info. Kolor jest tu ustawiony
   wprost — ciemny tekst na jasnym tle, czytelny niezależnie od klasy wiersza. */
.sms-plan-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 3px;
    border: 1px solid transparent;
    font-size: 12px;
    font-weight: bold;
    line-height: 1.5;
    /* nowrap trzyma pojedynczą etykietę w całości; sąsiadujące etykiety i tak zawijają się
       między sobą, bo są inline-block. Marginesy dają odstęp zarówno w jednej linii, jak
       i po zawinięciu do następnej — dlatego bottom, nie tylko right. */
    white-space: nowrap;
    margin: 0 5px 4px 0;
}

.sms-plan-badge--info {
    background-color: #d9edf7;
    border-color: #31708f;
    color: #245269;
}

.sms-plan-badge--danger {
    background-color: #f2dede;
    border-color: #a94442;
    color: #843534;
}

.sms-plan-badge--muted {
    background-color: #eeeeee;
    border-color: #999999;
    color: #444444;
}

/* Podpowiedź "dopasowano po fragmencie numeru". Celowo dyskretna — zwierzę JEST właściwe,
   kartoteka ma tylko krótszy numer niż zeskanowany kolczyk, więc to nie jest błąd. */
.partial-match-hint {
    display: inline-block;
    margin-left: 4px;
    font-size: 12px;
    color: #8a6d3b;
    white-space: nowrap;
}

/* Komplet numerów pod pozycją na liście wybranych zwierząt. Drugorzędne wobec nazwy, więc
   mniejsze i wyszarzone; poszczególne numery zawijają się razem, gdy kolumna jest wąska. */
.animal-identifiers-line {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    color: #666666;
}

.animal-identifiers-line > span {
    display: inline-block;
    margin-right: 12px;
    white-space: nowrap;
}

.animal-identifiers-label {
    color: #999999;
}

/* „Usuń" w rozwijanym menu ma byc czerwone takze po najechaniu — Bootstrap nadpisuje
   kolor na .dropdown-menu > li > a:hover, a globalne `a:link/:visited/:hover {color:#000}`
   bije samo `.text-danger`, wiec potrzebny jest selektor o wyzszej specyficznosci.
   Regula obejmuje KAZDE rozwijane menu, nie tylko .options-menu (listingi WZ-tek/MM),
   zeby akcja usuwania wygladala tak samo wszedzie. */
.options-menu > li > a.text-danger,
.options-menu > li > a.text-danger:hover,
.options-menu > li > a.text-danger:focus,
.dropdown-menu > li > a.text-danger,
.dropdown-menu > li > a.text-danger:link,
.dropdown-menu > li > a.text-danger:visited,
.dropdown-menu > li > a.text-danger:hover,
.dropdown-menu > li > a.text-danger:focus {
    color: #a94442;
}

.options-menu > li > a.text-danger:hover,
.options-menu > li > a.text-danger:focus,
.dropdown-menu > li > a.text-danger:hover,
.dropdown-menu > li > a.text-danger:focus {
    background-color: #f2dede;
}

/* Klikniecie ikonki kopiowania nie ma zaznaczac tekstu wiersza. */
.copy-number-btn {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Modal wyboru zwierzat na mobile ma zajmowac PELNA szerokosc ekranu — przy 90% plus
   domyslnych marginesach .modal-dialog na waskim telefonie tracilo sie kilkanascie
   procent szerokosci, a to najciasniejszy ekran w calym przeplywie karty. */
@media (max-width: 767px) {
    .select-animals-modal-fullscreen .modal-dialog {
        width: 100%;
        /* Na .modal-dialog wisi max-width: calc(100% - 20px), ktore przycinalo szerokosc
           do 370 px przy ekranie 390 px — samo width: 100% nie wystarczy. */
        max-width: none;
        margin: 0;
    }

    .select-animals-modal-fullscreen .modal-content {
        border-left: 0;
        border-right: 0;
        border-radius: 0;
    }
}

/* „Konfiguracja formularza": na mobile sam tekst zjada szerokosc naglowka, wiec zostaje
   sama ikonka — odrobine wieksza, zeby pozostala wygodnym celem dotykowym. Na desktopie
   bez zmian (etykieta w <span class="hidden-xs">). */
@media (max-width: 767px) {
    .form-config-icon {
        font-size: 20px;
        vertical-align: middle;
        padding: 4px;
    }
}

/* Zafiksowany pasek akcji przykrywa dol panelu skanowania: ma 82 px z jednym wierszem
   przyciskow i 152 px, gdy dochodzi „Wybierz zwierzeta z listy". Bez tego zapasu koncowka
   listy „Wybrane zwierzeta" chowala sie pod paskiem i nie dalo sie jej doscrollowac.
   Wartosc pokrywa wyzszy wariant plus margines. */
@media (max-width: 767px) {
    /* Zapas skaluje sie z wysokoscia ekranu, bo pasek rosnie razem z powiekszona czcionka
       systemowa — sztywne 170 px wystarczalo na testowych 390x780, ale nie na kazdym
       telefonie. env(safe-area-inset-bottom) dokłada miejsce na pasek systemowy iOS. */
    .qr-scan-panel {
        /* 1) fallback dla przegladarek bez calc/zmiennych */
        padding-bottom: 280px !important;
        /* 2) --sticky-bar-h ustawia dyrektywa stickyBarHeight z FAKTYCZNEJ wysokosci paska,
              wiec odstep dopasowuje sie do telefonu i do tego, ile paskow jest widocznych.
              max() zostawia sensowna wartosc, zanim dyrektywa zdazy zmierzyc. */
        padding-bottom: calc(max(var(--sticky-bar-h, 160px) + 120px, 34vh) + env(safe-area-inset-bottom, 0px)) !important;
    }
}

/* Pasek akcji ma siedziec NAD paskiem systemowym telefonu, nie pod nim. */
@media (max-width: 767px) {
    .sale-form-sticky-execute {
        padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    }
}

/* ============================================================================
   Paginacja na mobile — WSPOLNY wzorzec dla wszystkich listingow.
   uib-pagination siedzi w 35 szablonach, wiec upraszczamy globalnie w CSS,
   zamiast dopisywac atrybuty w kazdym z osobna.

   Na waskim ekranie pelna nawigacja („Pierwsza | Poprzednia | 1 2 3 … | Nastepna
   | Ostatnia") nie miesci sie w jednej linii i lamie sie na kilka wierszy.
   Zostawiamy: strzalka wstecz, biezaca strona z sasiadami, strzalka dalej.
   ============================================================================ */
@media (max-width: 767px) {
    .pagination {
        display: flex;
        flex-wrap: nowrap;
        justify-content: center;
        margin: 10px 0;
    }

    /* „Pierwsza"/„Ostatnia" znikaja — do konca listy i tak dojdzie strzalkami,
       a to dwa najrzadziej uzywane przyciski. */
    .pagination > li.pagination-first,
    .pagination > li.pagination-last {
        display: none;
    }

    /* Slowa „Poprzednia"/„Nastepna" zastapione strzalkami. font-size: 0 chowa
       tekst, a ikona wraca przez ::before z wlasnym rozmiarem. */
    .pagination > li.pagination-prev > a,
    .pagination > li.pagination-next > a {
        font-size: 0;
    }

    .pagination > li.pagination-prev > a::before,
    .pagination > li.pagination-next > a::before {
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        font-size: 15px;
    }

    .pagination > li.pagination-prev > a::before {
        content: "\f053";
    }

    .pagination > li.pagination-next > a::before {
        content: "\f054";
    }

    /* Tylko biezaca strona i jej bezposredni sasiedzi — reszta numerow znika.
       :has() daje sasiada Z LEWEJ (brak selektora „poprzednie rodzenstwo");
       gdzie go nie ma, zostaje strona biezaca i nastepna, co nadal wystarcza. */
    .pagination > li.pagination-page {
        display: none;
    }

    .pagination > li.pagination-page.active,
    .pagination > li.pagination-page.active + li.pagination-page {
        display: block;
    }

    .pagination > li.pagination-page:has(+ li.pagination-page.active) {
        display: block;
    }

    /* Cel dotykowy 44 px zamiast domyslnych ~30 px.
       Flex + STALA wysokosc, bo glif strzalki (::before, wlasne pudelko wiersza) robil
       sie o 5 px wyzszy niz cyfry i numery stron wygladaly na nizsze od strzalek. */
    .pagination > li > a,
    .pagination > li > span {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        height: 44px;
        padding: 0 8px;
        line-height: 1;
    }
}

/* Wybor liczby pozycji na stronie i przelacznik zaznaczania w JEDNEJ linii na mobile.
   btn-block wypychal przycisk do osobnego wiersza. Klasa jest osobna, bo samo
   .select-all jest wspoldzielone przez kilkanascie listingow. */
@media (max-width: 767px) {
    .select-all-inline-mobile {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    /* Select mial 22 px przy przycisku 49 px — w jednej linii wygladalo to na blad.
       Wyrownane do wysokosci przycisku; 16 px fontu, bo ponizej iOS zoomuje strone. */
    .select-all-inline-mobile > .form-select {
        flex: 0 0 auto;
        width: auto;
        height: 49px;
        font-size: 16px;
        padding: 0 8px;
    }

    .select-all-inline-mobile > .select-toggle-mobile {
        flex: 1 1 auto;
    }

    /* Bez zerowania marginesow select i przycisk mialy srodki przesuniete o 4 px
       mimo rownych wysokosci — w jednej linii bylo to widac. */
    .select-all-inline-mobile > .form-select,
    .select-all-inline-mobile > .select-toggle-mobile {
        margin: 0;
    }
}

/* Mobile: wybor liczby pozycji na stronie i przelacznik zaznaczania w JEDNEJ linii.
   Dotyczy kazdego listingu uzywajacego <select-all-toggle> — kontener .select-all jest
   wspolny, a linki „Zaznacz/Odznacz wszystkie" maja tam hidden-xs, wiec nie zajmuja miejsca. */
@media (max-width: 767px) {
    .select-all {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .select-all > select,
    .select-all > .form-select {
        flex: 0 0 auto;
        width: auto;
        height: 49px;
        /* 16 px, bo ponizej iOS Safari zoomuje cala strone przy focusie */
        font-size: 16px;
        padding: 0 8px;
        margin: 0;
    }

    .select-all select-all-toggle {
        flex: 1 1 auto;
        min-width: 0;
    }

    .select-all select-all-toggle > .btn {
        width: 100%;
        margin: 0;
    }
}


/* Pasek akcji skanowania szczepien tylko na mobile. Samo hidden-md/hidden-lg nie wystarcza:
   .sale-form-sticky-execute ma display: block !important, a przy rownej specyficznosci
   (jedna klasa) decyduje kolejnosc plikow — style_20260915_1107_.css wczytuje sie PO bootstrapie,
   wiec wygrywalby z .hidden-lg. Wlasna regula w media query rozstrzyga to jednoznacznie. */
@media (min-width: 768px) {
    .vacc-scan-sticky,
    .draft-scan-sticky {
        display: none !important;
    }
}

@media (max-width: 767px) {
    /* Input w .input-group siedzi w opakowaniu .has-clear (table-cell z inline'owym
       vertical-align: middle). Na mobile wiersz robi sie wyzszy niz 44 px kontrolek,
       wiec to centrowanie opuszczalo input o 4 px wzgledem przyciskow +/notatki/koło
       zebate, ktore trzymaja sie gory wiersza. Na desktopie wiersz ma dokladnie
       wysokosc kontrolek i problemu nie ma. !important, bo nadpisujemy styl inline.
       Dotyczy 25 pol w 12 szablonach (wlasciciel na szczepieniu, karcie leczenia,
       obserwacji, lek w wierszu karty itd.). */
    .input-group > .has-clear {
        vertical-align: top !important;
    }
}

@media (max-width: 767px) {
    /* Panele traciły ~17% szerokosci ekranu. Zrodlo: .container-fluid jest na tych
       stronach ZAGNIEZDZONY dwukrotnie, a starsze reguly dawaly mu max-width: 80%
       (<=765px) / 99% (<=600px) plus bootstrapowe 15 px paddingu — kazdy poziom
       dokladal swoje, wiec przy oknie 390 px zostawalo 34 px pustki z kazdej strony
       i tekst w rodzaju „osoba prywatna" nie miescil sie w kolumnie.
       Zewnetrzny poziom zostawia waski oddech, wewnetrzny nie dokłada juz nic. */
    .container-fluid {
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
        padding-left: 8px;
        padding-right: 8px;
    }

    .container-fluid .container-fluid {
        padding-left: 0;
        padding-right: 0;
    }

    /* Bootstrapowa rynna -15 px nie ma juz czego kompensowac, skoro zagniezdzony
       kontener nie dokłada paddingu — bez tego wiersz wystawal 7 px poza ekran
       i CALA strona przewijala sie w bok. Zwezamy rynne do nowego paddingu. */
    .container-fluid .row {
        margin-left: -8px;
        margin-right: -8px;
    }

    .container-fluid .row > [class*="col-"] {
        padding-left: 8px;
        padding-right: 8px;
    }
}

@media (max-width: 767px) {
    /* Justowana grupa dzieli szerokosc po rowno — na telefonie na przycisk wypada
       ~114 px, a etykieta „Osoba prywatna" potrzebuje 132 px i byla PRZYCINANA,
       bo bootstrapowy .btn ma white-space: nowrap. Pozwalamy jej sie zawinac;
       komorki tabeli i tak wyrownuja wysokosc przyciskow w wierszu. */
    .btn-group-justified > .btn,
    .btn-group-justified > .btn-group > .btn {
        white-space: normal;
    }
}

@media (max-width: 767px) {
    /* W 126 szablonach klasa .table-responsive siedzi NA SAMEJ TABELI zamiast na
       opakowaniu, a bootstrapowe `overflow-x: auto` nie tworzy wtedy kontenera
       przewijania — szeroka tabela rozpychala CALA strone (listing zwierzat mial
       scrollWidth 825 px przy ekranie 390 px, klienci 420, stada 611).
       Naprawiamy to tutaj, a nie przez opakowywanie 126 tabel: `display: block`
       robi z tabeli pudelko blokowe, ktore juz potrafi sie przewijac samo.
       Kolumny i naglowki zostaja bez zmian (sprawdzone na listingach zwierzat,
       klientow i stad). Na desktopie regula nie obowiazuje. */
    table.table-responsive {
        display: block;
        overflow-x: auto;
        width: 100%;
        -webkit-overflow-scrolling: touch;
    }
}

/* Wybór wersji wydruku karty (Oryginał / Kopia): przyciski z checkboxem w środku,
   każdy na pełną szerokość swojej połowy wiersza — używane w modalu wydruku karty
   (printAgeChoice) i wydruku zaznaczonych (printSelectedDocs). Wzorzec podświetlenia
   jak .print-statement-option w modalu wydruku zestawienia. */
/* Cennik glowny: ostrzezenie o wysokiej marzy na zywo pod polem marzy (progi jak
   w modalu potwierdzenia: >=100% zolte, >=1000% czerwone). */
.pricing-margin-live-warning {
    margin-top: 4px;
    font-size: 12px;
    font-weight: 600;
    color: #8a6d3b;
}

.pricing-margin-live-warning.is-high {
    color: #a94442;
}

.print-version-option {
    border: 1px solid #ddd;
    border-radius: 4px;
    width: 100%;
}
.print-version-option:hover {
    background-color: #f5f5f5;
}
.print-version-option.is-selected {
    border-color: #337ab7;
    background-color: #eaf3fb;
}
.print-version-option > label {
    display: block;
    width: 100%;
    margin-bottom: 0;
    padding: 10px 12px;
    font-weight: normal;
    cursor: pointer;
    text-align: center;
}

/* Ikona z danymi wypełniającego kartę (login, e-mail, „w imieniu") na podglądzie.
   Ma być dostępna, ale nie ma przyciągać wzroku — stąd wyblakła i mała; pełny kontrast
   dopiero po najechaniu albo ustawieniu na niej fokusu klawiaturą. */
.tcart-issuer-hint {
    margin-left: 6px;
    font-size: 12px;
    color: #9aa4b1;
    opacity: 0.5;
    cursor: help;
    vertical-align: middle;
    transition: opacity 0.15s ease-in-out;
}
.tcart-issuer-hint:hover,
.tcart-issuer-hint:focus {
    opacity: 1;
    color: #537fbe;
    outline: none;
}

/* Grupa pole+przyciski jest tabelą (Bootstrap input-group). Offline przyciski znikają, więc
   zostaje jedna komórka — zwijamy całość do zwykłego bloku, żeby pole zajęło pełną szerokość
   formularza, a nie tyle, ile zajmowało obok przycisków. */
.offline-plain-group,
.offline-plain-group > div,
.offline-plain-group > select,
.offline-plain-group > input {
    display: block !important;
    width: 100% !important;
}

/* Pola karty mają kwadratowy prawy bok, bo zaraz za nimi stoją przyciski słownikowe.
   Offline te przyciski znikają (słownika gabinetu nie da się uzupełnić bez serwera),
   więc pole wyglądało na ucięte — tu wraca normalne zaokrąglenie. */
.offline-input-round-right {
    border-top-right-radius: 4px !important;
    border-bottom-right-radius: 4px !important;
}

/* Modale wydruku zaświadczeń (lista zwierząt + komplet opcji): globalny limit
   „div.modal .modal-body {max-height: 640px}" wymuszał przewijanie — tu treść
   rośnie do wysokości ekranu (odjęte: margines okna, nagłówek i stopka modala). */
div.modal.vacc-cert-modal .modal-body {
    max-height: calc(100vh - 210px);
}

/* ============================== Status zdrowotny (programy zdrowotne) ==============================
   Zakładka statusu zdrowotnego hodowcy + kółka statusów na listach (listing hodowców, wybór
   właściciela na formularzach, kafelek startowy hodowcy). Semafor: zielony/żółty/czerwony. */

/* Kółko koloru statusu z liczbą programów w tym kolorze. Kolor tła nadaje ng-style. */
.health-dot {
    display: inline-block;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 10px;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
    margin-right: 3px;
    vertical-align: middle;
}
.health-dot-sm {
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    font-size: 11px;
    line-height: 16px;
}
a.health-dots-link { text-decoration: none; cursor: pointer; }
a.health-dots-link:hover .health-dot { box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.15); }

/* p11: kolorowe checkboxy filtra statusu na listingu właścicieli. Ten sam język wizualny co
   .health-status-pick na zakładce hodowcy (niezaznaczony — kolor tylko na obramowaniu i ikonie,
   bo żółty napis na białym jest nieczytelny; zaznaczony — wypełnienie z napisem dobranym
   luminancją), tylko w rozmiarze paska filtrów, nie panelu. */
.health-color-filter-row { display: flex; gap: 6px; flex-wrap: wrap; }
.health-color-filter {
    /* flex-basis 0 + min-width 0: trzy przyciski dzielą szerokość kolumny PO RÓWNO i mieszczą
       się w jednym wierszu. Przy bazie na szerokość treści „Czerwony" spychało trzeci przycisk
       do drugiej linii, co wyglądało jak przypadkowe złamanie układu. */
    flex: 1 1 0;
    min-width: 0;
    border: 2px solid #ddd;
    border-radius: 6px;
    background: #fff;
    color: #333;
    padding: 5px 2px;
    font-size: 12px;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    transition: box-shadow 0.1s ease-in-out;
}
.health-color-filter:hover { box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); }
.health-color-filter .fa, .health-color-filter .far { margin-right: 4px; }

/* p12: status pod nazwą właściciela jest PRZYCISKIEM. Wcześniej klikalne były wyłącznie same
   kółka, a napis „Status zdrowotny" — nie, więc nic nie zapowiadało, że cokolwiek się otworzy.
   Wygląd celowo lekki (nie btn-default): to element wewnątrz komórki listy, nie akcja główna. */
.health-status-btn {
    padding: 2px 8px;
    border: 1px solid #ddd;
    border-radius: 12px;
    background: #fbfbfb;
    font-size: 12px;
    line-height: 20px;
    white-space: nowrap;
}
.health-status-btn:hover, .health-status-btn:focus {
    background: #f0f4f8;
    border-color: #b7c9d8;
}
.health-status-btn .health-status-btn-label { color: #555; font-weight: 600; margin-right: 4px; }
.health-status-btn .health-dot:last-child { margin-right: 0; }

/* p13: czerwony program to jedyny stan wymagający reakcji — na liście kilkudziesięciu
   właścicieli ginął wśród zielonych i żółtych. Pulsowanie jest DOKŁADNIE tym samym sygnałem,
   co czerwona kropka „Twój dzień" w pasku menu (@keyframes todaywork-pulse), żeby na obu
   ekranach znaczyło to samo. Pierścień rysuje box-shadow, więc nie rusza układu. */
.health-dot-pulse {
    animation: todaywork-pulse 1.6s ease-out infinite;
}

/* Ta sama uprzejmość co przy kropce w menu: bez animacji dla ograniczonego ruchu. */
@media (prefers-reduced-motion: reduce) {
    .health-dot-pulse { animation: none; }
}

/* ==========================================================================
   Portal hodowcy: panel statusu zdrowotnego (health_status_panel_20260915_1107_).
   Jeden blok na obie powierzchnie — dedykowaną stronę #/myhealth i sekcję na
   „Moich danych" — bo szablon jest jeden.
   ⚠ Jawny text-align: left — strona klienta centruje tekst globalnie.
   ========================================================================== */
.owner-health { text-align: left; }
.owner-health-intro { color: #555; margin-bottom: 12px; }
.owner-health-summary { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 14px; }
.owner-health-summary-item { font-weight: 600; }
.owner-health-item {
    border: 1px solid #e2e6ea;
    border-left: 6px solid #9e9e9e;
    border-radius: 4px;
    padding: 10px 12px;
    margin-bottom: 10px;
    background: #fff;
}
.owner-health-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.owner-health-name { flex: 1 1 auto; font-size: 15px; font-weight: 700; }
.owner-health-status {
    flex: 0 0 auto;
    display: inline-block;
    padding: 3px 10px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}
.owner-health-dates { display: flex; flex-wrap: wrap; gap: 2px 18px; margin-top: 6px; color: #444; }
.owner-health-why { margin-top: 6px; color: #333; }
.owner-health-why .fa { margin-right: 4px; }
.owner-health-count { display: inline-block; margin-left: 6px; }
.owner-health-forecast { display: block; margin-top: 2px; color: #666; font-size: 12px; }
.owner-health-legend {
    margin: 18px 0 14px;
    padding: 12px;
    background: #f7f9fb;
    border: 1px solid #e2e6ea;
    border-radius: 4px;
}
.owner-health-legend h4 { margin: 0 0 8px; font-size: 15px; font-weight: 700; }
.owner-health-legend-row { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 6px; }
.owner-health-legend-name { flex: 0 0 110px; font-weight: 700; }
.owner-health-legend-desc { flex: 1 1 auto; color: #555; }

@media (max-width: 767px) {
    .owner-health-head { align-items: flex-start; }
    .owner-health-dates { flex-direction: column; }
    .owner-health-legend-row { flex-wrap: wrap; }
    .owner-health-legend-name { flex: 0 0 auto; }
}

/* Belka programu: flex zamiast siatki col-md, żeby na telefonie prawa strona spadała pod nazwę
   zamiast się rozjeżdżać. Cała belka jest klikalna (zwiń/rozwiń) + jawny przycisk obok statusu. */
.health-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; }
/* Tytuł programu od LEWEJ, a status/Historia/Zwiń od PRAWEJ — strona klienta centruje tekst
   globalnie, więc bez jawnego text-align belka renderowała się wyśrodkowana. */
.health-bar-main { flex: 1 1 240px; min-width: 0; line-height: 24px; text-align: left; }
.health-bar-side { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; margin-left: auto; justify-content: flex-end; text-align: right; }
.health-bar-circle { font-size: 14px; vertical-align: middle; margin-right: 6px; }
.health-bar-due { color: #555; font-size: 12.5px; white-space: nowrap; }
.health-bar-due strong { font-weight: 700; }

/* Status ustawiany ręcznie: wiersz trzech dużych kolorowych przycisków z checkboxem.
   Kolor ramki/tła nadaje ng-style (kolory statusów przychodzą ze słownika). */
.health-status-pick-row { display: flex; gap: 8px; flex-wrap: wrap; }
.health-status-pick {
    flex: 1 1 150px;
    border: 2px solid #ddd;
    border-radius: 6px;
    background: #fff;
    padding: 12px 10px;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
    transition: box-shadow 0.1s ease-in-out;
}
.health-status-pick:hover { box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); }
.health-status-pick .fa, .health-status-pick .far { margin-right: 6px; }
.health-status-pick.is-selected { color: #fff; }
.health-status-pick[disabled] { opacity: 0.65; cursor: not-allowed; box-shadow: none; }

/* Checklista i kanały przypomnień: duże, wyrównane pozycje (idiom .vet-opt-row z uprawnień). */
.health-check-row { margin-bottom: 8px; padding: 8px 12px; }
.health-check-row .vet-opt-control { flex: 0 0 170px; }
.health-check-label { font-weight: 700; margin: 0; line-height: 24px; }
.health-check-label .fa, .health-check-label .far { margin-right: 8px; font-size: 16px; vertical-align: middle; }

/* Pełnej szerokości button-przełącznik (checkbox w treści) — sekcja przypomnień i jej kanały. */
.health-toggle-option > label { text-align: left; font-size: 14px; }
.health-toggle-option .fa, .health-toggle-option .far { margin-right: 8px; font-size: 16px; vertical-align: middle; }
.health-toggle-option .health-channel-missing { margin-left: 26px; }
.health-channel-missing { display: block; color: #a94442; font-size: 12px; font-weight: 400; }

/* Cała sekcja przypomnień w JEDNEJ ramce: przełącznik u góry, pod nim dni + kanały. */
.health-reminders-box {
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 8px 10px;
    margin-top: 4px;
    background: #fff;
}
.health-reminders-box.is-on { border-color: #337ab7; }
/* The head toggle keeps its click/selection tint but drops the nested border. */
.health-reminders-box > .print-version-option { border: none; }

/* Trzy kanały (Klient SMS / Klient e-mail / Zadanie dla lekarza) w jednym wierszu —
   równe komórki flex, na telefonie spadają do kolumny. */
.health-channel-row { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.health-channel-row .print-version-option { flex: 1 1 180px; width: auto; margin-bottom: 0; }
.health-channel-detail { display: block; font-weight: normal; font-size: 12px; margin-left: 26px; word-break: break-word; }

/* „Kiedy to wyjdzie" — zdanie zamykające sekcję przypomnień. Wyróżnione tłem, bo odpowiada na
   pytanie, którego reszta sekcji nie podejmowała (kanały mówią CZYM, nie KIEDY). Wyszarza się,
   gdy nic nie pójdzie: brak terminu albo brak zaznaczonego kanału. */
.health-reminder-when {
    margin-top: 6px;
    padding: 6px 10px;
    border-left: 3px solid #337ab7;
    background: #f4f8fb;
    border-radius: 3px;
    font-size: 12px;
    line-height: 1.5;
    color: #31708f;
}
.health-reminder-when .fa { margin-right: 6px; }
.health-reminder-when.is-muted { border-left-color: #b8b8b8; background: #f6f6f6; color: #777; }

/* Uzupełnianie telefonu i e-maila: oba ostrzeżenia w jednym wierszu, gdy występują razem;
   pojedyncze rozciąga się na całą szerokość. Na telefonie w kolumnę. */
.health-fillin-row { display: flex; gap: 6px; flex-wrap: wrap; }
.health-fillin-row .alert { flex: 1 1 300px; margin-bottom: 6px; }

/* Pasek statusu zdrowotnego na profilu właściciela — cały klikalny, na telefonie pełna
   szerokość i większa powierzchnia dotyku (sam link „Szczegóły" był celem na kilkanaście px). */
.health-status-strip {
    display: inline-block;
    padding: 6px 14px;
    margin: 2px 0 8px;
    border-radius: 18px;
    background: #f7f7f9;
    border: 1px solid #e2e2e6;
    cursor: pointer;
}
.health-status-strip:hover { background: #eef0f4; border-color: #cfd3da; }
.health-status-strip-dot {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    vertical-align: middle;
    margin-right: 8px;
    border: 1px solid rgba(0, 0, 0, 0.15);
}
.health-status-strip-counts { vertical-align: middle; margin-left: 12px; }
.health-status-strip-link { vertical-align: middle; margin-left: 14px; cursor: pointer; }

/* Status zdrowotny pod nazwą właściciela na liście mobilnej. */
.health-dots-mobile { font-size: 13px; color: #777; margin-top: 6px; }
.health-dots-mobile .health-dots-link { display: inline-block; padding: 4px 0; }

@media (max-width: 767px) {
    .health-status-strip {
        display: block;
        width: 100%;
        padding: 12px 14px;
        border-radius: 8px;
        font-size: 15px;
    }
    .health-status-strip-dot { width: 18px; height: 18px; }
    .health-status-strip-counts { display: block; margin: 6px 0 0; }
    .health-status-strip-link { display: block; margin: 8px 0 0; font-weight: 700; }
}

/* Szybkie ustawianie dat pod polami: „Ustaw dzisiaj" (cała szerokość pola) oraz odstępy
   +2/3/4 tyg. liczone od daty ostatniego wykonania. Przyciski są celowo pełnowymiarowe —
   na telefonie trafia się w nie palcem, a w input-group ginęły przy ikonie kalendarza. */
.health-quick-date-btn { margin-top: 4px; }
.health-quick-date-btn .fa, .health-quick-date-btn .far { margin-right: 6px; }
.health-quick-weeks { display: flex; gap: 4px; }
.health-quick-weeks .health-quick-date-btn { flex: 1 1 0; white-space: nowrap; }
.health-quick-weeks-hint { display: block; margin-top: 3px; }

/* Preparaty przypisane do programu — wyjaśnienie automatu uzupełniającego daty. */
.health-drugs-note {
    background: #f7f7f9;
    border: 1px solid #e2e2e6;
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 13px;
}
.health-drugs-note .fa-flask { margin-right: 6px; color: #555; }

/* Historia (biznesowa): oś zdarzeń — jedno zdarzenie = jedna wizyta/zapis. */
.health-history-event { border-left: 3px solid #d7dbe0; padding: 4px 12px 6px; margin-bottom: 12px; }
.health-history-head { font-weight: 700; }
.health-history-meta { color: #777; font-size: 12.5px; }
.health-history-change { font-size: 13px; margin: 2px 0; }
.health-history-change .health-history-old { color: #a94442; text-decoration: line-through; }
.health-history-change .health-history-new { color: #3c763d; font-weight: 700; }

/* Picker „Dodaj program dla hodowcy": select obok długiego przycisku ściskał się do szerokości
   samego chevrona (Bootstrap + MDB liczą .input-group jako tabelę) i po wyborze nie było widać
   nazwy programu. Flex z przyciskiem przypiętym do treści oddaje resztę miejsca liście. */
.health-tab-toolbar .input-group {
    display: flex;
    width: 100%;
    float: none;
    margin-left: 0;
}
.health-tab-toolbar .input-group > .form-control { flex: 1 1 auto; min-width: 0; }
.health-tab-toolbar .input-group > .input-group-btn { flex: 0 0 auto; width: max-content; }

/* Wersja mobilna zakładki programów zdrowotnych. */
@media (max-width: 767px) {
    /* Na telefonie nawet flex nie wystarcza — nazwa programu bywa dłuższa niż cały ekran,
       więc lista idzie nad przycisk, obie na pełną szerokość. */
    .health-tab-toolbar .input-group { display: block; }
    .health-tab-toolbar .input-group > .form-control {
        width: 100%;
        display: block;
        /* Bez zdjęcia floata przycisk podjeżdża OBOK listy i wyjeżdża poza ekran. */
        float: none;
        border-radius: 4px;
    }
    .health-tab-toolbar .input-group > .input-group-btn {
        display: block;
        width: 100%;
        float: none;
        clear: both;
        margin-top: 6px;
    }
    .health-tab-toolbar .input-group > .input-group-btn > .btn {
        width: 100%;
        border-radius: 4px;
    }
    .health-bar-side { margin-left: 0; width: 100%; }
    .health-status-pick { flex-basis: 100%; }
    .health-check-row .vet-opt-control { flex: 1 1 100%; }
    .health-channel-row .print-version-option { flex-basis: 100%; }
    .health-fillin-row .alert { flex-basis: 100%; }
    .health-tab .panel-body { padding: 10px; }
    .health-tab-toolbar .btn { margin-bottom: 4px; }
}

/* Kafelek ekranu startowego offline.
   Anchor opakowuje kolumne Bootstrapa (.col-* > .thumbnail) i mial pudelko o WYSOKOSCI 0 z
   DWOCH niezaleznych powodow: domyslnego `display: inline` ORAZ zapadania sie bloku, ktorego
   jedyne dziecko jest floatowane (kolumny Bootstrapa 3 sa na floatach). Tresc renderowala sie
   normalnie — kafle bylo widac — ale sam link nie mial obszaru: nie dalo sie kliknac w
   krawedz plytki ani zmierzyc go w testach przegladarkowych. Stad blok + clearfix. */
.offline-start-tile {
    display: block;
}
.offline-start-tile::after {
    content: "";
    display: table;
    clear: both;
}
.offline-start-tile:hover,
.offline-start-tile:focus {
    text-decoration: none;
}

/* ⚠ Klatka STARTOWA animacji modala.
   Bootstrap otwiera modal z `transform: translate(0, -25%)` i dojeżdża do zera w 0,3 s.
   Ten procent liczy się od WYSOKOŚCI DIALOGU, więc dla wysokiego okna na telefonie
   (np. wybór zwierząt: 716 px przy ekranie 844 px) start wypada 179 px NAD widokiem —
   zmierzone. Dopóki animacja leci, wszystko jest w porządku, ale jeśli z jakiegokolwiek
   powodu się nie uruchomi (uśpiona karta, zdławiony wątek, brak przemalowania po zmianie
   klasy), modal ZOSTAJE poza ekranem i użytkownik widzi go dopiero po kliknięciu, które
   wymusza przemalowanie.
   Stały, mały offset zamiast procentu: efekt wizualnie ten sam, ale zatrzymana animacja
   zostawia dialog na ekranie, a nie 180 px nad nim. */
/* ⚠ Selektor MUSI mieć :not(.in), a stan końcowy własną, jawną regułę.
   `.modal.fade .modal-dialog` ma dokładnie tę samą specyficzność co bootstrapowe
   `.modal.in .modal-dialog`, a ten arkusz ładuje się PÓŹNIEJ — bez :not(.in) klatka
   startowa wygrywała także po dodaniu klasy `in` i dialog zostawał 20 px nad miejscem
   docelowym NA STAŁE (zmierzone). */
.modal.fade:not(.in) .modal-dialog {
    -webkit-transform: translate(0, -20px);
    -ms-transform: translate(0, -20px);
    -o-transform: translate(0, -20px);
    transform: translate(0, -20px);
}
.modal.fade.in .modal-dialog {
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0);
}

/* ====================================================================
   Modal „Przemieszczenie leków między magazynami" (pkt 68, 2026-08-26)
   Desktop: szerokości kolumn przeniesione z inline styles.
   Mobile (≤767px): modal pełnoekranowy (wzorzec select-animals-modal-fullscreen),
   tabela pozycji przechodzi w pionowe „kartki" z etykietami pól (data-label),
   stopka układa się w pion z przyciskami na pełną szerokość.
   ==================================================================== */
.mm-move-table .mm-col-drug {
    width: 50%;
}
.mm-move-table .mm-col-options {
    width: 100px;
}
.mm-move-table select.form-control {
    max-width: 100%;
}
@media (max-width: 767px) {
    /* Pełny ekran: samo width:100% nie wystarcza — globalne
       .modal-dialog{max-width:calc(100% - 20px)} przycina dialog (por. komentarz przy
       .select-animals-modal-fullscreen). */
    .change-magazine-modal .modal-dialog {
        width: 100%;
        max-width: none;
        margin: 0;
    }
    .change-magazine-modal .modal-content {
        border-left: 0;
        border-right: 0;
        border-radius: 0;
    }
    .mm-move-table,
    .mm-move-table tbody,
    .mm-move-table tr,
    .mm-move-table td {
        display: block;
        width: 100%;
        white-space: normal;
    }
    .mm-move-table .mm-col-drug,
    .mm-move-table .mm-col-options {
        width: 100%;
    }
    .mm-move-table tr.mm-move-header-row {
        display: none;
    }
    .mm-move-table tr {
        border: 1px solid #ddd;
        border-radius: 6px;
        margin-bottom: 10px;
        padding: 8px 10px;
        background-color: #fff;
    }
    .mm-move-table td {
        border: none;
        padding: 5px 0;
    }
    /* Etykieta pola nad kontrolką — nagłówek tabeli jest na telefonie schowany. */
    .mm-move-table td[data-label]::before {
        content: attr(data-label);
        display: block;
        font-weight: bold;
        font-size: 12px;
        color: #555;
        margin-bottom: 3px;
    }
    /* p94: „Ilość" = input + jednostka miary (addon) + Max w jednej grupie. Na telefonie
       tabelkowy layout Bootstrapa rozjezdzal wysokosci (addon wyzszy od inputu i Max).
       Flex + stretch wyrownuje wszystkie trzy do jednej wysokosci niezaleznie od paddingow
       poszczegolnych regul mobilnych. Selektory z prefiksem .change-magazine-modal, bo goly
       .mm-move-table ... (0,3,0) PRZEGRYWA z globalnym
       .input-group:not(.input-group-sm):not(.input-group-lg) > .input-group-addon (0,4,0)
       i zgodnosc wysokosci trzymala sie tylko na tym, ze obie reguly akurat mowily 44px. */
    .change-magazine-modal .mm-move-table .input-group,
    .mm-move-table .input-group {
        display: flex;
        align-items: stretch;
        width: 100%;
    }
    .change-magazine-modal .mm-move-table .input-group > .form-control,
    .mm-move-table .input-group > .form-control {
        flex: 1 1 auto;
        width: auto;
        height: 44px;
        min-height: 44px;
        max-height: 44px;
    }
    .change-magazine-modal .mm-move-table .input-group > .input-group-addon,
    .change-magazine-modal .mm-move-table .input-group > .input-group-btn,
    .mm-move-table .input-group > .input-group-addon,
    .mm-move-table .input-group > .input-group-btn {
        display: flex;
        align-items: center;
        width: auto;
        height: 44px;
        min-height: 44px;
        max-height: 44px;
        padding-top: 0;
        padding-bottom: 0;
        /* Jednostka nie moze sie zlamac na dwie linie — w razie przegranej display:flex
           z inna regula to wlasnie zawiniecie tekstu rozciagalo addon ponad input. */
        white-space: nowrap;
        line-height: 42px;
    }
    .change-magazine-modal .mm-move-table .input-group > .input-group-btn > .btn,
    .mm-move-table .input-group > .input-group-btn > .btn {
        height: 44px;
        min-height: 44px;
        max-height: 44px;
        padding-top: 0;
        padding-bottom: 0;
        margin-bottom: 0;
    }
    .mm-move-footer {
        text-align: left;
    }
    .mm-move-footer .btn,
    .mm-move-footer .mm-footer-select {
        display: block;
        width: 100%;
        margin: 0 0 8px 0;
    }
    .mm-move-footer .mm-footer-block {
        display: block;
        margin: 0 0 8px 0;
    }
    .mm-move-footer .mm-footer-label {
        display: block;
        margin-bottom: 3px;
    }
}
@media (min-width: 768px) {
    .mm-move-footer .mm-footer-block {
        display: inline-block;
        margin: 0 15px;
    }
    .mm-move-footer .mm-footer-label {
        margin-right: 5px;
    }
    .mm-move-footer .mm-footer-select {
        display: inline-block;
        width: auto;
        min-width: 200px;
    }
}

/* 104: plakietka roli na ekranie admina (naglowek uzytkownika + tabela Zespol).
   Domyslny .label Bootstrapa (75% rozmiaru rodzica) byl nieczytelny — rola to na tym
   ekranie informacja pierwszoplanowa. Kolor nadaje roleClassFor (users_20260915_1107_.js). */
.admin-role-label {
    display: inline-block;
    font-size: 12px;
    padding: 4px 8px;
    margin-top: 2px;
}

/* Plakietki polityk/źródeł cen na JASNYM tle (żółta, pomarańczowa, zielona): biały tekst
   Bootstrapa ma na nich za słaby kontrast — nazwa polityki potrafiła zniknąć zupełnie
   (żółte tło + biały napis). Klasa dokładana przez pricingService.tierBadgeCssClass
   i $rootScope.tierBadgeCssClass, więc obowiązuje na każdym ekranie cennika. */
.label.src-darktext { color: #212529; }

/* Historia leku: globalny `div.modal .modal-body { max-height: 640px }` scinal ja na kazdym
   ekranie, wiec dluga historia zmian miescila sie w waskim okienku niezaleznie od wysokosci
   monitora. Modal jest szeroki (large-modal-window) i czyta sie go tabelarycznie — dostaje
   wysokosc proporcjonalna do okna (p38). */
.drug-history-modal .modal-body {
    max-height: 85vh;
}

/* Wybor koloru polityki cenowej: nazwa koloru pisana tym kolorem, zeby bylo widac wybor bez
   zgadywania (p40). Odcienie ciemniejsze od czystych nazw CSS — „yellow" na bialym tle jest
   nieczytelny, a tu chodzi o CZYTELNY podglad, nie o wierne tlo plakietki. */
.tier-color-option-red { color: #c9302c; font-weight: 600; }
.tier-color-option-orange { color: #d58512; font-weight: 600; }
.tier-color-option-yellow { color: #b8860b; font-weight: 600; }
.tier-color-option-green { color: #3d8b3d; font-weight: 600; }
.tier-color-option-blue { color: #2e6da4; font-weight: 600; }

/* Filtr sekcji na Cenniku klienta (leki / uslugi). Na telefonie przykleja sie do gory podczas
   przewijania — przy dlugiej liscie znikal z ekranu i trzeba bylo wracac na sam gore (p41).
   Klei sie tylko w obrebie swojej sekcji, bo `position: sticky` konczy dzialanie na granicy
   rodzica: filtr uslug zastepuje filtr lekow, gdy tabela lekow sie skonczy.
   ⚠ Tlo NIEPRZEZROCZYSTE — bez niego wiersze tabeli przebijaja spod przyklejonego pola. */
.pricing-section-filter {
    max-width: 420px;
    margin-bottom: 10px;
}
@media screen and (max-width: 767px) {
    .pricing-section-filter {
        position: sticky;
        top: 0;
        z-index: 20;
        max-width: none;
        background: #fff;
        padding: 8px 0;
        margin-bottom: 6px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
    }
}
/* The closing brace above was missing until 2026-09-06 — every rule below this line was
   silently trapped inside the mobile media query and dead on desktop. */

/* DOD: modal "Opakowania bezpośrednie leku" - one row per stock unit, even columns */
.dod-unit-map-table > thead > tr > th {
    vertical-align: bottom;
    font-size: 12px;
}
.dod-unit-map-table > tbody > tr > td {
    vertical-align: top;
}
.dod-unit-map-table .form-control.input-sm {
    width: 100%;
}
/* „− + ⚙” w tabeli modala: przyciski w rozmiarze input-sm, żeby wiersz trzymał jedną wysokość */
.dod-unit-map-table .dict-field__btn {
    padding: 5px 8px;
    font-size: 12px;
    line-height: 1.5;
}
/* pole bez grupy akcji (jednostka zawartości ma tylko „−”): przywróć zaokrąglenie prawych rogów */
.dod-unit-map-table .dict-field:has(.dict-field__actions.ng-hide) .dict-field__transclude > .form-control {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}
/* wynik ustalenia („1 OP = 1 worek × 1,1 kg — przyjęto 500 OP → 500 opakowań”) ma być pierwszym, co widać */
.dod-unit-map-table .dod-unit-map-preview {
    display: block;
    font-size: 15px;
    font-weight: bold;
    line-height: 1.4;
    padding: 6px 10px;
    margin: 2px 0 4px;
    border: 1px solid #3c763d;
    border-radius: 4px;
    background: #dff0d8;
}
.dod-unit-map-table .dict-field__hint {
    display: none; /* tabela jest ciasna - podpowiedź o pustym słowniku niesie już tooltip „+” */
}

/* Przyciski mapy opakowań bezpośrednich (DOD): btn-warning ma biały napis na żółtym tle, którego
   na żółtych bannerach nie widać. Ciemny napis na tym samym żółtym daje kontrast ok. 8:1. */
.btn.btn-warning.btn-dod-map,
.btn.btn-warning.btn-dod-map:focus {
    color: #1f1f1f;
    text-shadow: none;
    font-weight: bold;
    background-color: #f5b64f;
    border-color: #c98a1d;
}
.btn.btn-warning.btn-dod-map:hover,
.btn.btn-warning.btn-dod-map:active {
    color: #1f1f1f;
    background-color: #ec9f24;
    border-color: #b8741f;
}
.btn.btn-warning.btn-dod-map[disabled] {
    color: #1f1f1f;
    opacity: 0.55;
}

/* Pasek stanu pod polem „Dane uzyskane z wywiadu lekarskiego". Samo nagranie siedzi juz w tym
   polu — tu zostaje tylko informacja, co sie z nim dzieje, i przyciski po PRAWEJ. Celowo bez
   ramki alertu i bez modalu: to nie jest ostrzezenie ani decyzja do podjecia natychmiast. */
.transcription-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}

.transcription-bar__status {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 260px;
    min-width: 0;
    color: #31708f;
    font-size: 12.5px;
}

.transcription-bar__status--warn {
    color: #8a6d3b;
}

.transcription-bar__status--ready {
    color: #3c763d;
}

/* Przyciski przy prawej krawedzi pola, niezaleznie od dlugosci komunikatu obok. */
.transcription-bar__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-left: auto;
}

/* Przelacznik „Blokada dostepnosci" na modalu zadania. Wlaczony byl `btn-warning`, czyli
   BIALY napis na zoltym (#f0ad4e) - kontrast ok. 2:1, a wiersz pod spodem („urlop / serwis /
   sprzatanie") dodatkowo przygaszony `opacity`, wiec znikal calkiem. Ten sam zabieg co przy
   przyciskach mapy opakowan DOD wyzej: ciemny napis na tym samym zoltym, ok. 8:1. */
.btn.btn-warning.occ-mode-reservation,
.btn.btn-warning.occ-mode-reservation:focus {
    color: #1f1f1f;
    text-shadow: none;
    font-weight: bold;
    background-color: #f5b64f;
    border-color: #c98a1d;
}
.btn.btn-warning.occ-mode-reservation:hover,
.btn.btn-warning.occ-mode-reservation:active {
    color: #1f1f1f;
    background-color: #ec9f24;
    border-color: #b8741f;
}
/* Druga linia to podpowiedz, nie napis drugiej kategorii - przygasza ja KOLOR, nie
   przezroczystosc (ta na zoltym tle zjadala ja do niewidocznosci). */
.occ-mode-reservation small {
    display: block;
    font-size: 10px;
    font-weight: normal;
}
.btn.btn-warning.occ-mode-reservation small {
    color: #4a3a12;
}

/* Blok „Opakowanie bezpośrednie leku” pod polami DOD (faktura, kreator) - jeden obiekt; stan zakodowany
   w lewym pasku: zielony = ustalenie w mocy, bursztyn = brak ustalenia, czerwony = odstępstwo od wyliczenia.
   Etykieta w Montserrat (jak nagłówki aplikacji), reguła pogrubiona, wzór liczbowy w cyfrach tabelarycznych. */
.dod-rule-panel {
    border: 1px solid #dfe5ea;
    border-left: 4px solid #c98a1d;
    border-radius: 3px;
    background: #f7f9fb;
    padding: 8px 12px;
    margin-top: 6px;
}
.dod-rule-panel--set {
    border-left-color: #3c763d;
}
.dod-rule-panel--deviation {
    border-left-color: #a94442;
}
.dod-rule-panel__head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px 14px;
}
.dod-rule-panel__label {
    font-family: "Montserrat", "Roboto", Helvetica, Arial, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #6c7a89;
}
.dod-rule-panel__rule {
    font-weight: 700;
    color: #333;
}
.dod-rule-panel__rule--missing {
    font-weight: 400;
    color: #6c7a89;
}
.dod-rule-panel__link {
    margin-left: auto;
    font-size: 12px;
    white-space: nowrap;
}
.dod-rule-panel__derived {
    margin-top: 4px;
    font-size: 12px;
    color: #6c7a89;
    font-variant-numeric: tabular-nums;
}
.dod-rule-panel__derived strong {
    color: #333;
}
.dod-rule-panel__note {
    margin-top: 6px;
    padding: 6px 8px;
    border: 1px solid #f0d28a;
    border-radius: 3px;
    background: #fff6e0;
    color: #6b4d00;
    font-size: 12.5px;
    line-height: 1.4;
}
.dod-rule-panel__note--deviation {
    border-color: #e6b1ad;
    background: #fbe9e7;
    color: #7a2a25;
}
/* przycisk „Ustal / Zmień” pod polem liczby: pełna szerokość kolumny, napis wyśrodkowany jak na
   każdym przycisku (owner 2026-09-05) */
.btn.dod-rule-btn {
    display: block;
    width: 100%;
    margin-top: 8px;
    text-align: center;
    white-space: normal;
}
/* pola brane z ustalenia (rodzaj, zawartość): podpis z kłódką pod etykietą */
.dod-locked-note {
    font-size: 11px;
    font-style: italic;
    color: #6c7a89;
    margin-bottom: 2px;
}

/* Linki do leków w panelach braków DOD: globalne a:hover rozjaśnia napis do półprzezroczystego
   pomarańczu, nieczytelnego na białym tle tabeli - tu link ciemnieje przy najechaniu, nie blednie */
/* DOD status bar on the listing: counters in one row inside the 9/12 column, the panel buttons in
   the 3/12 column - the same grid as "Konfiguruj" / "Generuj dokumentację" above, so every action of
   the page sits in one right-hand column. The alert's own centering is overridden. */
.dod-status-row {
    margin-bottom: 6px;
}
.alert.dod-status-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 18px;
    text-align: left;
    margin-bottom: 0;
    padding: 7px 15px;
    min-height: 34px;
}
.dod-status-item {
    white-space: nowrap;
    cursor: help;
    border-bottom: 1px dotted #8a6d3b;
}
.dod-status-actions .btn-block + .btn-block {
    margin-top: 5px;
}
@media (min-width: 992px) {
    .dod-status-row {
        display: flex;
        align-items: stretch;
    }
    .dod-status-row .alert.dod-status-bar {
        height: 100%;
    }
}
@media (max-width: 991px) {
    .dod-status-row .alert.dod-status-bar {
        margin-bottom: 6px;
    }
}

/* Invoice DOD section: the rule state at a glance in the collapsed header, and typed values
   that no rule has checked marked on the preview */
.invoice-drug-dod-badge {
    margin-left: 8px;
    font-weight: normal;
    vertical-align: middle;
    white-space: normal;
}
/* the same amber with a dark text as the DOD listing buttons (.btn-dod-map): bootstrap's label-warning
   puts white on yellow, which is barely readable in the section header */
.invoice-drug-dod-badge.label-warning {
    color: #1f1f1f;
    font-weight: bold;
    background-color: #f5b64f;
    border: 1px solid #c98a1d;
}
.invoice-drug-dod-badge.label-success {
    color: #1f1f1f;
    font-weight: bold;
    background-color: #b7dfa5;
    border: 1px solid #3c763d;
}
.dod-unverified {
    color: #8a6d3b;
}
.dod-unverified .fa {
    color: #c98a1d;
    margin-left: 5px;
}

/* DOD preview quantity cells: immediate packages above the rule, the stock quantity below */
.dod-cell-stock {
    border-top: 1px solid #999;
    margin-top: 3px;
    padding-top: 3px;
}

/* Batch bar of the DOD gaps panel: the explanation on the left, the action on the right */
.dod-batch-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}
.dod-batch-bar small {
    flex: 1 1 auto;
    text-align: left;
}
.dod-batch-bar button {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* a.dod-drug-link:link outranks the global "a:link { text-decoration: none }" (0,1,1) - a bare class
   (0,1,0) loses and the drug names on the DOD listing come out without the underline */
a.dod-drug-link,
a.dod-drug-link:link,
a.dod-drug-link:visited {
    color: #23527c;
    text-decoration: underline;
}
a.dod-drug-link:hover,
a.dod-drug-link:focus {
    color: #0f2f4d;
    text-decoration: underline;
    outline: none;
}

/* Pole brane z ustalenia jest wyłączone, a wyłączony input nie dostaje kliknięć - przezroczysta
   warstwa nad nim otwiera modal ustalenia (podpis z kłódką też) */
.dod-locked-wrap {
    position: relative;
}
.dod-locked-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    cursor: pointer;
    z-index: 6;
}
.dod-locked-note.dod-locked-note--clickable {
    cursor: pointer;
}
.dod-locked-note.dod-locked-note--clickable:hover {
    text-decoration: underline;
}

/* Admin: DOD reference table - the rule of a row edited inline as "1 unit = N x type x content" */
.dod-ref-rule {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 2px;
}
.dod-ref-rule .form-control {
    display: inline-block;
    width: auto;
}
.dod-ref-rule .dod-ref-num {
    width: 68px;
}
.dod-ref-rule .dod-ref-type {
    width: 130px;
}
.dod-ref-rule .dod-ref-unit {
    width: 80px;
}
.dod-ref-evidence {
    font-size: 11px;
    color: #666;
    white-space: normal;
    max-width: 480px;
}
.dod-ref-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
}
.dod-ref-actions .btn {
    white-space: nowrap;
    text-align: left;
}
.dod-ref-table td {
    vertical-align: top;
}
.dod-ref-detail td {
    background: #f9f9f9;
}
.dod-ref-proposal {
    margin: 4px 0;
}
.dod-ref-proposal em {
    color: #555;
}

/* Wywiad lekarski z nagrania (przycisk „Nagraj wywiad"): stan nagrywania / przygotowywania
   przez AI na polu tekstowym + plakietki. Wspolne dla karty leczenia (sale_form) i karty
   roboczej (draft_sale_form_header) — do 2026-09-06 siedzialy inline w sale_form_20260915_1107_. */
@keyframes weterMhPulse {
    0%   { box-shadow: 0 0 0 0 rgba(217, 83, 79, .5); }
    70%  { box-shadow: 0 0 0 10px rgba(217, 83, 79, 0); }
    100% { box-shadow: 0 0 0 0 rgba(217, 83, 79, 0); }
}
@keyframes weterMhBlink { 0%, 100% { opacity: 1; } 50% { opacity: .15; } }
.medical-history-recording,
.medical-history-recording:focus {
    border: 2px solid #d9534f !important;
    background-color: #fff5f5 !important;
    animation: weterMhPulse 1.4s infinite;
}
.medical-history-preparing,
.medical-history-preparing:focus {
    border: 2px solid #5bc0de !important;
    background-color: #f4fbfd !important;
}
.medical-history-listening-badge {
    color: #d9534f;
    font-weight: 600;
    font-size: 13px;
    margin: 4px 0;
}
.medical-history-listening-badge .fa-circle {
    font-size: 9px;
    vertical-align: middle;
    margin-right: 5px;
    animation: weterMhBlink 1s infinite;
}
.medical-history-preparing-badge {
    color: #31708f;
    font-weight: 600;
    font-size: 13px;
    margin: 4px 0;
}
/* Etykieta „Nagrany wywiad — …" nad polem: ten sam jezyk co dwa badge'y wyzej, zielona, bo
   mowi o tekscie, ktory JUZ jest w polu, a nie o czyms, co dopiero trwa. */
.medical-history-transcribed-badge {
    color: #3c763d;
    font-weight: 600;
    font-size: 13px;
    margin: 4px 0;
}
.medical-history-transcribed-badge .fa-microphone {
    margin-right: 5px;
}
/* Pole z wstawionym nagraniem — delikatne zielone obramowanie, zeby bylo widac, ktora tresc
   przyjechala z mikrofonu, dopoki uzytkownik jej nie zaakceptuje. */
.medical-history-transcribed,
.medical-history-transcribed:focus {
    border: 2px solid #b6d7b6 !important;
    background-color: #f8fdf8 !important;
}
.medical-history-clear-btn {
    position: absolute;
    top: 6px;
    right: 10px;
    z-index: 2;
    padding: 1px 6px;
    line-height: 1.4;
    opacity: 0.85;
}
.medical-history-clear-btn:hover { opacity: 1; }

/* Wstepny wywiad na karcie roboczej: pole + wysoki przycisk „Nagraj wywiad" po prawej (jak
   na karcie leczenia); na telefonie przycisk schodzi pod pole na cala szerokosc. */
.interview-row {
    display: flex;
    align-items: stretch;
    gap: 10px;
}
.interview-row__field {
    position: relative;
    flex: 1;
    min-width: 0;
}
.interview-row__mic {
    min-width: 170px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    white-space: normal;
    padding: 10px 14px;
}
.interview-row__mic-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 14px;
}
.interview-row__mic-icon {
    font-size: 34px;
    margin-bottom: 8px;
}
@media (max-width: 767px) {
    .interview-row {
        flex-direction: column;
    }
    .interview-row__mic {
        min-width: 0;
        padding: 8px 12px;
    }
    .interview-row__mic-content {
        flex-direction: row;
        gap: 8px;
    }
    .interview-row__mic-icon {
        font-size: 18px;
        margin-bottom: 0;
    }
}

/* Grafik, widok dnia w trybie „Obiekty": wiersz obiektu jest informacja bez akcji. */
.schedule-row.schedule-row--static,
.schedule-row.schedule-row--static:hover {
    cursor: default;
}
/* ------------------------------------------------------------------------------
   Szybki dostęp do załączników i dokumentów kart leczenia
   (listing kart, podgląd karty, zakładka "Badania")
   ------------------------------------------------------------------------------ */

/* Znaczniki przy numerze karty na listingu: spinacz = załączniki, pieczęć = zgody. */
.book-card-markers {
    display: inline-block;
}
.book-card-marker {
    display: inline-block;
    margin-right: 8px;
    padding: 1px 6px;
    border: 1px solid #ddd;
    border-radius: 3px;
    background: #f5f5f5;
    color: #337ab7;
    font-size: 12px;
    cursor: pointer;
}
.book-card-marker:hover,
.book-card-marker:focus {
    background: #eaf3fb;
    border-color: #337ab7;
    text-decoration: none;
}

/* Legenda listy lekow: znak zapytania przy tytule i szeroki dymek z odnosnikiem.
   Domyslny .popover ma max-width 276 px, w ktorym te dwa akapity sa nieczytelne. */
.drug-legend-help {
    cursor: pointer;
    margin-left: 6px;
    font-size: 16px;
    color: #537fbe;
    vertical-align: middle;
}
.drug-legend-help:hover,
.drug-legend-help:focus {
    color: #0056b3;
    text-decoration: none;
}
.drug-legend-popover {
    max-width: 480px;
}
.drug-legend-popover-body p {
    margin-bottom: 10px;
}
.drug-legend-popover-body .drug-legend-popover-last {
    margin-bottom: 0;
}

/* Dymek z listą plików / dokumentów karty. */
.book-card-popover {
    max-height: 320px;
    overflow-y: auto;
    min-width: 220px;
}
.book-card-popover-row {
    padding: 4px 0;
    border-bottom: 1px solid #eee;
}
.book-card-popover-row:last-child {
    border-bottom: none;
}

/* Pasek "co jest przypięte do tej karty" nad podglądem karty. */
.card-artifacts-bar {
    margin: 8px 0 12px 0;
    padding: 6px 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #f5f5f5;
}
.card-artifacts-bar .btn {
    margin-left: 6px;
}
.card-artifacts-sep {
    margin: 0 8px;
    color: #999;
}

/* Wiersze tej samej karty w zakładce "Badania" sklejone w jeden blok: data i numer
   stoją tylko w pierwszym wierszu, kolejne nie mają górnej krawędzi. */
.card-attachments-list .card-attachments-row-continued > td {
    border-top: none;
}

/* Pasek wyboru rodzaju dokumentów w zakładce "Dokumenty" (klient, zwierzę). Komórki
   btn-group-justified mają równą szerokość, a od pozycji "Zgody i zaświadczenia" jest ich
   tyle, że napisy przestają się mieścić - niech się łamią, zamiast być ucinane. */
.docs-type-nav .btn {
    white-space: normal;
}

/* Na telefonie sześć równych komórek to ok. 60 px na przycisk - nawet skrócone napisy
   („Szczepienia", „Inseminacje") się w tym nie mieszczą i pasek urywa treść. Poniżej 768 px
   rezygnujemy więc z układu tabelarycznego btn-group-justified na rzecz siatki po dwa
   przyciski w rzędzie. */
@media screen and (max-width: 767px) {
    .docs-type-nav.btn-group-justified {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
    }

    .docs-type-nav.btn-group-justified > .btn-group {
        display: block;
        float: none;
        width: calc(50% - 2px);
    }

    .docs-type-nav.btn-group-justified > .btn-group > .btn {
        width: 100%;
        border-radius: 4px;
        padding: 8px 4px;
        font-size: 13px;
    }
}

/* Kolumna "Opcje" list załączników i dokumentów. Świadomie NIE .options-cell: tamta klasa
   ściska komórkę do 40 px poniżej 768 px (listing kart chowa tam rozwijane menu), przez co
   przyciski łamały się jeden pod drugim i wiersz rósł na całą wysokość ekranu. */
.card-attachments-options {
    white-space: nowrap;
}

/* Szybki podgląd karty leczenia (modal "Podgląd leczenia"). Układ ma się czytać jak karta:
   nagłówek, wywiad, kolejne pozycje jedna pod drugą, na końcu wyniki badań. */
.card-summary-head {
    padding-bottom: 10px;
    margin-bottom: 12px;
    border-bottom: 1px solid #e0e0e0;
}

.card-summary-section {
    margin-bottom: 12px;
}

.card-summary-section > label {
    display: block;
    margin-bottom: 2px;
}

/* Notatki lekarza bywają wieloliniowe - bez tego wszystko zlewa się w jeden akapit. */
.card-summary-text {
    white-space: pre-wrap;
}

/* Pozycja karty odcięta belką, tak jak na samym formularzu karty leczenia. */
.card-summary-record {
    border-left: 3px solid #337ab7;
    padding-left: 12px;
    margin: 0 0 16px 0;
}

.card-summary-record-title {
    font-weight: bold;
    font-size: 14px;
    color: #555;
    margin-bottom: 8px;
}

.card-summary-drugs td {
    vertical-align: top;
}

/* Uwagi do leku pod jego wierszem - ta sama tabela, ale wyraźnie jako dopisek. */
.card-summary-drug-notes td {
    background: #f9f9f9;
    font-size: 12px;
    border-top: none;
}

/* Podsumowanie walidacji przy przycisku Zapisz w modalu zwierzęcia. Stopka modalu jest
   wyrównana do prawej (Bootstrap), a lista braków musi się czytać od lewej. */
.mdl-animal-validation-summary {
    text-align: left;
    margin-bottom: 12px;
}
.mdl-animal-validation-summary ul {
    margin: 6px 0 0;
    padding-left: 22px;
}
.mdl-animal-validation-summary li {
    line-height: 1.5;
}

/* Naglowek bloku "Zaawansowane filtry" (dyrektywa advanced-filters-toggle). Na desktopie
   zwykly link jak dotad, na telefonie pelnoszerokosciowy przycisk .mobile-menu-toggle. */
/* Przelacznik stoi po PRAWEJ, w jednej kolumnie z "Wyczysc filtry" - tak jak na listingu
   kart leczenia. Na srodku odrywal sie od paska filtrow i czytal jak naglowek sekcji.
   Mobilny wariant to .mobile-menu-toggle (display: flex), wiec text-align go nie rusza. */
/* Wiersz przyciskow filtrow: „Zaawansowane filtry" i „Wyczysc filtry" obok siebie, przy
   prawej krawedzi. Flex zamiast text-align, bo przy ustawieniu inline oba przyciski siadaly
   na LINII BAZOWEJ i przelacznik wychodzil wyzej: etykieta „Wyczysc filtry" siedzi wewnatrz
   <i class="fa">, ktore scina wysokosc wiersza, wiec ten przycisk jest o 6 px nizszy. */
.advanced-filters-header {
    margin-top: 5px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 6px;
}
/* .clear-filters-button ma wlasny margines gorny na inne ekrany - w tym wierszu przesuwalby
   go wzgledem przelacznika. */
.advanced-filters-header .clear-filters-button {
    margin-top: 0;
}
/* Wyrownanie wysokosci obu przyciskow: etykieta w <i class="fa"> dziedziczy interlinie
   przycisku zamiast jedynki z FontAwesome. */
.advanced-filters-header .clear-filters-button .fa {
    line-height: inherit;
}
advanced-filters-toggle {
    display: inline-block;
}
.advanced-filters-link {
    cursor: pointer;
}

/* Stany towarów: równe boczne kolumny centrują paginację względem całej listy,
   niezależnie od szerokości przycisku "Pokaż/ukryj szczegóły" po prawej. */
.drug-state-paging-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 8px;
}
.drug-state-paging-row > [uib-pagination] {
    grid-column: 2;
    justify-self: center;
    min-width: 0;
}
.drug-state-paging-row .pagination {
    margin: 0;
}
/* Filtry wynikow na stanach towarow: jedna siatka zamiast trzech roznych wierszy.
   Kazde pole ma ten sam odstep pionowy, wiec przy zawijaniu kolumn etykiety nie kleja sie
   do pola z wiersza wyzej. */
.drug-state-result-filters-grid .form-group {
    margin-bottom: 12px;
}
.drug-state-result-filters-grid .input-group {
    margin-bottom: 0;
}

.drug-state-details-toggle {
    grid-column: 3;
    justify-self: end;
    max-width: 100%;
    white-space: normal;
}
/* Na tablecie zachowujemy wszystkie przyciski nawigacji w jednym wierszu,
   zastępując długie etykiety strzałkami. Pełne nazwy pozostają w DOM. */
@media (min-width: 768px) and (max-width: 991px) {
    .drug-state-paging-row .pagination-first > a,
    .drug-state-paging-row .pagination-prev > a,
    .drug-state-paging-row .pagination-next > a,
    .drug-state-paging-row .pagination-last > a {
        font-size: 0;
    }
    .drug-state-paging-row .pagination-first > a::before,
    .drug-state-paging-row .pagination-prev > a::before,
    .drug-state-paging-row .pagination-next > a::before,
    .drug-state-paging-row .pagination-last > a::before {
        font-size: 14px;
    }
    .drug-state-paging-row .pagination-first > a::before { content: "«"; }
    .drug-state-paging-row .pagination-prev > a::before { content: "‹"; }
    .drug-state-paging-row .pagination-next > a::before { content: "›"; }
    .drug-state-paging-row .pagination-last > a::before { content: "»"; }
}

/* Pasek „poprzednia / następna" na podglądzie dokumentu (dyrektywa <list-nav-bar>).
   Dwie kopie: GÓRNA w prawym górnym rogu na wysokości tytułu (chodzi po kolejności
   z listingu, więc należy do nagłówka dokumentu, a nie do jego akcji) i DOLNA zamykająca
   podgląd — po przewinięciu długiej karty nie trzeba wracać na górę. */
.list-nav-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
/* Float, a nie pozycjonowanie bezwzględne: długi tytuł karty ma OBLEWAĆ pasek, zamiast
   wchodzić pod niego. margin-top zrównuje środek przycisków ze środkiem <h2>. */
.list-nav-bar--top {
    float: right;
    margin: 18px 0 10px 20px;
}
.list-nav-bar--bottom {
    justify-content: center;
    border-top: 1px solid #e5e5e5;
    padding-top: 16px;
    margin: 24px 0 8px;
}
.list-nav-bar .btn {
    padding: 8px 16px;
    font-size: 15px;
}
.list-nav-position {
    min-width: 72px;
    text-align: center;
    font-size: 15px;
    font-weight: bold;
    color: #555;
    white-space: nowrap;
    cursor: help;
}
/* Poniżej 992 px (główny próg aplikacji) nie ma miejsca obok tytułu: górny pasek wraca do
   własnego wiersza NAD nagłówkiem (w DOM stoi przed <h2>) i jest wyśrodkowany — tak jak
   dolny — zamiast ściskać tytuł do trzech znaków na linię. */
@media (max-width: 991px) {
    .list-nav-bar--top {
        float: none;
        justify-content: center;
        margin: 10px 0;
    }
    /* Trzy przyciski nie mieszcza sie w jednym wierszu telefonu i zawijaly sie asymetrycznie
       („Powrót" + „Poprzednia", a „Następna" sama pod spodem). „Powrót do listy" bierze wiec
       caly wiersz, a strzalki zostaja razem pod nim. */
    .list-nav-bar .list-nav-back {
        flex: 1 0 100%;
        text-align: center;
    }
}