/* większe odstępy między kolumnami */
.color-grid { --bs-gutter-x: 2rem; }

/* --- Etykiety: trochę mniejsze i lżejsze --- */
.color-label {
  display: block;
  font-style: italic;
  color: #444;            /* ciemniejszy odcień, ale nie czarny */
  margin-bottom: .25rem;
  font-size: .9rem;       /* było ~1rem → delikatne zmniejszenie */
  font-weight: 500;       /* lekki akcent zamiast grubej czerni */
}

/* Kod HEX – bez zmian funkcjonalnych, ale odrobina kompaktu */
.color-row .form-control.color-hex {
  font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;
  flex: 0 0 auto;
  width: 9ch;
  max-width: 9ch;
  padding: .35rem .5rem;  /* minimalnie mniejsze pole */
  line-height: 1.2;
}

/* --- Picker koloru: czystszy, bez „ciężkiej” ramki --- */
.color-picker {
  -webkit-appearance: none;
  appearance: none;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 8px;
  border: 1px solid #e5e7eb;                 /* jasna, neutralna ramka */
  box-shadow: 0 0 0 1px rgba(0,0,0,.02);      /* delikatny oddech */
  background: none;                           /* bez domyślnego tła */
  cursor: pointer;
}

/* WebKit: czyści obwódki wewnętrzne i zaokrągla próbkę */
.color-picker::-webkit-color-swatch-wrapper {
  padding: 0;
  border-radius: 8px;
}
.color-picker::-webkit-color-swatch {
  border: none;
  border-radius: 6px;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.85);  /* biel widoczna przy #FFFFFF */
}

/* Firefox */
.color-picker::-moz-color-swatch {
  border: none;
  border-radius: 6px;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.85);
}

/* Hover / focus – subtelny akcent zamiast czarnych ramek */
.color-picker:hover {
  border-color: #d0d5dd;
  box-shadow: 0 0 0 3px rgba(16, 97, 255, .08);
}
.color-picker:focus {
  outline: none;
  border-color: #1061ff;
  box-shadow: 0 0 0 3px rgba(16, 97, 255, .15);
}

/* Kolumny – zostawiamy 3 na desktopie, ale niech będą trochę lżejsze optycznie */
.color-grid { --bs-gutter-x: 1.75rem; }
@media (min-width: 992px) {
  .color-grid > .col-lg-4 { padding-left: 16px; padding-right: 16px; }
  .color-grid > .col-lg-4:nth-child(3n+1),
  .color-grid > .col-lg-4:nth-child(3n+2) {
    border-right: 1px dashed #e9ecef;        /* jaśniejszy separator */
  }
}

/* Walidacja – bez „krzyczącej” czerwieni, ale czytelna */
.color-item.color-invalid .form-control,
.color-item.color-invalid .color-picker { border-color: #e03131 !important; }
.color-item.color-invalid .color-label { color: #c92a2a; }
.color-item.color-invalid .form-control::placeholder { color: #e03131; }