html {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

*,
::after,
::before {
  box-sizing: inherit;
}

BODY {
  margin: 20px;
  font-family: monospace, "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings: "wdth" 100;
}

body::before {
  transform: rotate(-20deg);
  background-image: url(kbIndex.svg);
  background-size: 130px;
  width: 300%;
  height: 300%;
  position: fixed;
  top: -50%;
  left: -50%;
  opacity: 5%;
  content: "";
  z-index: -1;
  background-repeat: repeat;
}

.file-table {
  min-width: 50%;
  border-collapse: collapse;
}

.file-table td,
.file-table th {
  padding: 6px 10px;
  text-align: left;
}

.file-table tr {
  border-bottom: 1px solid #ddd;
}

.file-table th {
  background-color: #f2f2f2;
}

.file-table tr:nth-child(even) {
  background-color: #eaeaea4a;
}

.file-table tr:nth-child(odd) {
  background-color: #ffffff4a;
}

.breadcrumbs a,
a {
  text-decoration: none;
}

a {
  border-bottom: calc(1em / 15) dotted;
}

.file-table .checkbox,
.file-table .icon {
  width: 1em;
  padding: 6px 5px;
}

.file-table .icon img {
  width: 20px;
  height: 22px;
}

.file-table td.checkbox {
  padding: 0;
}

.file-table th.checkbox {
  padding: 0 5px 0 0;
}

.file-table .checkbox label {
  display: block;
  width: 100%;
  height: 100%;
  cursor: pointer;
  padding: 9px 0 9px 7px;
}

.file-table.checkbox label:hover {
  background-color: #d0d0d0;
}

.file-table .size {
  text-align: right;
}

.breadcrumbs {
  margin-bottom: 10px;
  font-family: Arial, sans-serif;
}

.breadcrumbs a {
  color: #0073aa;
}

.download-buttons {
  margin-top: 10px;
}

.download-buttons button {
  margin-right: 5px;
  padding: 5px 10px;
  font-size: 14px;
}

.btn-danger {
  background-color: #ff8080;
}

.hidden {
  display: none !important;
}

footer {
  border-top: 1px solid #ddd;
  margin-top: 20px;
}

th.asc::before {
  content: "↑ ";
  opacity: 0.8;
}

th.desc::before {
  content: "↓ ";
  opacity: 0.8;
}

TH[onclick] {
  color: navy;
  cursor: pointer;
}

th.asc,
th.desc {
  background-color: #d0d0d0;
}

#status-box {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

#status-content {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  text-align: center;
  width: 300px;
}

#status-message {
  margin: 15px 0;
}

#status-progress {
  width: 100%;
  height: 100%;
}

#status-details {
  margin-top: 10px;
  font-size: 12px;
  color: #555;
}

.file-table tbody tr:has(input[name="selected[]"]:checked) {
  background-color: #f6f8b4;
  transition: background-color 0.2s ease;
}

.file-table tbody tr:has(input[name="selected[]"]:checked) td {
  color: #165dbb;
  border-bottom-color: #d2e3fc;
}

.progress-container {
  width: 100%;
  height: 24px;
  background-color: #eee;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
  margin: 10px 0;
}

.progress-bar-fill {
  height: 100%;
  background-color: #2196f3;
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-size: 40px 40px;
  transition: width 0.4s ease;
  animation: move-stripes 1s linear infinite;
}

@keyframes move-stripes {
  0% {
    background-position: 40px 0;
  }

  to {
    background-position: 0 0;
  }
}

.file-table {
  /* Zapobiega zaznaczaniu tekstu podczas shift-click */
  user-select: none;
  -webkit-user-select: none;
}

.file-table td a {
  /* Ale pozwól na wybieranie tekstu w nazwach plików, jeśli ktoś chce skopiować nazwę */
  user-select: text;
  -webkit-user-select: text;
}

/* --- DARK MODE --- */
@media (prefers-color-scheme: dark) {
  /* To polecenie mówi przeglądarce, by użyła ciemnych wersji systemowych kontrolek */
  html {
    color-scheme: dark;
  }

  body {
    background-color: #121212;
    color: #e0e0e0;
  }

  /* Watermark - logotyp w tle */
  body::before {
    filter: invert(1); /* Jeśli logo jest czarne, to je odwróci na białe */
  }

  /* Tabela plików */
  .file-table tr {
    border-bottom: 1px solid #333;
  }

  .file-table th {
    background-color: #1e1e1e;
    color: #ffffff;
  }

  .file-table tr:nth-child(even) {
    background-color: #1a1a1aaa;
  }

  .file-table tr:nth-child(odd) {
    background-color: #121212aa;
  }

  /* Linki i Breadcrumbs */
  a,
  .breadcrumbs a {
    color: #64b5f6;
    border-bottom-color: rgba(100, 181, 246, 0.4);
  }

  /* Kolory dla poszczególnych kolumn */
  TH[onclick] {
    color: #90caf9;
  }

  th.asc,
  th.desc {
    background-color: #333;
  }

  /* Stan zaznaczenia (Selection) */
  .file-table tbody tr:has(input[name="selected[]"]:checked) {
    background-color: #2c3e50 !important; /* Ciemny błękit/granat dla zaznaczenia */
  }

  .file-table tbody tr:has(input[name="selected[]"]:checked) td {
    color: #ffffff;
    border-bottom-color: #3e5871;
  }

  input[type="checkbox"] {
    /* Kolor "haczyka" i tła po zaznaczeniu */
    accent-color: #64b5f6;
    /* Niektóre przeglądarki potrzebują tego dla pełnego efektu */
    cursor: pointer;
  }
  /* Hover na checkboxach */
  .file-table .checkbox label:hover {
    background-color: #333;
  }

  /* Przyciski */
  .download-buttons button {
    background-color: #333;
    color: #fff;
    border: 1px solid #444;
  }

  .btn-danger {
    background-color: #8c3333 !important;
    border-color: #a04040 !important;
  }

  /* Overlay statusu (ZIP progress) */
  #status-box {
    background-color: rgba(0, 0, 0, 0.8);
  }

  #status-content {
    background-color: #252525;
    color: #fff;
    border: 1px solid #444;
  }

  .progress-container {
    background-color: #333;
  }

  #status-details {
    color: #aaa;
  }

  /* Stopka */
  footer {
    border-top: 1px solid #333;
  }
}

#filter:not(:placeholder-shown) {
  background-color: #fff9c4; /* Light yellow */
  border-color: #fbc02d; /* Darker yellow border */
  outline: none;
}
/* Show the clear button only when there is text */
#filter::-webkit-search-cancel-button {
  cursor: pointer;
}
/* Styling the placeholder for the filter input */
#filter::placeholder {
  text-align:right;
  opacity: 0.4; /* Standard opacity (0.0 to 1.0) */
  color: #666; /* Optional: define a base color */
  transition: opacity 0.3s; /* Smooth transition when focusing */
}
/* Optional: Make it slightly more visible when the user clicks the field */
#filter:focus::placeholder {
  opacity: 0.6;
}