/* =========
   Qabbel Theme – clean & elegant (Olive Accent)
   ========= */

/* ---- Base tokens */
:root{
  --radius-unified: 10px;
  --radius-lg: var(--radius-unified);
  --radius-md: var(--radius-unified);
  --radius-sm: var(--radius-unified);

  --shadow-1: 0 2px 10px rgba(0,0,0,.06);
  --shadow-2: 0 12px 40px rgba(0,0,0,.10);

  /* smooth theme switch */
  --transition-fast: .5s;

  /* accent defaults (overridden per theme where needed) */
  --accent: #5b6f43;           /* dunkles, edles Olivgrün */
  --accent-contrast: #ffffff;
  --accent-strong: #4a5b37;    /* für :hover / active in light */
  --accent-soft: #8ea173;      /* weichere Nuance */
  --accent-ring: rgba(91,111,67,.25);

  /* table row hover (per theme overridden) */
  --row-hover-bg: rgba(91,111,67,.08);

  --muted: #6b7280;

  /* chart vars (used by JS) */
  --chart-line: var(--accent);
  --chart-grid: #dfe3eb;
  --chart-tooltip-bg: #000;
  --chart-tooltip-color: #fff;
}

/* ---- Light theme */
:root[data-bs-theme="light"]{
  --bs-body-bg: #f7f8fb;
  --bs-body-color: #1f2430;
  --bs-border-color: #e6e9f0;

  --bs-card-bg: #ffffff;
  --bs-card-border-color: var(--bs-border-color);

  --row-hover-bg: rgba(91,111,67,.08);
  --muted: #6c7280;

  /* Olive bleibt satt im Light */
  --accent: #5b6f43;
  --accent-strong: #4a5b37;
  --accent-soft: #8ea173;
  --accent-ring: rgba(91,111,67,.25);

  --chart-line: var(--accent);
  --chart-grid: #e4e8f1;
  --chart-tooltip-bg: #111;
  --chart-tooltip-color: #fff;
  
  --bs-card-background-color: rgba(0,0,0,.02);
}

/* ---- Dark theme (freundlicher/heller) */
:root[data-bs-theme="dark"]{
  --bs-body-bg: #151923;
  --bs-card-bg: #1b2130;
  --bs-border-color: #343c4d;

  /* dezentere Hover-Fläche */
  --row-hover-bg: rgba(167,184,122,.12);

  /* Olive im Dark etwas heller für Lesbarkeit */
  --accent: #a7b87a;
  --accent-strong: #c0ce9f;
  --accent-soft: #d6e0bf;
  --accent-contrast: #0f131a;
  --accent-ring: rgba(167,184,122,.25);

  /* Chart-Kontraste etwas heller */
  --chart-grid: #2a3142;
  --chart-line: var(--accent);

  /* Muted-Text minimal heller */
  --muted: #a9b5c8;
  
  --bs-card-background-color: rgba(255,255,255,.02);
}

/* Consent-Card transparenter im Dark Mode */
:root[data-bs-theme="dark"] #consent-banner .card { background-color: rgba(21,26,35,.92); }

/* Tabellen-Ränder etwas sanfter im Dark Mode */
:root[data-bs-theme="dark"] .table {
  --bs-table-color: var(--bs-body-color);
  --bs-table-bg: transparent;
}

/* ---- Smooth theme transitions */
html, body, .navbar, .card, .dropdown-menu, .modal-content, .table,
.form-control, .btn, .alert, #priceChart, .content {
  transition:
    background-color var(--transition-fast) ease,
    color var(--transition-fast) ease,
    border-color var(--transition-fast) ease,
    box-shadow var(--transition-fast) ease;
}
@media (prefers-reduced-motion: reduce){
  * { transition: none !important; }
}

/* Grund-Hintergrund direkt aus der Var (hilft gegen Blinks) */
html, body { background-color: var(--bs-body-bg); }

/* ---- Typography */
body{
  font-feature-settings: "ss01","cv01";
  letter-spacing: .1px;
}
.lead{ color: var(--bs-body-color); }

/* ---- Navbar (fix #ccc) */
.navbar{
  background-color: #ccc !important;
  border-bottom: 1px solid #bbb;
  box-shadow: none;
}
/* Sichere, dunkle Typo auf dem hellen Header */
.navbar, .navbar .navbar-brand, .navbar .nav-link, .navbar .btn {
  color: #1f2430 !important;
}
.navbar .navbar-brand{
  font-weight: 700;
  letter-spacing: .2px;
}
.navbar .nav-link:hover,
.navbar .nav-link:focus { color: #0f131a !important; }

#site-search{
  border-radius: 999px;
  padding-inline: .9rem 2.6rem;
}

/* ---- Theme toggle */
#theme-toggle{
  border-radius: 999px;
}
#theme-toggle .theme-icon{ transition: transform .26s ease; }
#theme-toggle:active .theme-icon{ transform: rotate(180deg); }

/* Icon-Switch Sonne/Mond via CSS */
#theme-toggle .theme-icon { display:inline-block; vertical-align:middle; }
:root[data-bs-theme="light"] #theme-toggle .icon-sun  { display:inline-block; }
:root[data-bs-theme="light"] #theme-toggle .icon-moon { display:none; }
:root[data-bs-theme="dark"]  #theme-toggle .icon-sun  { display:none; }
:root[data-bs-theme="dark"]  #theme-toggle .icon-moon { display:inline-block; }

/* ---- Cards */
.card{
  border-radius: var(--radius-lg);
  border: 1px solid var(--bs-card-border-color);
  box-shadow: var(--shadow-1);
  background-color:var(--bs-card-background-color);
}
.card:hover{ box-shadow: var(--shadow-2); }

/* ---- Tables (Offers) */
.table{
  border-color: var(--bs-border-color);
}
.table thead th{
  border-bottom-color: var(--bs-border-color);
  font-weight: 600;
}
.table tbody tr:hover{ background: var(--row-hover-bg); }

/* ---- Buttons (Olive Accent) */
.btn{
  border-radius: var(--radius-sm);
}
.btn-primary{
  color: var(--accent-contrast);
  background-color: var(--accent);
  border-color: var(--accent);
}
.btn-primary:hover,
.btn-primary:focus{
  color: var(--accent-contrast);
  background-color: var(--accent-strong);
  border-color: var(--accent-strong);
}
.btn-primary:active{
  background-color: var(--accent-strong);
  border-color: var(--accent-strong);
}
.btn-outline-primary{
  color: var(--accent);
  border-color: var(--accent);
  background-color: transparent;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus{
  color: var(--accent-contrast);
  background-color: var(--accent);
  border-color: var(--accent);
}
.btn-check:checked + .btn-primary,
.btn-check:active + .btn-primary{
  background-color: var(--accent-strong);
  border-color: var(--accent-strong);
}

/* Header-Buttons neutral belassen */
.btn-outline-secondary{
  border-color: var(--bs-border-color);
}

/* Links / Primary Utilities (dezent, kein globales <a> Override) */
.link-primary,
.text-primary { color: var(--accent) !important; }
.link-primary:hover { color: var(--accent-strong) !important; }

/* Pills, Active States, Pagination im Olive */
.nav-pills .nav-link.active,
.dropdown-item.active,
.page-item.active .page-link {
  color: var(--accent-contrast) !important;
  background-color: var(--accent) !important;
  border-color: var(--accent) !important;
}

/* Badges, Progress, Form-Checks im Olive */
.badge.bg-primary { background-color: var(--accent) !important; }
.progress-bar { background-color: var(--accent); }
.form-check-input:checked {
  background-color: var(--accent);
  border-color: var(--accent);
}

/* Form Focus-Ring */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 .2rem var(--accent-ring);
}

/* ---- Content blocks (description/details) */
.content{
  color: var(--bs-body-color);
}
.content p{ margin-bottom: .75rem; }
.content ul{ padding-left: 1.2rem; }
.content h3, .content h4, .content h5{ margin-top: .85rem; }
.content a{ color: var(--accent); }
.content a:hover{ color: var(--accent-strong); }
.content table{
  width:100%;
  border-collapse: collapse;
  margin-bottom: 1rem;
}
.content table td, .content table th{
  border: 1px solid var(--bs-border-color);
  padding: .55rem .6rem;
}

/* ---- Gallery / Carousel */
#productGallery .carousel-inner,
#productGallery img{ border-radius: var(--radius-lg); }
.carousel-control-prev, .carousel-control-next{
  width: 3rem;
}
.carousel-control-prev-icon, .carousel-control-next-icon{
  background-size: 60% 60%;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.35));
}
#productGallery .btn.btn-dark{
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-1);
}

/* ---- Modal Lightbox */
#galleryLightbox .modal-content{
  border-radius: var(--radius-lg);
  border: 1px solid var(--bs-border-color);
}

/* ---- Price chart canvas */
#priceChart{
  background: var(--bs-card-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  padding: .25rem;
}

/* ---- Utilities */
.text-muted, .content .muted{ color: var(--muted) !important; }
img{ image-rendering: -webkit-optimize-contrast; }

/* Buttons & Suchfeld im Header passend stylen */
.navbar .btn.btn-outline-secondary{
  border-color: rgba(0,0,0,.25);
}
.navbar .btn.btn-outline-secondary:hover{
  background: rgba(0,0,0,.06);
}
.navbar #site-search{
  background: #fff;
  border-color: rgba(0,0,0,.2);
  color: #1f2430;
}

/* Einheitliche Radius-Anwendung auch auf runde Controls */
#site-search,
#theme-toggle{
  border-radius: var(--radius-unified) !important;
}