/* app.css */

/* RESET / PODSTAWY */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Product Sans', sans-serif;
}

body {
  background-color: #fdf1f2; /* pastelowy fiolet / róż */
  color: #ffffff;
  min-height: 100vh;
}

/* NAGŁÓWEK (opcjonalny) */
.app-header {
  /* Jeśli nie chcesz innego stylu, może być minimalne: */
  text-align: center;
  /* Ewentualnie usuń tło, bo teraz masz <img> */
  background: none;
  padding: 0;
}

/* Kontener, który warstwuje dwa obrazki */
.header-container {
  position: relative; /* klucz: aby .header-overlay można było ustawić absolutnie */
   /* lub block, w zależności od potrzeb */
  /* Szerokość i wysokość dopasuje się do wielkości .header-bg,
     chyba że ustawisz inaczej (np. width: 100%). */
}

/* Pierwszy obrazek (tło) */
.header-bg {
  display: block;  /* żeby nie było przerw od inline-img */
  width: 100%;     /* np. wypełnia szerokość kontenera */
  height: 100%;
max-height: 200px;  
margin-top: -2.5rem;  
}

/* Drugi obrazek (nakładany na środek) */
.header-overlay {
  position: absolute; /* warstwowanie nad .header-bg */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* Ewentualnie ustal rozmiar: */
  max-width: 11rem;
  height: auto;
margin-top: -0.6rem;
}

/* UKŁAD GŁÓWNY: lewa kolumna (kategorie) + reszta */
.app-container {
  display: flex;
}

/* LEWY PANEL KATEGORII */
.categories-panel {
  position: relative;
  width: 80px;
  background-color: #fdf1f2;
  padding: 1rem;
  box-shadow: 35px 10px 20px #fdf1f2;
  z-index: 10;
}
.categories-panel ul {
  list-style: none;
}
.categories-panel li {
  margin-bottom: 1rem;
  color: #B9AFC5;
  font-weight: bold;
  cursor: pointer;
  padding: 1.2rem;

  /* Tekst pionowy (jak w Twoim screenie), 
     można usunąć, jeśli wolisz zwykły poziomy */
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}
.categories-panel li.active {
  color: #5E4385;      /* np. inny kolor wyróżniający */
  font-weight: bold;   /* pogrubienie, jeśli chcesz */
}
/* Wskaźnik – zaokrąglony trójkąt */
.category-indicator {
  position: absolute;
  left: -15px; /* wysunięcie w lewo, jeśli chcesz */
  width: 3rem;
  height: 3rem;     /* pastelowy róż */
  background: url("arrow.svg "); /* rysowanie trójkąta */
  transition: top 0.3s ease; /* płynne przesunięcie */
  /* Domyślnie wskaźnik może być na górze, np.: */
  top: 0;
  background-repeat: no-repeat;
}

/* SEKcja z PRODUKTAMI */
.products-panel {
  /* Zajmuje resztę szerokości (jeśli masz lewy panel kategorii) */
  flex: 1;
  /* Ukryj ewentualny scrollbar pionowy, 
     a scrollbar poziomy i tak pokaże się w .products-row */
  overflow: hidden; 
  position: relative;
}
#products-container {
  /* tutaj generowane karty przez JS */
}
.products-row {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
    /* 1) Dla Internet Explorera i starszych Edge */
  -ms-overflow-style: none;

  /* 2) Dla Firefox */
  scrollbar-width: none;
}
.products-row::-webkit-scrollbar {
  display: none;
}
.product-card {
  position: relative;     /* umożliwia absolutne pozycjonowanie dziecka */
  overflow: visible;      /* aby elementy mogły wystawać */
  min-width: 180px;
  background-color: #FEC1C2;
  border-radius: 16px;
  padding: 1rem;
  flex-shrink: 0;
  margin: 0.5rem;
  box-shadow: 1px 10px 25px #CC9C9D;
  padding-left: 2rem;
}
/* Kontener przycisków – pastelowe tło, zaokrąglone rogi */
.qty-controls {
  display: inline-flex;        /* ułożenie elementów w linii */
  align-items: center;
  gap: 0.5rem;                 /* odstęp między przyciskami i liczbą */
  background-color: #e4adae;   /* pastelowy róż */
  border-radius: 0.9rem;         /* zaokrąglenie */
  padding: 0.5rem 0.5rem;      /* wewnętrzne odstępy */
  margin: 0 auto;              /* wyśrodkowanie */
  position: absolute;
  bottom: 2rem; 
  left: 50%;
  width: 10rem;
  transform: translateX(-50%); 
}
.qty-value {
  font-size: 1.2rem;
  color: #684b88;              /* fioletowy tekst */
  padding-left: 5px;
  padding-right: 5px;
  font-weight: bold;
width: 1.2rem;  
}

.product-card img {
  max-width: 80px;
  margin-bottom: 0.5rem;
}
.product-card h3 {
  margin-bottom: 0.5rem;
  font-size: 1.1rem;
}
.product-card .product-image {
  max-width: 180px;
  margin-bottom: 0.5rem;
  position: absolute;
  top: -85px;        /* wystaje 20px ponad górę karty */
  left: 50%;         /* wyśrodkuj względem szerokości karty */
  transform: translateX(-50%);
  z-index: 999;
  filter: drop-shadow(1px 10px 10px rgba(0, 0, 0, 0.3));
}

.product-card .product-name {
  padding-top: 5rem;
  font-size: 1.6rem;
  font-weight: bold;
  margin-bottom: 0.3rem;
  color: #805068;
  line-height: 1.2;
}
.product-card .product-price{
  color: #5e4385;
  font-weight: bold;
  font-size: 1.5rem;
  position: absolute;
  bottom: 6rem; 
}
.product-card .product-price .price-value {
  color: #5e4385;
  font-weight: bold;
  font-size: 2.4rem;
}

.product-card .product-stock {
  font-size: 1rem;
  color: #a67283;
  position: absolute;
  bottom: 8.5rem; 
}

.product-card .product-quantity {
  font-size: 1.1rem;
  color: #5e4385;
}

.qty-controls {

  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin-top: 0.5rem;
}
.qty-controls button {
  width: 3rem;
  height: 3rem;
  border-radius: 0.8rem;
  border: none;
  background-color: #5e4385;
  color: #fff;
  font-size: 1.2rem;
  font-weight: bold;
  cursor: pointer;
}
.product-card.out-of-stock {
  background-color: #DAD6DF; 
  box-shadow: 1px 10px 25px #C8C8C8;
}


/* KARTA KOSZYKA – WYSUWANA Z DOŁU */
.cart-bar {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: #5e4385;
  border-top-left-radius: 45px;
  border-top-right-radius: 45px;
  transition: height 0.3s ease;
  z-index: 999;
  overflow: hidden;

  /* Ustawiamy kolumnowy układ: handle u góry, body w środku, footer na dole */
  display: flex;
  flex-direction: column;
}

/* collapsed: widoczny tylko pasek handle */
.cart-bar.collapsed {
  height: 19vh;
  box-shadow: 1px 1px 30px rgba(0, 0, 0, 0.25);
}

/* expanded: pełna wysokość, widać zawartość koszyka */
.cart-bar.expanded {
  height: 50vh;
  box-shadow: 1px 1px 30px rgba(0, 0, 0, 0.25);
}

/* Pasek "uchwyt" (strzałka i tytuł) */
.cart-handle {
  height: 70px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  padding-right: 1.5rem;
}
.cart-collapsed-row {
  display: flex;
  width: 90%;
  color: #fff;
  font-size: 1.1rem;
  align-items: baseline;
  justify-content: space-between;
  white-space: nowrap;
}
.cart-collapsed-left {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem; /* odstęp między ikoną a napisem */
  align-items: baseline;
}

/* Prawa część – cena + "zł" */
.cart-collapsed-right {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem; /* odstęp między liczbą a "zł" */
  align-items: baseline;
}

.pay-btn-container {
  /* wyśrodkowanie przycisku */
  display: flex;
  justify-content: center;
  width: 100%;
}
.arrow-container {
  text-align: center;
  /* Dodaj np.: */
  margin-top: 35px; 
}
.cart-arrow{
  display: inline-block;
  font-size: 1.2rem;
  transition: transform 0.3s;

}
.cart-bar.expanded .cart-arrow {
  transform: rotate(180deg); /* odwróć strzałkę */
}

.cart-title {
  font-weight: bold;
  font-size: 1.2rem;
  color: #fec1c2;

  padding-left: 0.4rem;
  padding-right: 1.2rem;
}
.cart-price {
  font-weight: bold;
  font-size: 2.5rem;
  padding-right: 6px;
}
.currency {
  font-size: 1.4rem;
  font-weight: bold;
}

/* Treść koszyka */
.cart-body {
  flex: 1; 
  padding: 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  color: #fff;
  overflow-y: hidden;
}
.cart-body p {
  margin: 0;
  font-size: 1.1rem;
  color: #fff;
}
.cart-body button {
  color: #fec1c2;
  border: none;
  padding: 0.3rem 1.3rem;
  align-self: center;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1.7rem;
  font-weight: bold;
}
/* Lista produktów w jednej linii */
.cart-items-list {
  list-style: none;
  padding: 0;
  max-height: 9rem;
  overflow-y: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
  padding-top: 0.7rem;
}
.cart-items-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
  font-size: 1rem;
  margin: 0;
}
.cart-item-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;   /* np. */
  font-size: 1rem;
}

/* Ilość */
.cart-item-quantity {
  width: 50px;       /* lub auto */
  font-weight: bold; /* wyróżnienie */
  text-align: left;  /* np. */
  color: #b9afc5;
  padding-left: 2rem;
  font-size: 1.2rem;
}

/* Nazwa */
.cart-item-name {
  flex: 1;           /* wypełnia środek */
  margin: 0 1rem;    /* odstępy */
  text-align: left;
  font-size: 1.2rem; /* np. */
  white-space: nowrap;
overflow: hidden;
}

/* Cena */
.cart-item-price {
  width: 60px;       /* np. */
  text-align: right; 
  margin-right: 0.5rem;
  font-size: 1.2rem; /* np. */
white-space: nowrap;
}

/* Ikona kosza */
.cart-item-remove {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.2rem;
  
}


.cart-body-instructions {
  padding-top: 1rem;
  align-items: baseline;
overflow: hidden;
}
.circle-step {
  display: inline-block;      /* by można było nadać wymiary */
  vertical-align: middle;
  width: 0.7rem;              /* średnica kółka */
  height: 0.7rem;    
  text-align: center;         /* tekst wycentrowany w poziomie */
  border-radius: 50%;         /* okrągłe rogi -> kółko */
  
  /* Kolor obramowania i tekstu, dopasuj do projektu */
  border: 1px solid #fec1c2;  
  color: #fec1c2;
  
  /* Ewentualnie odstęp od reszty tekstu */
  font-size: 0.4rem;
  align-items: baseline;
}


/* Instrukcje płatności */
.cart-body-instructions p {
  margin: 0.3rem 0;
  font-size: 0.9rem;
  color: #fec1c2;
  padding-left: 2rem;
  padding-right: 2rem;
white-space: nowrap;
}

/* Stopka (z jednym przyciskiem) – stała wysokość np. 60px */
.cart-footer {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Przycisk Zapłacone (jedyny) */
.cart-pay-btn {
  background-color: #fec1c2;
  color: #815169;
  border: none;
  border-radius: 12px;
  padding: 0.8rem 5rem;
  cursor: pointer;
  font-weight: bold;
  font-size: 1.4rem;
  box-shadow: 1px 1px 30px #4d366d;
  margin-bottom: 1.5rem;
}
.cart-pay-btn:disabled {
  background-color: #b9afc5;
  color: #8e8598;
  cursor: not-allowed;
}
/* Lista w koszyku */
#cart-items-list p {
  margin: 0.2rem 0;
  font-size: 0.9rem;
}

.products-row {
  display: flex;
  /* Nie zawijaj wierszy, chcemy jedną linię poziomą */
  flex-wrap: nowrap;

  /* Poziome przewijanie */
  overflow-x: auto;

  /* Scroll snap – zatrzymuje się na kolejnej karcie */
  /*scroll-snap-type: x mandatory;
  scroll-snap-stop: always;*/

  /* Odstępy między kartami (opcjonalnie) */

  /* Jeśli chcesz, by wypełniało całą szerokość panelu */
  width: 100%;
  height: 55vh;
  /* Odsunięcie zawartości od krawędzi */
  padding: 2rem;
  padding-top: 85px;
  margin-left: 0.5rem;
  
}
.products-row::after {
  content: '';
  flex: 0 0 5rem;   /* Szerokość pustego miejsca */
  scroll-snap-align: none; /* Nie chcemy, żeby snapowało do tego elementu */
}

/* Każda karta produktu */
.product-card {
  /* Scroll snap wyrównuje środek karty do środka widoku */
  /*scroll-snap-align: center;*/

  /* Żeby jednorazowo widać było ~80% karty i 20% kolejnej */
  flex: 0 0 75%; 

  /* Domyślna transform i opacity (pomniejszona, półprzezroczysta)
     initProductCarousel() powiększy tę kartę, która jest najbliżej środka */
  transform: scale(0.8);
  opacity: 0.5;
  transition: transform 0.3s, opacity 0.3s;

  /* Styl wizualny (kolor, zaokrąglenia, cienie, itp.) */
  background-color: #fec1c2;
  border-radius: 2rem;
  margin: 0 auto;
  z-index: 1;
  /* Reszta stylu (np. padding) według Twoich upodobań */
}

.payment-success-screen {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background-color: #5E4385; /* fioletowe tło */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999; /* nad wszystkim */
  text-align: center;
  color: #fec1c2; /* jasny róż tekst */
}
.note {
  max-width: 22.5px;
  margin-bottom: 1rem;
}

.payment-success-screen.hidden {
  display: none;
}

.payment-success-content {
  max-width: 300px; /* lub inna szerokość */
  margin: 0 auto;
}

.payment-success-content h2 {
  font-size: 1.2rem;
  margin-bottom: 2rem;
  color: #fff;
  font-weight: 100;
  letter-spacing: 0.15rem;
}
.payment-success-logo {
  width: 204px; /* Twój logoCandyShop, np. */
  margin-bottom: 6rem;
}
.checkmark {
  display: flex;
  max-width: 140px;
  margin: 0 auto;
  padding-bottom: 2rem;
}
.payment-success-content h1 {
  font-size: 2rem;
  margin-bottom: 12rem;
  line-height: 1.3;
}
.countdown-btn {
  position: absolute;
  background: none;
  border: 2px solid #fff;
  color: #fff;
  padding: 1.2rem 4.5rem;
  border-radius: 12px;
  font-size: 1.4rem;
  font-weight: bold;
  white-space: nowrap;
  bottom: 2.5rem;
}


/* MEDIA QUERIES - WIDOK MOBILNY */
@media (max-width: 450px) {
  .categories-panel {
    width: 60px;
  }
  .categories-panel li {
    font-size: 18px;
  }
  .product-card {
    min-width: 140px;
  }
  .cart-bar.expanded {
    height: 50vh;
  }
}

#cart-quantity, #cart-price {
  display: none;
}
@media (max-width: 390px) {
  .cart-item-name {
    font-size: 1.2rem;
  }
  .cart-body-instructions p {
    font-size: 0.8rem;
  }
  .cart-body button {
    padding: 0.2rem 1.3rem;
  }
  .qty-controls {
    bottom: 1.2rem;
  }
  .categories-panel {
    width: 55px;
  }
  .product-card .product-price .price-value {
    font-size: 2.2rem;
  }
  .product-card .product-name {
    font-size: 1.3rem;
  }
}
@media (max-width: 375px) {
.cart-bar.collapsed {
  height: 24vh;
}	
  .cart-bar.expanded {
    height: 55vh; 
  }
  .cart-body {
    padding: 0.7rem;
  }
  /*.cart-pay-btn {
    padding: 0.6rem 3rem;
    font-size: 1.1rem;
    border-radius: 8px;
  }*/
  * {
    font-size: 0.9rem;
  }
  .header-bg {
    margin-top: -4rem;
  }
  .header-overlay {
    max-width: 9rem;
    top: 7rem;
  }
  .products-row {
    padding-top: 65px;
  }
  .product-card .product-name {
    font-size: 1.3rem;
  }
  .product-card .product-stock {
    bottom: 9rem;
  }
  .product-card .product-name {
    line-height: 1.1rem;
  }
  .product-card .product-image {
    max-width: 10rem;
    top: -65px;
  }
  .payment-success-logo {
    max-width: 150px;
    margin-bottom: 4rem;
  }
  .checkmark {
    max-width: 120px;
  }
  .payment-success-content h1 {
    font-size: 1.8rem;
    margin-bottom: 8rem;
  }
  .categories-panel {
    width: 55px;
  }
  .product-card .product-price .price-value {
    font-size: 2.2rem;
  }
  .cart-price {
    font-size: 2.2rem;
  }
  .cart-handle {
    height: 0;
  }
  .categories-panel li {
    margin: 0;
    font-size: 16px;
  }
  .arrow-icon-img {
    width: 17px;
  }
}
@media (max-height: 580px) and (max-width: 375px) {
.cart-pay-btn {
    padding: 0.5rem 3rem;
    font-size: 1.1rem;
    border-radius: 8px;
  }
.products-row {
    padding-top: 4rem;
  }
.product-card .product-price {
    bottom: 5rem;
  }
.product-card .product-stock {
    bottom: 7rem;
  }
.categories-panel li {
    padding: 0.6rem 1.6rem; 
	font-size: 14px
  }
.product-card .product-name {
    padding-top: 3rem;
	font-size: 1.1rem;
  }
  .product-card .product-image {
    max-width: 8rem;
    top: -60px;
  }  
  .product-card .product-price .price-value {
	  font-size: 2rem;
	}
	.cart-bar.collapsed {
		height: 20vh;
	}
}
@media (max-height: 850px) and (min-height: 701px) {
.categories-panel li {
  padding: 1rem 1.2rem;
}	
  }
  
@media screen and (max-height: 700px) and (min-height: 651px) and (min-width: 390px) {
  .categories-panel li {
    font-size: 16px;
    padding: 0.5rem 1.2rem;
  }
  .header-bg {
    margin-top: -3.5rem;
  }
  .header-overlay {
    max-width: 9.5rem;
    top: 55%;
  }
  .qty-controls {
    bottom: 1rem;
    
  }
  .product-card .product-price {
    bottom: 5rem;
  }  
  .product-card {
    padding-left: 1.6rem;
  }
  .product-card .product-stock {
    bottom: 7.5rem;
    font-size: 0.9rem;
  }
  .product-card .product-image {
    max-width: 160px;
  }	  
  .product-card .product-name {
    padding-top: 3rem;
    font-size: 1.4rem;
  }	  
  .product-card .product-price .price-value {
    font-size: 2.2rem;
  }
  .cart-price {
    font-size: 2rem;
  }
  .cart-body {
    padding: 0.6rem;
  }	  
  .cart-handle {
    height: 60px;
  }	  
  } 

@media screen and (max-height: 650px) and (min-width: 390px) {
  .categories-panel li {
    font-size: 16px;
    padding: 0.5rem 1.2rem;
  }
  .header-bg {
    margin-top: -4rem;
  }
  .header-overlay {
    max-width: 8.5rem;
    top: 57%;
  }
  .qty-controls {
    bottom: 1rem;
    
  }
  .product-card .product-price {
    bottom: 5rem;
  }  
  .product-card {
    padding-left: 1.6rem;
  }
  .product-card .product-stock {
    bottom: 7.5rem;
    font-size: 0.9rem;
  }
  .product-card .product-image {
    max-width: 140px;
  }	  
  .product-card .product-name {
    padding-top: 3rem;
    font-size: 1.1rem;
  }	  
  .product-card .product-price .price-value {
    font-size: 2.2rem;
  }
  .cart-price {
    font-size: 2rem;
  }
  .cart-body {
    padding: 0.6rem;
  }	  
  .cart-handle {
    height: 60px;
  }	  
	.cart-bar.collapsed {
		height: 22vh;
	}
	.cart-pay-btn {
		padding: 0.5rem 4rem;
	}
	.cart-arrow {
		font-size: 0;
	}
	.cart-body-instructions {
		padding-top: 0.5rem;
	}
	.cart-body-instructions p {
		font-size: 0.6rem;
	}
	.cart-item-quantity {
		font-size: 1rem;
	}
	.cart-item-name {
		font-size: 1rem;
	}
	.cart-item-price {
		font-size: 1rem;
	}
	.cart-body button {
		font-size: 1.4rem;
	}
  } 

@media screen and (min-width: 1000px) {
	.categories-panel li {
		padding: 0.8rem 2.2rem;
	}
	.products-row {
		margin-left: 6.5rem;
	}
	.categories-panel {
		box-shadow: 130px 20px 30px #fdf1f2;
	}
	.cart-body {
		padding-left: 3.8rem;
		padding-right: 3.8rem;
	}
	.cart-bar.collapsed {
		height: 22vh;
	}
	.cart-pay-btn {
		margin-bottom: 3.5rem;
	}
}
@media screen and (min-width: 750px) and (max-width: 999px) {
	.categories-panel {
		padding: 8rem 3rem;
		box-shadow: 50px 20px 30px #fdf1f2;
	}
	.categories-panel li {
		padding: 1.5rem 0rem;
	}
	.products-row {
		margin-left: 1.6rem;
		padding-top: 175px;
	}
	.product-card .product-name {
		padding-top: 10rem;
		font-size: 2.2rem;
	}
	.product-card .product-image {
		max-width: 330px;
		top: -160px;
	}
	.cart-body {
		padding-left: 2.5rem;
		padding-right: 2.5rem;
	}
	.cart-pay-btn {
		margin-bottom: 2.5rem;
	}
	.product-card .product-price .price-value{
		font-size: 3.5rem;
	}
	.product-card .product-stock {
		bottom: 10rem;
	}
	.cart-bar.collapsed {
		height: 18vh;
	}
}

/* --- Twoje dotychczasowe style dashboardu --- */
.dashboard,
.dashboard h1,
.dashboard h2 {
    color: #222;
    margin: 20px;
}

.dashboard .summary,
.dashboard .actions,
.dashboard table {
    margin: 20px;
}

.dashboard table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
}

.dashboard th,
.dashboard td {
    border: 1px solid #ddd;
    padding: 10px;
    text-align: left;
    color: #000;
}

.dashboard th {
    background-color: #007BFF;
    color: #fff;
}

.dashboard .actions a {
    display: inline-block;
    margin-right: 10px;
    padding: 10px 15px;
    background: #007BFF;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
}

.dashboard .actions a:hover {
    background: #0056b3;
}

/* --- Style formularzy (imitujące Bootstrap), wewnątrz .dashboard --- */

/* Kontenery formularzowe z odstępem między polami */
.dashboard .mb-3 {
    margin-bottom: 1rem;
}

/* Pola tekstowe, liczbowe itp. */
.dashboard .form-control {
    display: block;
    width: 100%;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

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

/* Etykiety formularza */
.dashboard .form-label {
    display: inline-block;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

/* Select z niestandardową strzałką */
.dashboard select.form-control {
    -webkit-appearance: none; /* usuwa domyślną strzałkę w Safari/Chrome */
    -moz-appearance: none;    /* usuwa domyślną strzałkę w Firefox */
    background: url("data:image/svg+xml,%3Csvg%20fill%3D%22%23007BFF%22%20height%3D%2212%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2212%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M7%2010l5%205%205-5z%22/%3E%3C/svg%3E") 
                no-repeat right 0.75rem center / 1rem 1rem;
    padding-right: 2rem;      /* dodatkowe miejsce na strzałkę */
}

/* Gdy select jest w focus, styl jak w polu tekstowym */
.dashboard select.form-control:focus {
    border-color: #80bdff;
    box-shadow: 0 0 0 0.2rem rgba(0,123,255,0.25);
}

/* Styl przycisków */
.dashboard .btn {
    display: inline-block;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    user-select: none;
    border: 1px solid transparent;
    padding: 0.5rem 1rem;         /* nieco większy padding */
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 0.25rem;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
                border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

/* Wyraźny styl przycisku .btn-primary */
.dashboard .btn-primary {
    color: #fff;
    background-color: #007BFF;
    border-color: #007BFF;
    box-shadow: 0 4px 9px -4px rgba(0,0,0,0.2);
}

.dashboard .btn-primary:hover {
    color: #fff;
    background-color: #0056b3;
    border-color: #0056b3;
    box-shadow: 0 4px 9px -4px rgba(0,0,0,0.3);
}