body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background: #f8f9fa;
}

h1 {
    text-align: center;
}


#gpu-list {
  min-height: 300px; /* dostosuj wysokość */
}

/* Placeholder stylu ładowania */
.loading-placeholder {
  height: 48px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading-animation 1.5s infinite;
  border-radius: 4px;
  margin: 8px 0;
}

@keyframes loading-animation {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}





.container {
    display: flex;
    flex-wrap: wrap;
    max-width: 1200px;
    margin: 0 auto;
}

.refresh-info {
    text-align: right;
    margin-top: 10px;
    font-style: italic;
    color: #666;
    font-size: 0.9em;
    text-align: center;
}

.filters {
    width: 250px;
    padding: 20px;
    background: white;
    border-right: 1px solid #ddd;
    min-height: 900px;
}

.filter-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    padding: 10px;
}

.filter-group {
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid #ddd;
    min-height: 50px;
}

.filter-vendor {
  margin-bottom: 1em;
  padding: 0.5em 0;
  border-bottom: 1px solid #ccc;
}
.filter-vendor strong {
  display: block;
  margin-bottom: 0.3em;
  font-size: 1em;
  color: #333;
}

.filters details {
  margin-bottom: 8px; /* zmniejsza odstęp między grupami kart */
}

.filters label {
    display: block;
    margin-top: 8px;
}

.filters input[type="checkbox"] {
    margin-right: 8px;
}

.vendor-toggle {
  margin-left: 10px;
  background-color: transparent;
  border: 1px solid #ccc;
  padding: 2px 6px;
  font-size: 11px;
  border-radius: 4px;
  cursor: pointer;
}

.vendor-toggle:hover {
  background-color: #f0f0f0;
}

body.dark-mode .vendor-toggle {
  border-color: #555;
  color: #ccc;
}

body.dark-mode .vendor-toggle:hover {
  background-color: #2a2a2a;
}


.sub-offer {
    background-color: #f9f9f9;
    font-size: 1em;
    color: #555;
    overflow: hidden;
	text-overflow: ellipsis;
}

.sub-offer td {
    padding-left: 4px;
    border-top: none;
}

.sub-offer td:first-child {
    border-left: 4px solid #ccc;
}

.group-toggle {
    margin-right: 8px;
    background: none;
    border: none;
    font-size: 16px;
    cursor: pointer;
    color: #333;
}

.group-subrows {
    overflow: hidden;
    transition: max-height 0.3s ease;
    max-height: 0;
    opacity: 0;
    display: block;
}

.group-subrows.open {
    max-height: 1000px; /* duży zapas */
    opacity: 1;
}
.sub-offer.hidden {
    display: none;
}
.cookie-popup {
  position: fixed;
  height: 80px;
  bottom: 20px;
  left: 20px;
  background: white;
  border: 1px solid #ccc;
  padding: 1em;
  z-index: 1000;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  border-radius: 8px;
}

.cookie-toggle {
  margin-top: 1em;
  font-size: 0.9em;
}

#welcome-screen-container {
  position: fixed; /* nie wpływa na układ */
}

/*
.offer-link[title] {
  text-decoration: line-through;
}
*/

.hidden {
  display: none;
}

.content {
    flex: 1;
    padding: 20px;
    overflow-x: auto;
}


.topbar {
  width: 100%;
  height: 52px;
  background-color: #fff;
  border-bottom: 1px solid #ddd;
  padding: 12px 16px;
  position: sticky;
  top: 0;
  z-index: 1000;
}

.topbar-inner {
  height: 100%;
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* Usuń dyamiczne paddingi, użyj stałych wartości */
  padding: 0 16px;
}

.topbar .logo a {
  font-weight: bold;
  font-size: 18px;
  color: #111;
  text-decoration: none;
}

.nav-links a {
  margin-left: 20px;
  text-decoration: none;
  color: #444;
  font-size: 14px;
}

.nav-links a:hover {
  text-decoration: underline;
}


body.dark-mode {
  background-color: #121212;
  color: #e0e0e0;
}

body.dark-mode a {
  color: #9ecbff;
}

body.dark-mode table {
  background-color: #1e1e1e;
  color: #ddd;
}

body.dark-mode th,
body.dark-mode td {
  border-color: #444;
}

body.dark-mode .filters {
  background-color: #1a1a1a;
  color: #eee;
}


body.dark-mode .topbar {
  background-color: #1c1c1c;
  border-bottom: 1px solid #333;
}

body.dark-mode .topbar .logo a,
body.dark-mode .nav-links a {
  color: #e0e0e0;
}

body.dark-mode .nav-links a:hover {
  color: #ffffff;
  text-decoration: underline;
}

footer {
  margin-top: 20px;
  padding: 10px;
  background: #f8f8f8;
  font-size: 12px;
  text-align: center;
  border-top: 1px solid #ddd;
}

body.dark-mode footer {
  background-color: #1a1a1a;
  color: #ccc;
  border-top: 1px solid #333;
}

body.dark-mode footer a {
  color: #9ecbff;
}


.theme-toggle {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: inherit;
  margin-left: 20px;
}





table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    font-size: 0.8em;
}

tr {
  height: 16px; /* stała wysokość */
}

/* Animacja sortowania */
tr.sort-animation {
  transition: transform 0.3s ease-out;
}

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

th {
    background: #007bff;
    color: white;
    cursor: pointer;
    height: 24px;
    white-space: nowrap; /* Zapobiega zawijaniu tekstu */
}

th.desc {
  background-color: #e6f7ff; /* light blue or whatever fits your style */
  font-weight: bold;
  color: #007acc; /* optional: tweak color */
}

th.asc {
  background-color: #e6f7ff; /* light blue or whatever fits your style */
  font-weight: bold;
  color: #007acc; /* optional: tweak color */
}
td a {
    color: #007bff;
    text-decoration: none;
}

td a:hover {
    text-decoration: underline;}

/* Ulepszony styl dla kolumny z nazwą karty graficznej */
/* Ulepszony styl dla kolumny z nazwą karty graficznej */
td:first-child {
  max-width: 300px; /* Dostosuj szerokość według potrzeb */
  position: relative;
  white-space: nowrap;
}

/* Zmień display: block na display: inline-block żeby lepiej wyrównać z przyciskiem rozwijania */
td:first-child a.offer-link {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  max-width: calc(100% - 20px); /* 20px to miejsce dla przycisku + */
  vertical-align: middle;
}

/* Popraw styl przycisku rozgrupowywania */
button.group-toggle {
  vertical-align: middle;
  margin-right: 4px;
  width: 16px;
  height: 16px;
  line-height: 14px;
  text-align: center;
  padding: 0;
}

/* Tooltip z pełną nazwą na hover */
td:first-child a.offer-link:hover::after {
  content: attr(title);
  position: absolute;
  left: 0;
  top: 100%;
  z-index: 1000;
  background: white;
  padding: 8px;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  white-space: normal;
  max-width: 300px;
  font-size: 0.9em;
}

/* Wsparcie dla ciemnego motywu */
body.dark-mode td:first-child a.offer-link:hover::after {
  background: #333;
  color: #eee;
}



td:nth-child(4), th:nth-child(4) {
  white-space: nowrap;
}



/* 🖥️ Dla ekranów szerokich - pełna tabela */
@media (min-width: 769px) {
    td:nth-child(1),  /* Nazwa */
    td:nth-child(2),  /* Model */
    td:nth-child(3),  /* Stan */
    td:nth-child(4),  /* Cena */
    td:nth-child(5),  /* FPS */
    td:nth-child(6),  /* Cena za FPS */
    td:nth-child(7),  /* VRAM */
    td:nth-child(8),  /* Kraj */
    td:nth-child(9) { /* Sklep */ 
        display: table-cell;
    }
}

/* 📱 Dla telefonów - przeniesienie filtrów na górę i dodanie przycisku */
@media (max-width: 768px) {
    .container {
        flex-direction: column;
    }
   
	
    .filter-toggle {
        display: block;
        width: 100%;
        text-align: left;
        background: #007bff;
        color: white;
        border: none;
    }
    
    .filters {
        width: 100%;
        padding: 10px;
        border-right: none;
        border-bottom: 1px solid #ddd;
        background: #fff;
        display: none;
    }
    
    .filters.active {
        display: block;
    }
    

   /* 
	.filter-group {
        display: block;
	} */   
	
	.filter-group {
        min-height: 100px; /* Dostosuj odpowiednio */
        overflow-y: auto; /* Dodaj scrollowanie, gdy zawartość jest większa */
	}

	.filters details {
        margin-bottom: 12px;
	}

	.filters label {
        display: block;
        margin-bottom: 6px;
        font-size: 14px;
	}
	
	
    .filter-group label {
        font-size: 12px;
        padding: 5px;
    }
    
    td:nth-child(2),  /* Model */
    td:nth-child(5),  /* FPS */
    td:nth-child(7),  /* VRAM */
    td:nth-child(8) { /* Kraj */
        display: none;
    }
    
    th:nth-child(2),
    th:nth-child(5),
    th:nth-child(7),
    th:nth-child(8) {
        display: none;
    }
    td:first-child {
        max-width: 150px; 
	}
    th, td {
        padding: 6px;
        font-size: 12px;
    }
	
    th.asc::after, th.desc::after {
            right: 4px;
            border-width: 4px;
    }
}