/* Sygmo — nakladka brandowa. Ladowana PO sygmo-skin.css TYLKO w trybie sygmo.
   Regen-safe: sed regenerujacy sygmo-skin.css NIE dotyka tego pliku — tu trzymamy reczne
   reguly, ktore blankietowy swap koloru zepsulby (mieta jako FILL vs tekst).

   Paleta (z ankieta.html.twig): --brand #bbf4f0 (mieta = TYLKO tlo), --brand-hover #a3ece6,
   --brand-ink #0f3d3a (ciemny teal = tekst/akcenty, ~9:1 na miecie = AA OK).

   Dlaczego zmienne --bs-btn-*, nie samo background-color:
   stany :hover/:active przyciskow pochodza z bootstrap.min.css (BS5, NIE forkowany), ktory
   liczy hover jako przyciemniony primary — wartosci pozostaly niebieskie (sed lapal tylko
   #556ee6). Ustawienie zmiennych spina baze i wszystkie stany na miecie naraz. */
.btn-primary{
	--bs-btn-color:#0f3d3a;
	--bs-btn-bg:#bbf4f0;
	--bs-btn-border-color:#bbf4f0;
	--bs-btn-hover-color:#0f3d3a;
	--bs-btn-hover-bg:#a3ece6;
	--bs-btn-hover-border-color:#a3ece6;
	--bs-btn-focus-shadow-rgb:15,61,58;
	--bs-btn-active-color:#0f3d3a;
	--bs-btn-active-bg:#a3ece6;
	--bs-btn-active-border-color:#a3ece6;
	--bs-btn-disabled-color:#0f3d3a;
	--bs-btn-disabled-bg:#bbf4f0;
	--bs-btn-disabled-border-color:#bbf4f0;
	/* Skote hardkoduje baze .btn-primary w app.min.css (bg + color:#fff, bez zmiennych) —
	   nadpisujemy jawnie, bo ten plik laduje sie pozniej (ta sama specyficznosc → wygrywa). */
	background-color:#bbf4f0;
	border-color:#bbf4f0;
	color:#0f3d3a;
	box-shadow:none;
}

/* --- Topnav (poziome menu CM, skote-horizontal) ---
   Pasek .topnav ma tlo primary (#556ee6 → fork #0f3d3a) z bialym tekstem. Robimy pasek mietowy,
   a ze mieta jest jasna — tekst przelaczamy na ciemny teal (bialy by zniknal). `data-topbar=light`
   to w tym buildzie Skote i tak kolorowy pasek (nie bialy), stad override obu wariantow. */
body[data-layout=horizontal][data-topbar=light] .topnav,
body[data-layout=horizontal][data-topbar=colored] .topnav{
	background-color:#bbf4f0;
}
body[data-layout=horizontal][data-topbar=light] .topnav .navbar-nav .nav-link,
body[data-layout=horizontal][data-topbar=colored] .topnav .navbar-nav .nav-link{
	color:#0f3d3a;
}
/* Aktywna/hover pozycja — pelny ciemny teal + bold (na plaskim miętowym pasku odróżnia od reszty).
   `.dropdown.active>a` w Skote ma !important, więc tu też. */
body[data-layout=horizontal][data-topbar=light] .topnav .navbar-nav .nav-link:focus,
body[data-layout=horizontal][data-topbar=light] .topnav .navbar-nav .nav-link:hover,
body[data-layout=horizontal][data-topbar=light] .topnav .navbar-nav .nav-item .nav-link.active,
body[data-layout=horizontal][data-topbar=light] .topnav .navbar-nav .dropdown.active>a,
body[data-layout=horizontal][data-topbar=colored] .topnav .navbar-nav .nav-item .nav-link.active,
body[data-layout=horizontal][data-topbar=colored] .topnav .navbar-nav .dropdown.active>a{
	color:#0f3d3a !important;
	font-weight:600;
}

/* --- Form-check / switch / radio (m.in. /uprawnienia on-off) ---
   Kontrolki sa czyste BS5 (bez .form-check-primary), wiec :checked bierze kolor z
   bootstrap.min.css (#556ee6, NIE forkowany). Track na miete; gałka/kropka/ptaszek na ciemny
   teal, bo mieta jest za jasna na bialy element BS5. */
.form-check-input:checked{
	background-color:#bbf4f0;
	border-color:#a3ece6;
}
.form-switch .form-check-input:checked{
	--bs-form-switch-bg:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%230f3d3a'/%3e%3c/svg%3e");
}
.form-check-input:checked[type=radio]{
	--bs-form-check-bg-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%230f3d3a'/%3e%3c/svg%3e");
}
.form-check-input:checked[type=checkbox]:not([role=switch]){
	--bs-form-check-bg-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%230f3d3a' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}
.form-check-input:focus{
	border-color:#a3ece6;
	box-shadow:0 0 0 .15rem rgba(15,61,58,.2);
}

/* --- .btn-outline-primary (m.in. "Edytuj" na karcie pacjenta, "Dodaj uzytkownika/koordynatora") ---
   Niebieski z bootstrap.min.css (NIE forkowany, #556ee6 na border/text/hover-fill). Robimy:
   tekst+obwodka ciemny teal, hover = wypelnienie miętą z ciemnym tekstem. */
.btn-outline-primary{
	--bs-btn-color:#0f3d3a;
	--bs-btn-border-color:#0f3d3a;
	--bs-btn-hover-color:#0f3d3a;
	--bs-btn-hover-bg:#bbf4f0;
	--bs-btn-hover-border-color:#0f3d3a;
	--bs-btn-focus-shadow-rgb:15,61,58;
	--bs-btn-active-color:#0f3d3a;
	--bs-btn-active-bg:#bbf4f0;
	--bs-btn-active-border-color:#0f3d3a;
	--bs-btn-disabled-color:#0f3d3a;
	--bs-btn-disabled-border-color:#0f3d3a;
}

/* --- Paginacja (numerowana — DataTables i natywna BS) ---
   Aktywna strona: --bs-pagination-active-bg #556ee6 z bootstrap.min.css (NIE forkowany).
   Zmienne pokrywaja BS5 .page-link; jawne reguly domykaja integracje DataTables (BS4-style markup). */
.pagination{
	--bs-pagination-color:#0f3d3a;
	--bs-pagination-hover-color:#0f3d3a;
	--bs-pagination-hover-bg:#eafbfa;
	--bs-pagination-focus-color:#0f3d3a;
	--bs-pagination-focus-bg:#eafbfa;
	--bs-pagination-active-color:#0f3d3a;
	--bs-pagination-active-bg:#bbf4f0;
	--bs-pagination-active-border-color:#a3ece6;
}
.page-link{
	color:#0f3d3a;
}
.page-item.active .page-link,
.active>.page-link,
.page-link.active{
	color:#0f3d3a !important;
	background-color:#bbf4f0 !important;
	border-color:#a3ece6 !important;
}

/* --- Logo sygmo w topbarze ---
   sygmo_logo.svg jest poziome (~3.3:1) vs pionowe Doctor Robert, wiec inline height="60/22/19"
   dawaloby ~200px szerokosci i rozpychalo .navbar-brand-box. Skalujemy po wysokosci, szerokosc auto.
   Wysokosc do korekty pod finalny wyglad. */
.navbar-brand-box .logo img{
	height:32px !important;
	width:auto !important;
}
/* Logo na ekranach logowania (.card-logo, inline height="100") — poziome sygmo logo
   przy 100px mialoby ~334px szer. i nie zmiescilo sie w waskiej kolumnie. */
.card-logo img{
	height:52px !important;
	width:auto !important;
}

/* Tlo panelu logowania — sygmo_bg.jpg zamiast bg-auth-overlay.png. Tylko background-image,
   zeby zachowac cover/no-repeat/center z bazowej reguly (.auth-full-bg .bg-overlay). */
.auth-full-bg .bg-overlay{
	background-image:url(../images/sygmo_bg.jpg);
}

/* Tlo calego CM (body) — ten sam obraz. UWAGA: #layout-wrapper ma max-width:1300px + margin:auto
   + nieprzezroczyste background-color:var(--bs-body-bg), wiec obraz widac w BOCZNYCH marginesach
   (ekrany >1300px), a nie pod trescia. `fixed`, by nie przewijal sie z tresci. */
body{
	background-image:url(../images/sygmo_bg.jpg);
	background-size:cover;
	background-position:center;
	background-attachment:fixed;
	background-repeat:no-repeat;
}