/* === Dark/Light theme tokens (ako već postoje u index.css, ovaj blok možeš preskočiti) === */
:root {
  --bg: #0b0e13;
  --bg-soft: #11161d;
  --panel: rgba(255, 255, 255, 0.06);
  --panel-border: rgba(255, 255, 255, 0.12);
  --text: #e9eef5;
  --muted: #b6c1ce;
  --brand: #6aa9ff;
  --brand-strong: #3b82f6;
  --focus: 0 0 0 3px rgba(59, 130, 246, 0.45);
  --radius-lg: 20px;
  --radius-sm: 12px;
  --shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.35);
  --shadow-sm: 0 6px 18px rgba(0, 0, 0, 0.25);
  color-scheme: dark light;
}
:root[data-theme="light"] {
  --bg: #f7f9fc;
  --bg-soft: #eef3fb;
  --panel: rgba(0, 0, 0, 0.04);
  --panel-border: rgba(0, 0, 0, 0.08);
  --text: #0d1117;
  --muted: #4b5563;
  --brand: #2f6df6;
  --brand-strong: #1f57e7;
  --shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.12);
  --shadow-sm: 0 6px 18px rgba(0, 0, 0, 0.08);
}

/* === Page background and text === */
body {
  background: radial-gradient(
      1200px 800px at 15% 10%,
      color-mix(in oklab, var(--brand) 25%, transparent),
      transparent 60%
    ),
    radial-gradient(
      1000px 700px at 85% 90%,
      color-mix(in oklab, var(--brand-strong) 25%, transparent),
      transparent 60%
    ),
    var(--bg);
  color: var(--text);
}

/* === Cards (form + preview) — skini bijelu podlogu === */
.page-create .form-card,
.page-create .preview-card {
  background: linear-gradient(180deg, var(--panel), transparent 140%);
  border-color: var(--panel-border);
  box-shadow: var(--shadow-lg);
  color: var(--text);
  border-radius: var(--radius-lg);
}

/* === Naslovi, tekstovi, mutirani === */
.form-card .form-label {
  color: var(--text);
}
.small-muted,
#msg {
  color: var(--muted) !important;
}

/* Prebij fiksni "black" iz ranijeg bloka */
#cardTitle,
#prevName {
  color: var(--text) !important;
}
/* img ne treba color; osiguraj da ništa ne forsira crno */
img {
  color: inherit !important;
}

/* === Inputs & selects — tamni, blago plavi, kao na drugoj stranici === */
.form-card .form-control,
.form-card .form-select,
.form-card textarea {
  background: color-mix(in oklab, var(--bg-soft) 85%, transparent);
  color: var(--text);
  border-color: var(--panel-border);
  border-radius: var(--radius-sm);
  box-shadow: none;
}
.form-card .form-control::placeholder,
.form-card textarea::placeholder {
  color: color-mix(in oklab, var(--muted) 70%, transparent);
}
.form-card .form-control:focus,
.form-card .form-select:focus,
.form-card textarea:focus {
  border-color: color-mix(in oklab, var(--brand) 70%, white 30%);
  box-shadow: var(--focus);
  outline: none;
}

/* iOS/Chrome autofill na tamnoj podlozi */
.form-card .form-control:-webkit-autofill {
  -webkit-text-fill-color: var(--text);
  transition: background-color 9999s ease-in-out 0s;
  box-shadow: 0 0 0px 1000px
    color-mix(in oklab, var(--bg-soft) 85%, transparent) inset;
}

/* Date, file i select gumbi tonirani */
#dateFrom,
#dateTo,
#surface,
#format,
#tType,
#photoFile,
input[type="file"]::file-selector-button {
  color: var(--muted);
  background: color-mix(in oklab, var(--bg-soft) 85%, transparent);
  border-color: var(--panel-border);
}

/* === Badge u previewu === */
.badge-fee {
  background: color-mix(in oklab, var(--panel) 70%, transparent);
  color: var(--text);
  border: 1px solid var(--panel-border);
}

/* === Buttons === */
.btn-dark {
  background: linear-gradient(135deg, var(--brand), var(--brand-strong));
  border: 1px solid
    color-mix(in oklab, var(--brand-strong) 40%, var(--panel-border));
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.btn-dark:hover {
  filter: brightness(1.03);
}

/* === Preview sticky panel === */
.preview-wrap {
  position: sticky;
  top: 84px;
}

/* === Focus stanja i validacija ostaju dosljedni === */
.is-invalid,
.is-invalid:focus {
  border-color: color-mix(
    in oklab,
    var(--danger) 65%,
    var(--panel-border)
  ) !important;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--danger) 25%, transparent) !important;
}

/* === Sekundarni detalji === */
.section-divider {
  border-top: 1px dashed var(--panel-border);
}
.input-hint {
  color: var(--muted);
}

/* Fallback header u previewu dok slika nije odabrana */
.preview-card .ratio {
  overflow: hidden;
  border-top-left-radius: var(--radius-lg);
  border-top-right-radius: var(--radius-lg);
}

.preview-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 1.25rem;
  text-align: center;
  font-weight: 800;
  font-size: clamp(18px, 3.2vw, 28px);
  color: var(--text);
  background: linear-gradient(180deg, var(--panel), transparent 140%);
  border-bottom: 1px solid var(--panel-border);
}

/* === Select options (bolje kontrastne na nekim browserima) === */
.form-select option {
  background: var(--bg-soft);
  color: var(--text);
}

/* === Nav i header (ako su previše svijetli) — opcionalno === */
.site-header,
.site-header .nav-link {
  color: var(--text);
}
.site-header .nav-link:hover {
  opacity: 0.9;
}
.site-header {
  margin-bottom: 20px;
}

.card-body {
  margin-top: 20px;
}

.modal-header,
.modal-body {
  color: black !important;
}