/* body, html {
  background-image: linear-gradient(to top, #dfe9f3 0%, white 100%) !important;
}
 */

/* body {
  background-image: radial-gradient( circle 1224px at 10.6% 8.8%,  rgba(255,255,255,1) 0%, rgba(153,202,251,1) 100.2% );
} */

/* body {
  background-image: linear-gradient( 109.6deg,  rgba(112,246,255,0.33) 11.2%, rgba(221,108,241,0.26) 42%, rgba(229,106,253,0.71) 71.5%, rgba(123,183,253,1) 100.2% );
} */

html, body {
  width: 100vw;
  max-width: 100vw;
  overflow-x: hidden;
}


body {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-variation-settings: "wdth" 100;
}

/* --- Efekt hover podkreślenia w navbarze --- */
.navbar-nav .nav-link {
  position: relative;
  transition: color 0.2s;
  /* Lepiej podkreślić tylko tekst bez tła ikony */
  display: inline-block;
  /* poprawka na paddingi bootstrap */
  padding-bottom: 2px;
}

.navbar-nav .nav-link::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0px;
  height: 3px;
  background: currentColor;
  border-radius: 2px;
  transform: scaleX(0);
  transition: transform 0.25s cubic-bezier(.25,.8,.25,1);
  opacity: 0.7;
}

.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-link:focus::after {
  transform: scaleX(1);
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
  color: #fffa; /* Możesz dopasować lub dać jaśniejszy */
}

.logo-font {
  font-family: "Michroma", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.shadow-text {
text-shadow: 2px 8px 6px rgba(0,0,0,0.2),
                 0px -5px 35px rgba(255,255,255,0.3);
}

/*  body {
  background: #faf5f5;
  background: radial-gradient(circle, rgba(250, 245, 245, 1) 0%, rgba(219, 255, 251, 0.5) 75%, rgba(222, 252, 255, 1) 100%);
 } */

body {
background-image: linear-gradient(180deg, rgb(213,229,183) 0%, rgb(213,229,183) 17%,rgb(189,213,190) 17%, rgb(189,213,190) 29%,rgba(166,196,196, 0.94) 29%, rgba(166,196,196, 0.94) 38%,rgb(142,180,203) 38%, rgb(142,180,203) 47%,rgb(118,164,210) 47%, rgb(118,164,210) 58%,rgba(95,147,216, 0.6) 58%, rgba(95,147,216, 0.6) 88%,rgba(71,131,223, 0.35) 88%, rgba(71,131,223, 0.35) 100%),linear-gradient(157.5deg, rgb(213,229,183) 0%, rgb(213,229,183) 17%,rgb(189,213,190) 17%, rgb(189,213,190) 29%,rgba(166,196,196, 0.94) 29%, rgba(166,196,196, 0.94) 38%,rgb(142,180,203) 38%, rgb(142,180,203) 47%,rgb(118,164,210) 47%, rgb(118,164,210) 58%,rgba(95,147,216, 0.6) 58%, rgba(95,147,216, 0.6) 88%,rgba(71,131,223, 0.35) 88%, rgba(71,131,223, 0.35) 100%),linear-gradient(112.5deg, rgb(213,229,183) 0%, rgb(213,229,183) 17%,rgb(189,213,190) 17%, rgb(189,213,190) 29%,rgba(166,196,196, 0.94) 29%, rgba(166,196,196, 0.94) 38%,rgb(142,180,203) 38%, rgb(142,180,203) 47%,rgb(118,164,210) 47%, rgb(118,164,210) 58%,rgba(95,147,216, 0.6) 58%, rgba(95,147,216, 0.6) 88%,rgba(71,131,223, 0.35) 88%, rgba(71,131,223, 0.35) 100%),linear-gradient(270deg, rgb(213,229,183) 0%, rgb(213,229,183) 17%,rgb(189,213,190) 17%, rgb(189,213,190) 29%,rgba(166,196,196, 0.94) 29%, rgba(166,196,196, 0.94) 38%,rgb(142,180,203) 38%, rgb(142,180,203) 47%,rgb(118,164,210) 47%, rgb(118,164,210) 58%,rgba(95,147,216, 0.6) 58%, rgba(95,147,216, 0.6) 88%,rgba(71,131,223, 0.35) 88%, rgba(71,131,223, 0.35) 100%),linear-gradient(270deg, rgba(173,92,95, 0.31),rgba(110,20,174, 0.17)); background-blend-mode:overlay,overlay,overlay,overlay,normal;
background-attachment: fixed;
}
.navbar {
background: #89F7FE;
background: linear-gradient(87deg, rgba(137, 247, 254, 1) 0%, rgba(183, 234, 247, 1) 10%, rgba(0, 40, 161, 1) 70%);
  color: white;
  -webkit-box-shadow: 0px 0px 8px -4px rgba(66, 68, 90, 1);
-moz-box-shadow: 0px 0px 8px -4px rgba(66, 68, 90, 1);
box-shadow: 0px 0px 8px -4px rgba(66, 68, 90, 1);
}

.custom-shadow {
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.status, .badge {
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}


table {
  margin-left: auto;
  margin-right: auto;
}

/* ✅ Wymuszenie białego tła dla listy wyników TomSelect */
.ts-dropdown, 
.ts-dropdown .ts-dropdown-content {
  background: #fff !important;
  color: #000; /* czarny tekst dla kontrastu */
  border: 1px solid #ccc; /* opcjonalnie ramka jak w bootstrap */
  border-radius: 0.375rem; /* lekko zaokrąglone rogi */
  box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* delikatny cień */
}

/* ✅ Styl hover dla lepszej czytelności */
.ts-dropdown .option:hover,
.ts-dropdown .option.active {
  background: #f0f0f0 !important;
  color: #000 !important;
}

.info-srp {
  font-size: 3rem;
}

#context-menu { position: fixed !important; z-index: 9999; }

.selected-client-box{
  width: 100%;
  border-radius: 50rem; /* „pill” jak w inputach */
  /* opcjonalnie lekko zielone tło, jeśli chcesz mocniej je wyróżnić: */
  /* background: #f6fff8; */
}
@media (max-width: 767.98px) {
  .card.border-warning { border-color: #ffc107 !important; }
  .card.border-success { border-color: #198754 !important; }
  .card.border-danger  { border-color: #dc3545 !important; }
}
/* Hamburger biały */
.navbar-toggler {
  border-color: rgba(255, 255, 255, 0.6); /* obramowanie */
}

/* ✅ Hamburger i X w kolorze białym */
.navbar-toggler {
  border: none;            /* bez ramki */
  outline: none;           /* bez podświetlenia */
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255,1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

/* Zmieniamy hamburgera na X kiedy menu jest otwarte */
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(255,255,255,1)' stroke-width='2' stroke-linecap='round' d='M6 6l18 18M24 6L6 24'/%3E%3C/svg%3E");
}


/* ✅ Tylko mobile (gdy widać hamburgera) */
@media (max-width: 991px) {
  .custom-nav {
    margin-left: 30px;
    width: 100%;
  }
  .custom-nav .nav-item {
    display: block; /* linki jeden pod drugim */
  }
}
.navbar-toggler .close-icon {
  font-size: 2rem;
  color: white;
  line-height: 1;
}


@media (max-width: 767.98px) {
  html, body {
    width: 100vw;
    overflow-x: hidden !important;
    padding-right: 0 !important;
    margin-right: 0 !important;
  }
  .d-flex.d-md-none {
    width: 100vw !important;
    margin-left: 0px;
    margin-right: 0px; 
    padding: 0 !important;
  }
  .d-flex.d-md-none table {
    min-width: 100vw !important;
    width: 100vw !important;
    margin: 0;
    border-radius: 0 !important;
  }
  .container, .container-fluid {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .navbar-nav .nav-link {
    margin-left: 140px !important; /* możesz zwiększyć np. na 32px */
  }
}

/* ✅ Ukryj kolumny tylko na iPad landscape (768–1199px) */
@media (min-width: 768px) and (max-width: 1199.98px) {

  .navbar {
background: #89F7FE;
background: linear-gradient(87deg, rgba(137, 247, 254, 1) 0%, rgba(183, 234, 247, 1) 1%, rgba(0, 40, 161, 1) 50%);
  color: white;
  -webkit-box-shadow: 0px 0px 8px -4px rgba(66, 68, 90, 1);
-moz-box-shadow: 0px 0px 8px -4px rgba(66, 68, 90, 1);
box-shadow: 0px 0px 8px -4px rgba(66, 68, 90, 1);
}

  .navbar .nav-link {
    font-size: 1rem !important;   /* zamiast np. 2rem */
    display: flex;
    align-items: center;   /* wyśrodkowanie ikony + tekstu */
    line-height: 2rem;      /* spójna wysokość */
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  .navbar .nav-link i {
    font-size: 0.9rem !important; /* ikony też mniejsze */
  }

  .navbar-brand  {
    font-size: 1rem !important; /* logo-tekst */
  }
  
  .logo-font {
    font-size: 1rem;
  }
  .col-hide {
    display: none !important;
  }

  .table.table-nowrap th,
  .table.table-nowrap td {
    padding: 0.9rem 0.4rem;
    font-size: 0.9rem;   /* opcjonalnie trochę mniejsza czcionka */
    white-space: normal; /* żeby treść mogła się łamać */
  }
  .col-small {
    font-size: 0.8rem!important;
  }
  .table.table-nowrap {
    width: auto;   /* dopasowuje się do zawartości */
    margin-left: auto;
    margin-right: auto;
  }
  
}


/* Schowaj globalnie domyślną ikonę Bootstrapa/Tablera w naszym przycisku */
.custom-toggler .navbar-toggler-icon { display: none !important; }

/* Reset przycisku */
.custom-toggler {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  padding: .25rem .5rem; /* lekki tap target */
}

/* Wspólne: rozmiar ikonek */
.custom-toggler .icon-burger,
.custom-toggler .icon-close {
  display: inline-block;
  width: 1.6rem;
  height: 1.6rem;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

/* Burger (3 białe kreski) */
.custom-toggler .icon-burger {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255,1)' stroke-width='3' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

/* X (biały) – domyślnie ukryty */
.custom-toggler .icon-close {
  display: none;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255,1)' stroke-width='3' stroke-linecap='round' d='M6 6L24 24M24 6L6 24'/%3E%3C/svg%3E");
}

/* Po rozwinięciu menu (Bootstrap ustawia aria-expanded=true) – pokaż X zamiast burgera */
.custom-toggler[aria-expanded="true"] .icon-burger { display: none; }
.custom-toggler[aria-expanded="true"] .icon-close  { display: inline-block; }

/* Tylko mobile: wyśrodkuj linki w rozwiniętym menu (desktop bez zmian) */
@media (max-width: 991.98px) {
  #navbarNav .navbar-nav {
    margin-left: 30px;
    width: 100%;
  }
  #navbarNav .navbar-nav .nav-item {
    display: block;
  }
}
.custom-toggler .icon-burger,
.custom-toggler .icon-close {
  pointer-events: none; /* kliknięcia nie „łapią się” na spanach */
}