/* css/main.css */

:root {
  /* odcienie kamienia */
  --stone-dark:  #2f2f2f;
  --stone-mid:   #4a4a4a;
  --stone-base:  #383838;
  --stone-light: #5f5f5f;
  --tile-size:   512px;
}

body {
  /* zapasowy kolor tła */
  background-color: var(--stone-base);

  /* SVG-kafelek 64×64 z małymi kwadracikami w rogach */
  background-image: url("/img/background2.png");

  /* powtarzaj kafel co --tile-size */
  background-size: var(--tile-size) var(--tile-size);
  background-repeat: repeat;
  background-position: center;
}



.container {
    max-width: 960px;
    margin: 0 auto;
}

.controls {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.controls input,
.controls select {
    padding: 8px;
    font-size: 1rem;
    flex: 1;
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
}

.product-card {
    background: #fff;
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    text-align: center;
}

.product-image {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    margin-bottom: 10px;
}

.product-card h2 {
    font-size: 1.1rem;
    margin: 0 0 10px;
}

.product-card p {
    margin: 5px 0;
}

/* uniwersalny, ciemny styl dla wszystkich disabled */
button:disabled,
.btn:disabled,
button[disabled],
.btn[disabled],
input:disabled,
textarea:disabled,
select:disabled {
  background-color: rgba(0, 0, 0, 0.5) !important;   /* ciemniejsze tło */
  color: rgba(255, 255, 255, 0.4) !important;         /* bardziej stonowany tekst */
  border-color: rgba(255, 255, 255, 0.15) !important; /* delikatna obwódka */
  cursor: not-allowed !important;
  opacity: 1 !important;                              /* bez dodatkowej transparentności */
}

/* nadpisanie zielonego tła dla .btn-success:disabled */
.btn-success:disabled,
.btn-success[disabled] {
  background-color: rgba(0, 0, 0, 0.5) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  color: rgba(255, 255, 255, 0.4) !important;
}

/* mała kolorowana kropka obok statusu */
.dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 5px;
}

/* --- Recent Orders hover overlay --- */

#recentOrders {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  column-gap: 0.25rem;  /* poziomo */
  row-gap:    0.5rem;   /* pionowo */
}

#recentOrders .order-item {
  position: relative;   /* konieczne, by .info liczyło offsety względem tego elementu */
}
#recentOrders .order-item img {
  display: block;
  border-radius: 4px;  /* lekko zaokrąglona główka */
}
#recentOrders .order-item .info {
  display: none;
  position: absolute;
  bottom: 100%;         /* wyżej niż obrazek */
  left: 50%;
  transform: translateX(-40%) translateY(-8px); /* lekko podnieś, żeby tooltip nie przyklejał się do krawędzi */
  background: rgba(0,0,0,0.8);
  color: #fff;
  padding: 4px 6px;
  border-radius: 4px;
  white-space: nowrap;
  font-size: 0.8rem;
  z-index: 100;         /* pewność, że będzie nad innymi elementami */
}
#recentOrders .order-item:hover .info {
  display: block;
}

/* ciasny interliniarz i mniejsze marginesy tylko w kartach .status-card */
.status-card .card-body p {
  margin: 0.2rem 0;
  line-height: 1.2;
}


/* --- Podium dla top wydawców (wyśrodkowanie + większe odstępy) --- */
#topSpenders {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-items: center;    /* wyśrodkuj poziomo każdy element w swojej kolumnie */
  align-items: end;         /* trzy stopnie wypchnięte różnie w pionie */
  column-gap: 0.5rem;         /* większy odstęp między kolumnami */
  padding: 0.2rem 0;          /* więcej miejsca nad i pod podium */
  list-style: none;         /* usuń numerację, jeśli to <ol> */
  margin: 0;
}

/* stopnie podium: pozycjonowanie */
#topSpenders .podium-item:nth-child(1) { align-self: start; }   /* złoty – najwyżej */
#topSpenders .podium-item:nth-child(2) { align-self: center; }  /* srebrny – po środku */
#topSpenders .podium-item:nth-child(3) { align-self: end; }     /* brązowy – na dole */

/* kwadratowe główki z ramką i marginesami pionowymi */
#topSpenders .podium-item img {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  display: block;
  margin: 0.75rem 0;       /* większy odstęp nad i pod obrazkiem */
}

/* ramki kolorowe */
#topSpenders .podium-item:nth-child(1) img { border: 3px solid gold; }
#topSpenders .podium-item:nth-child(2) img { border: 3px solid silver; }
#topSpenders .podium-item:nth-child(3) img { border: 3px solid peru; }

/* info tylko na hover */
#topSpenders .podium-item {
  position: relative;
}
#topSpenders .podium-item .info {
  display: none;
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  background: rgba(0,0,0,0.8);
  color: #fff;
  padding: 4px 6px;
  border-radius: 4px;
  white-space: nowrap;
  font-size: 0.8rem;
  z-index: 100;
}
#topSpenders .podium-item:hover .info {
  display: block;
}

html {
  /* rezerwuj miejsce na scrollbar tylko tam, gdzie się pojawia */
  scrollbar-gutter: stable;
}
body.modal-open {
  padding-right: 0 !important;
}