/* ============================================================
   HSP Classics & Motorsports — Retro-Override ("Windows 95 / Web 1.0")
   Globales Stylesheet, NACH Bootstrap geladen → überschreibt das alte Design.
   Grau · eckig · 3D-Bevel-Kanten · Schatten hinter Knöpfen.
   ============================================================ */

:root,
[data-bs-theme="dark"],
[data-bs-theme="light"]{
  /* Bootstrap-Variablen auf das Retro-Schema umbiegen */
  --bs-body-bg:#c0c0c0 !important;
  --bs-body-color:#000000 !important;
  --bs-body-font-family:"Times New Roman", Times, serif !important;
  --bs-primary:#000080 !important;
  --bs-primary-rgb:0,0,128 !important;
  --bs-border-radius:0 !important;
  --bs-border-radius-sm:0 !important;
  --bs-border-radius-lg:0 !important;
  --bs-link-color:#0000ee !important;
  --bs-link-hover-color:#0000aa !important;
  --bs-card-bg:#c0c0c0 !important;
  --bs-tertiary-bg:#c0c0c0 !important;
  --bs-secondary-bg:#c0c0c0 !important;

  --silver:#c0c0c0; --hi:#dfdfdf; --grey:#808080; --shadow:#0a0a0a;
  --navy:#000080; --navy2:#1084d0;
  --raise: inset -1px -1px var(--shadow), inset 1px 1px var(--hi), inset -2px -2px var(--grey), inset 2px 2px #fff;
  --sink:  inset -1px -1px #fff, inset 1px 1px var(--shadow), inset -2px -2px var(--hi), inset 2px 2px var(--grey);
  --field: inset -1px -1px #fff, inset 1px 1px var(--grey), inset -2px -2px var(--hi), inset 2px 2px var(--shadow);
  --drop: 3px 3px 0 rgba(0,0,0,.35);

  --f-ui:"MS Sans Serif", Tahoma, Geneva, "Segoe UI", sans-serif;
  --f-text:"Times New Roman", Times, serif;
}

/* Alles eckig */
*, *::before, *::after{ border-radius:0 !important }

body{
  background:#c0c0c0 !important;
  color:#000 !important;
  font-family:var(--f-text) !important;
  background-image:none !important;
}

a{ color:#0000ee !important; }
a:visited{ color:#551a8b !important; }

/* ---------------- Navbar ---------------- */
.navbar, .hsp-navbar{
  background:#c0c0c0 !important;
  background-image:none !important;
  box-shadow:var(--raise) !important;
  border-bottom:1px solid var(--grey) !important;
  height:auto !important; min-height:0 !important;
  padding:.35rem .6rem !important;
}
.navbar-brand, .hsp-brand, .hsp-brand-text,
.navbar-text, .hsp-user-info, .hsp-user-info strong,
.navbar .nav-link, .navbar-nav .nav-link, .hsp-logout-link{
  color:#000 !important; text-shadow:none !important;
  font-family:var(--f-ui) !important;
}
.hsp-brand, .navbar-brand{ font-weight:bold !important; }
.navbar-nav .nav-link{ padding:.3rem .7rem !important; font-size:.82rem !important; }
.navbar-nav .nav-link:hover{ background:#dfdfdf !important; box-shadow:var(--raise) !important; }
.hsp-logo{ box-shadow:var(--raise) !important; }

/* ---------------- Typografie ---------------- */
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3{
  font-family:var(--f-text) !important; color:#000080 !important; font-weight:bold !important;
}
.text-muted, .text-secondary{ color:#404040 !important; }
.text-white, .text-light{ color:#000 !important; }

/* ---------------- Karten / Container-Boxen ---------------- */
.card, .calculator-card, .panel, .box, .list-group,
.accordion, .accordion-item, .well, .content-card{
  background:#c0c0c0 !important;
  border:none !important;
  box-shadow:var(--raise), 2px 2px 5px rgba(0,0,0,.28) !important;
  color:#000 !important;
}
.card-header, .accordion-button{
  background:linear-gradient(90deg, var(--navy), var(--navy2)) !important;
  color:#fff !important; font-family:var(--f-ui) !important; font-weight:bold !important;
  border:none !important; box-shadow:none !important;
}
.card-header *{ color:#fff !important; }
.card-body, .card-footer{ background:transparent !important; color:#000 !important; }

/* ---------------- Knöpfe (mit Schatten dahinter) ---------------- */
.btn, button, input[type="submit"], input[type="button"]{
  font-family:var(--f-ui) !important; font-size:.8rem !important; color:#000 !important;
  background:#c0c0c0 !important; background-image:none !important;
  border:none !important;
  box-shadow:var(--raise), var(--drop) !important;
  padding:.4rem 1rem !important; text-shadow:none !important;
}
.btn:hover, button:hover{ background:#c8c8c8 !important; color:#000 !important; }
.btn:active, button:active, .btn.active{ box-shadow:var(--sink) !important; transform:translate(2px,2px); }
.btn:focus{ outline:1px dotted #000 !important; outline-offset:-5px; box-shadow:var(--raise), var(--drop) !important; }
.btn-primary{ color:#000 !important; font-weight:bold !important; }
.btn-success{ color:#006000 !important; font-weight:bold !important; }
.btn-danger, .btn-outline-danger{ color:#800000 !important; font-weight:bold !important; }
.btn-warning{ color:#806000 !important; }
.btn-sm{ padding:.25rem .6rem !important; font-size:.72rem !important; }
.btn-lg{ padding:.55rem 1.3rem !important; font-size:.9rem !important; }
.btn-close{ box-shadow:var(--raise) !important; background:#c0c0c0 !important; opacity:1 !important; padding:.4rem !important; }

/* ---------------- Formularfelder (versenkt) ---------------- */
.form-control, .form-select, input, select, textarea,
.input-group-text{
  background:#fff !important; color:#000 !important;
  border:none !important; box-shadow:var(--field) !important;
  font-family:var(--f-ui) !important; font-size:.85rem !important;
}
.form-control:focus, .form-select:focus, input:focus, textarea:focus, select:focus{
  outline:1px dotted #000 !important; outline-offset:-3px; box-shadow:var(--field) !important;
}
/* Retro-Checkbox: weiße versenkte Box, beim Anwählen ein X */
input[type="checkbox"], .form-check-input[type="checkbox"]{
  -webkit-appearance:none !important; appearance:none !important;
  width:15px !important; height:15px !important; min-width:15px; padding:0 !important; margin-right:5px;
  background:#fff !important; cursor:pointer; position:relative; vertical-align:-3px;
  box-shadow:var(--field) !important; border:none !important;
}
input[type="checkbox"]:checked::after, .form-check-input[type="checkbox"]:checked::after{
  content:"\2715"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:bold; color:#000;
}
input[type="radio"]{ accent-color:#000080; box-shadow:none !important; }
.form-label, label{ font-family:var(--f-ui) !important; font-size:.78rem !important; color:#000 !important; font-weight:bold !important; }

/* ===== Reparaturrechner: Auswahl sichtbar & Lesbarkeit ===== */
.class-btn.active, .partner-btn.active, .inspection-toggle.active, .discount-toggle.active,
.payment-method.active, .repair-location.active, .towing-option.active, .part-item.selected{
  background:#000080 !important; background-image:none !important; color:#fff !important; box-shadow:var(--sink) !important;
}
.class-btn.active *, .partner-btn.active *, .inspection-toggle.active *,
.discount-toggle.active *, .part-item.selected *{ color:#fff !important; }
/* Kategorie-Überschriften: nicht mehr zu hell */
.parts-category h4, .parts-category h5{
  background:#000080 !important; color:#fff !important; padding:.32rem .6rem !important; margin:0 0 8px !important;
  font-family:var(--f-ui) !important; font-size:.85rem !important; font-weight:bold !important; box-shadow:var(--raise) !important;
}
/* Modale (Win95-Dialog) */
.modal-title{ font-family:var(--f-ui) !important; font-size:.9rem !important; font-weight:bold !important; color:#fff !important; }
.modal-header{ padding:.3rem .4rem .3rem .6rem !important; align-items:center !important; }

/* ---------------- Tabellen (Listenansicht) ---------------- */
.table, table{ background:#fff !important; color:#000 !important; box-shadow:var(--field) !important; }
.table > :not(caption) > * > *{ background:transparent !important; color:#000 !important; box-shadow:none !important; }
.table thead th, table thead th, thead.table-dark th{
  background:#c0c0c0 !important; color:#000 !important; box-shadow:var(--raise) !important;
  font-family:var(--f-ui) !important; font-weight:normal !important; border:none !important;
}
.table tbody tr:hover, table tbody tr:hover{ background:#000080 !important; color:#fff !important; }
.table tbody tr:hover *{ color:#fff !important; }
.table-striped > tbody > tr:nth-of-type(odd) > *{ background:#f0f0f0 !important; }

/* ---------------- Badges ---------------- */
.badge{
  font-family:var(--f-ui) !important; font-weight:bold !important;
  background:#c0c0c0 !important; color:#404040 !important; box-shadow:var(--raise) !important;
  padding:.2rem .45rem !important;
}
.badge.bg-success, .bg-success{ color:#006000 !important; }
.badge.bg-danger, .bg-danger{ color:#800000 !important; }
.badge.bg-warning, .bg-warning{ color:#806000 !important; }
.badge.bg-primary, .bg-primary{ color:#000080 !important; }
.bg-success, .bg-danger, .bg-warning, .bg-primary, .bg-info, .bg-secondary, .bg-dark, .bg-light{
  background:#c0c0c0 !important;
}

/* ---------------- Alerts (Meldungsboxen) ---------------- */
.alert{
  background:#c0c0c0 !important; color:#000 !important; border:none !important;
  box-shadow:var(--raise), var(--drop) !important; border-left:4px solid var(--navy) !important;
  font-family:var(--f-ui) !important; font-size:.85rem !important;
}
.alert-success{ border-left-color:#006000 !important; }
.alert-danger{ border-left-color:#800000 !important; }
.alert-warning{ border-left-color:#806000 !important; }

/* ---------------- Modale (Dialogfenster) ---------------- */
.modal-content{ background:#c0c0c0 !important; box-shadow:var(--raise), 5px 5px 14px rgba(0,0,0,.5) !important; border:none !important; padding:3px !important; }
.modal-header{ background:linear-gradient(90deg, var(--navy), var(--navy2)) !important; color:#fff !important; border:none !important; }
.modal-header *{ color:#fff !important; }
.modal-body, .modal-footer{ background:transparent !important; color:#000 !important; border:none !important; }

/* ---------------- Tabs / Pills ---------------- */
.nav-tabs .nav-link, .nav-pills .nav-link{
  background:#c0c0c0 !important; color:#000 !important; box-shadow:var(--raise) !important;
  font-family:var(--f-ui) !important; border:none !important; margin-right:2px;
}
.nav-tabs .nav-link.active, .nav-pills .nav-link.active{ box-shadow:var(--sink) !important; font-weight:bold !important; }

/* ---------------- Diverses ---------------- */
.dropdown-menu{ background:#c0c0c0 !important; box-shadow:var(--raise), var(--drop) !important; border:none !important; }
.dropdown-item{ color:#000 !important; font-family:var(--f-ui) !important; }
.dropdown-item:hover{ background:#000080 !important; color:#fff !important; }
.progress{ box-shadow:var(--field) !important; background:#fff !important; }
.progress-bar{ background:#000080 !important; }
.list-group-item{ background:#c0c0c0 !important; color:#000 !important; border-color:var(--grey) !important; }
hr{ border-top:1px solid var(--grey) !important; opacity:1; }

/* GTA/Brown-Gradient-Hintergründe der alten Seite neutralisieren */
[style*="gradient"], [style*="linear-gradient"]{ }
.bg-gradient{ background-image:none !important; }

/* ===== Zu helle / weiße Container-Flächen auf das Retro-Grau ziehen =====
   (Eingabefelder, Tabellen, iframes & Quittungen bleiben weiß) */
.bg-white, .bg-light, .bg-body, .bg-body-tertiary, .bg-body-secondary,
.card, .card-body, .card-footer, .calculator-card, .content-card, .well, .box,
.accordion-body, .tab-content, .tab-pane, .list-group,
div[style*="background:#fff"], div[style*="background: #fff"],
div[style*="background:#ffffff"], div[style*="background: #ffffff"],
div[style*="background:#FFF"], div[style*="background:white"], div[style*="background: white"],
div[style*="background-color:#fff"], div[style*="background-color: #fff"],
div[style*="background-color:#ffffff"], div[style*="background-color:white"],
div[style*="rgba(255,255,255"], div[style*="rgba(255, 255, 255"],
section[style*="background:#fff"], section[style*="background:white"], section[style*="rgba(255,255,255"]{
    background:#c0c0c0 !important; background-image:none !important;
}
/* Felder/Tabellen/Fensterinhalt wieder klar weiß (höhere Spezifität) */
input.form-control, textarea.form-control, select.form-select,
input[type="text"], input[type="number"], input[type="password"], input[type="email"], input[type="search"], textarea,
table.table, .win-body, .win-body iframe, .receipt, .quittung{
    background:#fff !important;
}

/* ===== Inspektions-Knopf: grau, Kästchen ausblenden ===== */
.inspection-toggle{ background:#c0c0c0 !important; box-shadow:var(--raise) !important; border:none !important; cursor:pointer; }
.inspection-toggle .form-check, .inspection-toggle .form-switch, .inspection-toggle .form-check-input{ display:none !important; }

/* ===== Teile-Kategorie & Teile: nicht weiß, sondern grau ===== */
.parts-category{ background:#c0c0c0 !important; box-shadow:var(--raise) !important; border:none !important; }
.part-item{ background:#c0c0c0 !important; box-shadow:var(--raise) !important; border:none !important; }
.part-item.selected{ background:#000080 !important; color:#fff !important; box-shadow:var(--sink) !important; }
.part-item.selected *{ color:#fff !important; }

/* ===== Modale: alle (auch eigene wie hu-modal-content) entfärben ===== */
[class*="modal-content"], [class*="modal-body"], [class*="modal-panel"],
.hu-modal-content, .sale-modal-content, .modal-content-custom, .receipt-modal-body, .modal-body{
    background:#c0c0c0 !important; background-image:none !important; color:#000 !important;
}
[class*="modal-content"] .text-muted, [class*="modal-body"] .text-muted{ color:#404040 !important; }

/* ===== Quittungen IMMER weiß rendern (nicht grau) ===== */
#actualReceipt, #actualReceipt *,
.receipt-container, .receipt-container *,
.receipt-paper, .receipt-paper *{
    background-color:#fff !important; color:#000 !important;
}
#actualReceipt, .receipt-container, .receipt-paper{ background-image:none !important; }