/* ==========================================================================
   MeineWerkstatt – Custom Theme
   Primary colour: #145c18 (forest green)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CSS custom property overrides (Bootstrap 5 tokens)
   -------------------------------------------------------------------------- */
:root,
[data-bs-theme="light"] {
  --bs-primary:            #145c18;
  --bs-primary-rgb:        20, 92, 24;
  --bs-link-color:         #145c18;
  --bs-link-hover-color:   #0d3d10;

  /* Tonal palette derived from #145c18 */
  --mw-primary-light:      #1e8a24;
  --mw-primary-dark:       #0d3d10;
  --mw-primary-subtle:     #d4edda;
  --mw-primary-emphasis:   #0a2e0c;

  /* Backgrounds */
  --bs-body-bg:            #f8f9fa;
  --bs-body-color:         #212529;
  --mw-card-bg:            #ffffff;
  --mw-navbar-bg:          #145c18;
}

[data-bs-theme="dark"] {
  --bs-primary:            #2db84f;
  --bs-primary-rgb:        45, 184, 79;
  --bs-link-color:         #2db84f;
  --bs-link-hover-color:   #56d97a;

  --mw-primary-light:      #2db84f;
  --mw-primary-dark:       #1e8a24;
  --mw-primary-subtle:     #0a2e0c;
  --mw-primary-emphasis:   #56d97a;

  --bs-body-bg:            #141414;
  --bs-body-color:         #e0e0e0;
  --mw-card-bg:            #1e1e1e;
  --mw-navbar-bg:          #0d3d10;
}

/* --------------------------------------------------------------------------
   2. Bootstrap component overrides
   -------------------------------------------------------------------------- */

/* -- Buttons ---------------------------------------------------------------- */
.btn-primary {
  --bs-btn-bg:            var(--bs-primary);
  --bs-btn-border-color:  var(--bs-primary);
  --bs-btn-hover-bg:      var(--mw-primary-light);
  --bs-btn-hover-border-color: var(--mw-primary-light);
  --bs-btn-active-bg:     var(--mw-primary-dark);
  --bs-btn-color:         #fff;
  --bs-btn-hover-color:   #fff;
  --bs-btn-active-color:  #fff;
}

.btn-outline-primary {
  --bs-btn-color:              var(--bs-primary);
  --bs-btn-border-color:       var(--bs-primary);
  --bs-btn-hover-bg:           var(--bs-primary);
  --bs-btn-hover-border-color: var(--bs-primary);
  --bs-btn-hover-color:        #fff;
  --bs-btn-active-bg:          var(--mw-primary-dark);
}

/* -- Links ------------------------------------------------------------------ */
a {
  color: var(--bs-link-color);
}
a:hover {
  color: var(--bs-link-hover-color);
}

/* -- Navbar ----------------------------------------------------------------- */
.bg-primary {
  background-color: var(--mw-navbar-bg) !important;
}

.navbar-dark .navbar-brand,
.navbar-dark .nav-link,
.navbar-dark .navbar-toggler-icon {
  color: rgba(255,255,255,0.95);
}

.navbar-dark .nav-link:hover,
.navbar-dark .nav-link.active {
  color: #fff;
  background: rgba(255,255,255,0.12);
  border-radius: 6px;
}

/* -- Cards ------------------------------------------------------------------ */
.card {
  border-radius: 10px;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}

[data-bs-theme="dark"] .card {
  background-color: var(--mw-card-bg);
  border-color: rgba(255,255,255,.08);
}

/* Primary-tinted card header accent */
.card-header {
  border-bottom: 2px solid rgba(var(--bs-primary-rgb), .15);
}

/* -- Badges ----------------------------------------------------------------- */
.bg-primary {
  background-color: var(--bs-primary) !important;
}

.bg-primary-subtle {
  background-color: var(--mw-primary-subtle) !important;
}

.text-primary {
  color: var(--bs-primary) !important;
}

/* -- Form controls ---------------------------------------------------------- */
.form-control:focus,
.form-select:focus {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .2);
}

/* -- Progress bar ----------------------------------------------------------- */
.progress-bar.bg-primary {
  background-color: var(--bs-primary) !important;
}

/* -- Table hover ------------------------------------------------------------ */
.table-hover > tbody > tr:hover > td,
.table-hover > tbody > tr:hover > th {
  background-color: rgba(var(--bs-primary-rgb), .06);
}

/* -- Alerts / badges -------------------------------------------------------- */
.alert-info {
  --bs-alert-bg:           #d4edda;
  --bs-alert-border-color: #c3e6cb;
  --bs-alert-color:        var(--mw-primary-emphasis);
}

[data-bs-theme="dark"] .alert-info {
  --bs-alert-bg:           #0a2e0c;
  --bs-alert-border-color: #1a5c1d;
  --bs-alert-color:        #a3e0a8;
}

/* --------------------------------------------------------------------------
   3. Vehicle card thumbnail
   -------------------------------------------------------------------------- */
.vehicle-card {
  transition: box-shadow .2s, transform .15s;
}

.vehicle-card:hover {
  box-shadow: 0 4px 16px rgba(var(--bs-primary-rgb), .18);
  transform: translateY(-2px);
}

.vehicle-thumb {
  width: 100%;
  max-height: 180px;
  object-fit: cover;
  background: rgba(var(--bs-primary-rgb), .04);
  border-radius: 10px 10px 0 0;
}

[data-bs-theme="dark"] .vehicle-thumb {
  background: rgba(255,255,255,.04);
}

.vehicle-thumb-placeholder {
  width: 100%;
  height: 120px;
  background: rgba(var(--bs-primary-rgb), .05);
  border-radius: 10px 10px 0 0;
}

/* --------------------------------------------------------------------------
   4. Autocomplete dropdown
   -------------------------------------------------------------------------- */
#articleSuggestions .list-group-item-action:hover {
  background: rgba(var(--bs-primary-rgb), .1);
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   5. Footer
   -------------------------------------------------------------------------- */
.footer {
  background: transparent;
  margin-top: 2rem;
}

/* --------------------------------------------------------------------------
   6. Responsive tweaks
   -------------------------------------------------------------------------- */
@media (max-width: 576px) {
  .card-body {
    padding: 1rem;
  }
  h4 {
    font-size: 1.15rem;
  }
}

/* --------------------------------------------------------------------------
   7. Dark mode specifics
   -------------------------------------------------------------------------- */
[data-bs-theme="dark"] .table-light > * {
  background-color: #2a2a2a;
  color: #e0e0e0;
}

[data-bs-theme="dark"] .table-secondary > * {
  background-color: rgba(255,255,255,.03);
}

[data-bs-theme="dark"] .bg-body-secondary {
  background-color: #252525 !important;
}

[data-bs-theme="dark"] .card-header {
  background-color: #252525;
}

[data-bs-theme="dark"] .list-group-item {
  background-color: var(--mw-card-bg);
  border-color: rgba(255,255,255,.08);
  color: var(--bs-body-color);
}

[data-bs-theme="dark"] .list-group-item-action:hover {
  background-color: rgba(255,255,255,.05);
}

[data-bs-theme="dark"] #articleSuggestions {
  background-color: #252525;
  border-color: rgba(255,255,255,.15);
}

/* --------------------------------------------------------------------------
   8. Utility
   -------------------------------------------------------------------------- */
.cursor-pointer { cursor: pointer; }

/* Slim scrollbar in suggestions */
#articleSuggestions::-webkit-scrollbar { width: 6px; }
#articleSuggestions::-webkit-scrollbar-thumb {
  background: rgba(var(--bs-primary-rgb), .4);
  border-radius: 3px;
}

/* --------------------------------------------------------------------------
   9. Navbar search
   -------------------------------------------------------------------------- */
#navSearch::placeholder           { color: rgba(255,255,255,.55); }
#navSearch                        { color: #fff !important; }
#navSearch:focus                  { background: rgba(255,255,255,.2) !important;
                                    box-shadow: none; outline: none; }
#navSearchDropdown .dropdown-item { white-space: normal; }
#navSearchDropdown .dropdown-item:hover,
#navSearchDropdown .dropdown-item:focus { background: var(--mw-primary-subtle); }

[data-bs-theme="dark"] #navSearch::placeholder { color: rgba(255,255,255,.4); }
[data-bs-theme="dark"] #navSearchDropdown      { background-color: #252525;
                                                  border-color: rgba(255,255,255,.15); }
[data-bs-theme="dark"] #navSearchDropdown .dropdown-item       { color: #e0e0e0; }
[data-bs-theme="dark"] #navSearchDropdown .dropdown-item:hover { background: rgba(255,255,255,.07); }