/* oc_forms_pro.css — unified professional skin for the New Immo / Old Immo / Airbag
   forms. Matches the desktop app (and the Decoder/Cloner pages): Segoe UI typography,
   slate palette, clean white listboxes with a flat blue selection, and a flat green
   "go" action button. Loaded LAST on each page so it re-skins both the inline styles
   (New/Old Immo) and theme.css (Airbag) without touching their layout/heights. */

:root{
  --ocf-ink:#1e293b;   --ocf-sub:#475569;    --ocf-line:#dbe1ea;
  --ocf-blue:#2563eb;  --ocf-green:#16a34a;  --ocf-green-d:#15803d;
  --ocf-font:'Segoe UI', system-ui, -apple-system, Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* ---- Typography → Segoe UI across the form (hex/VIN inputs keep their monospace) ---- */
.oc-page, .oc-selector-head, .oc-listbox, .oc-listbox option,
.oc-selected, #selected_immo, #selected_old_immo, #selected_type,
.oc-label, .oc-btn, .oc-demo, .oc-message, #targetLayer,
.oc-slim-head-title, .oc-slim-head-sub{
  font-family:var(--ocf-font) !important;
}

/* ---- Section heads (BRANDS / TYPE / ACTION) ---- */
.oc-selector-head{ color:var(--ocf-sub) !important; letter-spacing:.06em !important; }
.oc-step-icon{ color:var(--ocf-blue) !important; }

/* ---- Listboxes: clean white panels with a flat blue selection (like the app) ---- */
.oc-listbox{
  background:#ffffff !important;
  border:1px solid var(--ocf-line) !important;
  color:var(--ocf-ink) !important;
  font-family:var(--ocf-font) !important; font-size:13.5px !important;
}
.oc-listbox:focus{ border-color:#9db4e6 !important; box-shadow:0 0 0 3px rgba(37,99,235,.14) !important; }
.oc-listbox option{ color:var(--ocf-ink) !important; padding:3px 12px !important; }
.oc-listbox option:hover{ background:#eff4ff !important; }
.oc-listbox option:checked{
  background:var(--ocf-blue) !important; background-image:none !important;
  color:#ffffff !important; font-weight:600 !important;
}

/* ---- Selected chip / status line ---- */
.oc-selected #selected_immo, .oc-selected #selected_old_immo,
#selected_immo, #selected_old_immo{ color:var(--ocf-ink) !important; }
#selected_type{ font:600 14px/1.4 var(--ocf-font) !important; color:var(--ocf-ink) !important; }
.oc-chip-icon{ color:var(--ocf-blue) !important; }

/* ---- Labels ---- */
.oc-label{ color:var(--ocf-sub) !important; }
.oc-label svg{ color:#64748b !important; }

/* ---- Cards ---- */
.oc-card{ border-radius:14px !important; box-shadow:0 4px 18px rgba(15,23,42,.07) !important; }

/* ---- Primary action ("Repair dump") → flat green, like the Decoder's Start button ---- */
.oc-btn-primary{
  background:var(--ocf-green) !important; background-image:none !important;
  color:#ffffff !important; border-radius:10px !important;
  box-shadow:0 4px 12px rgba(22,163,74,.25) !important; letter-spacing:.04em !important;
}
.oc-btn-primary:hover:not(:disabled){
  background:var(--ocf-green-d) !important; background-image:none !important;
  box-shadow:0 6px 16px rgba(22,163,74,.30) !important; color:#ffffff !important;
}

/* ---- Progress bar → green to match the action ---- */
#progress-bar, .oc-progress-bar{ background:var(--ocf-green) !important; background-image:none !important; }

/* ---- Structural helpers needed by the modernized Airbag form (absent from theme.css) ---- */
.oc-actions{ display:flex; flex-direction:column; gap:14px; }
.oc-file-wrap{ flex:1; min-width:0; }
.oc-progress-card{ text-align:center; }