/**
 * dark-form.css — ciemny motyw PUBLICZNYCH formularzy
 * ---------------------------------------------------------------------------
 * Ładowany WYŁĄCZNIE na stronach:
 *   - zgloszenie.html (zgłoszenie awarii),
 *   - wspolpraca.html (zapytanie: próbki, aplikacja, współpraca).
 *
 * Panel serwisu (admin.html) celowo go NIE ładuje — gęste tabele i statusy
 * czyta się lepiej na jasnym tle.
 *
 * Paleta jest ta sama, co na stronie głównej (Industrial Luxury):
 *   tło #080808 · panele #0e0e10 · tekst #f4f4f5 / #a1a1aa · akcent #93c5fd.
 *
 * Uwaga na `!important`: klasy Tailwinda (`bg-white`, `text-slate-900`…)
 * wstrzykuje CDN już PO tym arkuszu, więc nadpisujemy je mocniej.
 * ---------------------------------------------------------------------------
 */

/* ---------------------------------------------------------------- podstawa */

html,
body {
  background-color: #080808;
  color: #d4d4d8;
  color-scheme: dark; /* natywne listy, checkboxy i pola bez białych wstawek */
}

::selection {
  background: rgba(147, 197, 253, 0.3);
  color: #ffffff;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid #93c5fd;
  outline-offset: 2px;
}

/* ------------------------------------------- powierzchnie i teksty (Tailwind) */

.bg-white {
  background-color: #0b0b0c !important;
}

.bg-slate-50 {
  background-color: #0e0e10 !important;
}

.bg-slate-100 {
  background-color: #080808 !important;
}

.bg-emerald-50 {
  background-color: rgba(16, 185, 129, 0.1) !important;
}

.border-slate-200 {
  border-color: rgba(255, 255, 255, 0.1) !important;
}

.text-slate-900,
.text-slate-800 {
  color: #f4f4f5 !important;
}

.text-slate-700,
.text-slate-600 {
  color: #d4d4d8 !important;
}

.text-slate-500,
.text-slate-300 {
  color: #a1a1aa !important;
}

.text-slate-400 {
  color: #71717a !important;
}

.text-brand-600 {
  color: #93c5fd !important;
}

.text-emerald-900 {
  color: #6ee7b7 !important;
}

.text-emerald-700 {
  color: #34d399 !important;
}

.ring-emerald-200 {
  --tw-ring-color: rgba(16, 185, 129, 0.35) !important;
}

.bg-slate-50.p-3,
.bg-slate-50.rounded-lg {
  background-color: #111113 !important;
}

/* --------------------------------------------------------------------- karty */

.ab-card {
  background: #0e0e10;
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 24px 48px -28px rgba(0, 0, 0, 0.9);
}

.ab-card--info {
  background: linear-gradient(180deg, #121214, #0d0d0f);
}

.ab-card__title {
  color: #f4f4f5;
}

.ab-list {
  color: #a1a1aa;
}

.ab-list li::before {
  color: #52525b;
}

/* ------------------------------------------------------- pola i etykiety */

.ab-fieldset {
  border-color: rgba(255, 255, 255, 0.08);
}

.ab-legend {
  color: #f4f4f5;
}

.ab-legend__num {
  background: #f4f4f5;
  color: #080808;
}

.ab-label {
  color: #d4d4d8;
}

.ab-req {
  color: #f87171;
}

.ab-input {
  background: #0f0f11;
  border-color: #3f3f46;
  color: #f4f4f5;
}

.ab-input::placeholder {
  color: #71717a;
}

.ab-input:focus {
  border-color: #93c5fd;
  box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.18);
}

.ab-input:disabled {
  background: #17171a;
  color: #71717a;
}

.ab-input option {
  background: #0f0f11;
  color: #f4f4f5;
}

.ab-checkbox {
  accent-color: #93c5fd;
}

.ab-error {
  color: #fca5a5;
}

.ab-field-error .ab-label {
  color: #fca5a5;
}

/* ------------------------------------------------------------------- przyciski */

.ab-btn--primary {
  background: #f4f4f5;
  color: #080808;
  box-shadow: 0 10px 24px -14px rgba(0, 0, 0, 0.9);
}

.ab-btn--primary:hover:not(:disabled) {
  background: #d4d4d8;
}

.ab-btn--primary:disabled {
  background: #3f3f46;
  color: #a1a1aa;
}

.ab-btn--ghost {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.2);
  color: #e4e4e7;
}

.ab-btn--ghost:hover:not(:disabled) {
  border-color: rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.05);
}

.ab-link {
  color: #93c5fd;
}

.ab-link:hover {
  color: #bfdbfe;
}

/* -------------------------------------------------------------------- alerty */

.ab-alert {
  border-radius: 10px;
}

.ab-alert--ok {
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.35);
  color: #6ee7b7;
}

.ab-alert--warn {
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.35);
  color: #fcd34d;
}

.ab-alert--info {
  background: rgba(59, 130, 246, 0.12);
  border-color: rgba(59, 130, 246, 0.35);
  color: #bfdbfe;
}

.ab-alert--danger {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.35);
  color: #fca5a5;
}

.ab-errorbar {
  background: #7f1d1d;
  border-color: #b91c1c;
  color: #fecaca;
}

.ab-errorbar__hint {
  color: #fecaca;
}

.ab-fatal {
  background: #7f1d1d;
  color: #fecaca;
}

/* --------------------------------------------------------------- załączniki */

.ab-dropzone {
  background: #0f0f11;
  border-color: #3f3f46;
  color: #a1a1aa;
}

.ab-dropzone:hover {
  border-color: #71717a;
  background: #141416;
}

.ab-photo {
  background: #141416;
  border-color: rgba(255, 255, 255, 0.08);
}

.ab-photo__thumb {
  background: #0b0b0c;
}

.ab-photo__name {
  color: #e4e4e7;
}

.ab-photo__size,
.ab-photo__counter {
  color: #a1a1aa;
}

.ab-photo__saved {
  color: #6ee7b7;
}

.ab-photo__remove {
  color: #a1a1aa;
}

.ab-photo__remove:hover {
  color: #fca5a5;
}

/* -------------------------------------------------------- ekran potwierdzenia */

.ab-success__icon {
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.35);
  color: #6ee7b7;
}

.ab-ref {
  color: #f4f4f5;
  background: #111113;
  border-color: rgba(255, 255, 255, 0.2);
}

.ab-success__row {
  border-bottom-color: rgba(255, 255, 255, 0.06);
}

.ab-success__row span {
  color: #a1a1aa;
}

/* Wartości w podsumowaniu: bez tego zostają ciemne na ciemnym tle */
.ab-success__row strong {
  color: #f4f4f5;
}

/* --------------------------------------------------------------------- modale */

.ab-modal-backdrop {
  background: rgba(0, 0, 0, 0.75);
}

.ab-modal {
  background: #141416;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.9);
}

.ab-modal__title {
  color: #f4f4f5;
}

.ab-modal__text {
  color: #a1a1aa;
}

.ab-modal__close {
  color: #a1a1aa;
}

.ab-modal__close:hover {
  color: #f4f4f5;
}

/* --------------------------------------------------------------- drobiazgi */

.ab-header {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

footer {
  background: #050505;
  border-top-color: rgba(255, 255, 255, 0.08);
  color: #a1a1aa;
}

code {
  background: rgba(255, 255, 255, 0.06);
  color: #e4e4e7;
  padding: 0.1em 0.35em;
  border-radius: 4px;
}

/* szczegóły strefy upuszczania plików — w oryginale ciemny tekst na jasnym tle */
.ab-dropzone__title {
  color: #f4f4f5;
}

.ab-dropzone__text {
  color: #a1a1aa;
}

.ab-dropzone__hint {
  color: #71717a;
}

.ab-dropzone__counter {
  color: #93c5fd;
}

.ab-dropzone__icon {
  color: #93c5fd;
}

/* pasek postępu przetwarzania zdjęć */
.ab-photos-progress,
.ab-progress {
  background: rgba(255, 255, 255, 0.08);
}

.ab-progress__bar {
  background: #f4f4f5;
}

/* ------------------------------------------- nagłówek jak na stronie głównej */

.ab-header {
  background: #080808;
  background-image: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: none;
}

/* Logo: biały kwadrat z czarnym skrótem (na stronie głównej jest biały akcent) */
.ab-logo {
  background: #f4f4f5;
  background-image: none;
  color: #080808;
}

/* Podtytuł w nagłówku: szary zamiast firmowego błękitu */
.text-brand-200 {
  color: #a1a1aa !important;
}

/* --------------------------------------------- czytelne checkboxy na ciemnym */

.ab-checkbox {
  appearance: none;
  -webkit-appearance: none;
  width: 1.15rem;
  height: 1.15rem;
  flex: none;
  border: 1px solid #52525b;
  border-radius: 4px;
  background: #0f0f11;
  display: inline-grid;
  place-content: center;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}

.ab-checkbox::before {
  content: "";
  width: 0.65rem;
  height: 0.65rem;
  transform: scale(0);
  transition: transform 0.12s ease;
  background: #080808;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}

.ab-checkbox:checked {
  background: #f4f4f5;
  border-color: #f4f4f5;
}

.ab-checkbox:checked::before {
  transform: scale(1);
}

.ab-checkbox:focus-visible {
  outline: 2px solid #93c5fd;
  outline-offset: 2px;
}