/* Domyślny wygląd (czarny tekst, szara ramka) */
select {
  /* border-radius: 6px; */
  border: 1px solid #b0b0b0;
  background: white;
  padding: 3px 8px;
  box-shadow: 0 1px 3px rgba(52,115,176,0.08);
  font-size: 13px;
  transition: border-color 0.2s;
  width: 100%;
  box-sizing: border-box;
  min-height: 28px;
  color: #000000; /* Ustawia domyślny kolor tekstu na czarny */
}

/* Styl dla pola, gdy jest 'invalid' (ma 'required' i wybrane value="") */
select:invalid {
  color: #999999; /* Szary tekst dla "Choose..." */
  /* border-color: #CC0000; Czerwona ramka */
  border: 1px solid red;
}

/* Ustawia domyślny kolor dla opcji na liście */
select option {
  color: #000000; /* Czarny dla normalnych opcji */
}

/* Ustawia szary kolor dla opcji 'disabled' (czyli placeholderów) */
select option:disabled {
  color: #999999; /* Jasnoszary */
}

select:focus {
  border-color: #3473B0;
  outline: none;
}

/* Ustawia domyślny kolor dla opcji na liście */
select option {
  color: #000000; /* Czarny dla normalnych opcji */
}

/* Ustawia szary kolor dla opcji 'disabled' (czyli placeholderów) */
select option:disabled {
  color: #999999; /* Jasnoszary */
}

.main-table .button-slot {
  display: flex;
  justify-content: flex-start !important;
  /* align-items: center; */
}

.download-ies-button {
  display: block;
  margin: 18px 0 0 0;
}
.download-ies-button {
  background: linear-gradient(to right, #782E72, #423F94, #3473B0);
  color: white;
  font-size: 16px;
  font-weight: bold;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.2s ease;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
  height: auto;
}

.download-ies-button:hover {
  background: linear-gradient(to right, #285a8e, #423F94, #3473B0);
}

.gradient-line {
    width: 100%;
    height: 10px;
    background: linear-gradient(to right, #782E72, #423F94, #3473B0);
    margin: 20px 0 5px 0;
}

/* Stylizacja obrazka nagłówka */
.header-picture {
  max-width: 100%; /* Obrazek nigdy nie będzie szerszy niż kontener (komórka tabeli) */
  height: auto; /* Zachowuje proporcje obrazka podczas skalowania */
  display: block; /* Usuwa ewentualne dodatkowe odstępy pod obrazkiem */
  margin-top: 0px; /* Dodaje odstęp od gradientu (możesz zmienić tę wartość) */
}


/* Loading pulse style */
.loading-pulse {
  color: #3473B0;
  font-style: italic;
  font-weight: 500;
  background: transparent;
  animation: pulse-blue 1.2s infinite;
}

@keyframes pulse-blue {
  0% { opacity: 1; }
  50% { opacity: 0.4; }
  100% { opacity: 1; }
}

.main-table {
  width: 100%;
  background: white;
  /* background: linear-gradient(
    to top,
    #d2d3d5 50%,
    #e5e6e8 70%,
    white 90%
  ); */
}

.display-elem-name {
  font-size: 80%;
  display: block; /* Pozwala na ustawienie szerokości, paddingu i wysokości */
  width: 100%;
  padding: 3px 8px; /* Taki sam padding jak w select */
  min-height: 28px; /* Taka sama min-wysokość jak w select */
  border: 1px solid #b0b0b0; /* Ramka identyczna jak w select */
  background: #ffffff; /* Białe tło */
  box-sizing: border-box; /* Kluczowe dla width: 100% z paddingiem */
  /* font-style: italic; */
  color: grey
}

.main-table td:first-child label,
.display-elem-label,
.list-slot-label,
.length-label,
.email-input-label {
  font-size: 80%;
  color: black;
}
.list-slot,
/* .name-slot, */
.input-slot,
.mail-slot,
.button-slot {
  margin-bottom: 18px;
  width: 100%;
  box-sizing: border-box;
}
.length-optimals-row, .optimals-label {
  font-size: 80%;
}
/* Reset i tło */
html, body {
  height: 100%;
  margin: 0;
  background-color: white;

  font-family: Arial, sans-serif;
}

/* Centrowanie głównego panelu */
body {
  min-height: 100vh;
}

/* Sam panel aplikacji */
#app {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  box-sizing: border-box;
  margin-left: 20vw;
  margin-right: 20vw;
  margin-top: 40px;
}

/* === SLOT PRZYCISKU — DOMYŚLNIE UKRYTY === */
.button-slot,
.slot-hidden,
[hidden],
[aria-hidden="true"] {
  display: none !important;
}

#slots-panel, .slots-panel {
  width: 100%;
  box-sizing: border-box;
  margin-left: auto;
  margin-right: auto;
  width: 60vw;
  min-width: 420px;
  max-width: 1200px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
  background: white;
  /* : linear-gradient(
    to top,
    #d2d3d5 50%,
    #e5e6e8 70%,
    white 90%
  ); */
}
 .button-slot,
 .slot-hidden,
 [hidden],
 [aria-hidden="true"] {
   display: none !important;
 }

/* === POKAŻ, GDY JS ZDEJMUJE BLOKADĘ === */
/* 1) Klasy używane w Twoim projekcie (slot bez .slot-hidden) */
.button-slot:not(.slot-hidden) {
  display: flex !important;
  justify-content: center;
}

/* 2) Dodatkowe aliasy na wypadek innych przełączników w JS */
#slot-download-ies.is-visible,
#slot-download-ies.active,
#slot-download-ies.show {
  display: flex !important;
  justify-content: center;
}

.email-input-container {
    align-self: flex-start;
    width: 100%;
    box-sizing: border-box;
    margin-left: 0;
}

/* Stylizacja lewej kolumny z etykietami */
#row-luminaire td:first-child,
#row-profile td:first-child,
#row-optics-down td:first-child,
#row-optics-up td:first-child,
#row-led-down td:first-child,
#row-led-up td:first-child,
#row-length td:first-child,
#row-cctcri-down td:first-child,
#row-cctcri-up td:first-child,
#row-output-down td:first-child,
#row-output-up td:first-child {
  background: linear-gradient(
    to top,
    white 30%,
    #e5e6e8 70%,
    #d2d3d5 90%
  );
  width: 25%; /* Ustawia stałą szerokość dla tej kolumnyc */
  vertical-align: top; /* Wyrównuje etykiety do góry */
  padding: 0px 15px 10px 15px; /* Dodaje odstęp wokół etykiet */
  box-sizing: border-box; /* Wlicza padding w szerokość 40% */
}

/* Specjalna, szersza kolumna dla e-mail */
/* <--- POPRAWKA (Odkomentowany blok) --- */
#row-mail td:first-child {
  background: linear-gradient(
    to top,
    white 30%,
    #e5e6e8 70%,
    #d2d3d5 90%
  );
  width: 25%; /* Zachowuje 40% szerokości */
  vertical-align: top;
  padding: 0 15px 5px 15px;
  box-sizing: border-box;
}

/* Stylizacja prawej kolumny (dla spójnych odstępów) */
#row-luminaire td:last-child,
#row-profile td:last-child,
#row-optics-down td:last-child,
#row-optics-up td:last-child,
#row-led-down td:last-child,
#row-led-up td:last-child,
#row-length td:last-child,
#row-cctcri-down td:last-child,
#row-cctcri-up td:last-child,
#row-output-down td:last-child,
#row-output-up td:last-child,
#row-mail td:last-child,
#row-download td:last-child {
  vertical-align: top; /* Wyrównuje kontrolki do góry */
  padding: 0 15px 5px 15px; /* Dodaje taki sam odstęp jak w lewej kolumnie */
  box-sizing: border-box; 
}

/* Układ wiersza Length (Input + Info) */
.length-row-container {
  display: flex;
  align-items: flex-start; /* Wyrównuje do góry */
  gap: 15px; /* Odstęp między inputem a ramką optimals */
}

/* Stylizacja pola input w wierszu Length */
.length-input {
  /* Style skopiowane z select dla spójności */
  border: 1px solid #b0b0b0;
  background: #ffffff;
  padding: 3px 8px;
  box-shadow: 0 1px 3px rgba(52,115,176,0.08);
  font-size: 13px;
  width: 100%; /* Domyślnie 100% flex-item */
  box-sizing: border-box;
  min-height: 28px;
  
  /* Ustawienie w flex */
  flex: 1; /* Input zajmie 1 część dostępnego miejsca */
  min-width: 100px; /* Minimalna szerokość dla inputa */
}

/* Stylizacja ramki dla "Optimals" */
.length-optimals-framed {
  /* Style skopiowane z .display-elem-name */
  font-size: 80%;
  display: block; 
  width: 100%;
  padding: 3px 8px; 
  min-height: 28px; 
  border: 1px solid #b0b0b0; 
  background: #ffffff; 
  box-sizing: border-box; 
  
  /* Ustawienie w flex */
  flex: 2; /* Ramka optimals zajmie 2 części miejsca (szersza) */
  font-style: italic;
}


/* Stylizacja pola input dla e-mail */
#row-mail td:last-child input {
  /* Style skopiowane z select/length-input dla spójności */
  border: 1px solid #b0b0b0;
  background: #ffffff;
  padding: 3px 8px;
  box-shadow: 0 1px 3px rgba(52,115,176,0.08);
  font-size: 13px;
  width: 100%; /* <--- Kluczowa linia: 100% szerokości */
  box-sizing: border-box;
  min-height: 28px;
}

/* Kursywa dla wartości optimal */
#optimals-lower,
#optimals-upper {
  font-style: italic;
}

/* Czerwona ramka dla pola email, gdy jest puste lub nieprawidłowe */
#row-mail td:last-child input:invalid {
  border: 1px solid red;
}

/* Czerwona ramka dla błędnego inputa */
.input-error {
  border: 1px solid red !important; /* Używamy !important, aby nadpisać inne style */
}

/* Czerwony tekst dla błędnych wartości */
.text-error {
  color: red !important;
}
 

/* --- Style dla podsumowania komponentów --- */

/* Styl dla komórki podsumowania */
#row-components-summary td {
  padding: 10px 15px 5px 15px; 
  background: #ffffff; 
}

/* 1. KONTENER (rodzic) - układa bloki W POZIOMIE */
.component-container {
  display: flex; /* <--- Kluczowe: włącza flexbox */
  flex-direction: row; /* <--- Ustawia kierunek na POZIOMY (domyślny) */
  flex-wrap: wrap; 
  gap: 20px 25px; 
  justify-content: center; /* Centruje bloki w rzędzie */
}

/* 2. ELEMENT (dziecko) - układa zawartość W PIONIE */
.component-item {
  display: flex;
  flex-direction: column; /* <--- Kluczowe: ustawia kierunek na PIONOWY */
  align-items: center; 
  gap: 4px; 
}

/* 3. Style dla etykiet */
.component-icon {
  width: 50px; 
  height: 50px;
  object-fit: contain; 
}

.component-type-label {
  font-size: 10px; 
  font-weight: bold;
  color: #777; 
  text-transform: uppercase;
}

.component-label {
  font-size: 13px;
  font-weight: normal;
  color: #333;
}