/* ==========================================================================
   DYSUN CONTROL ROOM SKIN — erp.dysun.energy (Odoo website frontend)
   Bron van waarheid: DESIGN.md — gold-on-black, Inter, tonal surface ramp.
   Geladen ná web.assets_frontend via view `website.dysun_control_room_skin`.
   Rollback: die view op active=false — dit bestand raakt niets anders.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Fira+Code:wght@400;500&display=swap');

:root {
  --dy-gold: #FDC500;
  --dy-gold-hover: #E8B400;
  --dy-gold-dim: rgba(253, 197, 0, 0.12);
  --dy-gold-border: rgba(253, 197, 0, 0.35);
  --dy-black: #0A0A0A;
  --dy-bg: #111111;
  --dy-s1: #161616;
  --dy-s2: #1E1E1E;
  --dy-s3: #262626;
  --dy-s4: #303030;
  --dy-anthracite: #36393D;
  --dy-text: #F0F0F0;
  --dy-text-soft: #B0B0B0;
  --dy-text-muted: #707070;
  --dy-border: rgba(255, 255, 255, 0.07);
  --dy-border-strong: rgba(255, 255, 255, 0.14);
  --dy-success: #22C55E;
  --dy-danger: #EF4444;
  --dy-info: #3B82F6;
  --dy-warning: #F59E0B;
  --dy-font: 'Inter', system-ui, -apple-system, sans-serif;
  --dy-mono: 'Fira Code', Consolas, Monaco, monospace;
  --dy-r-sm: 6px;
  --dy-r: 10px;
  --dy-r-lg: 16px;
  --dy-glow: 0 4px 24px rgba(253, 197, 0, 0.15);
  --dy-ring: 0 0 0 3px rgba(253, 197, 0, 0.12);
}

/* ---------- 1. Basis ---------- */

#wrapwrap {
  background-color: var(--dy-bg) !important;
  color: var(--dy-text);
  font-family: var(--dy-font);
  font-size: 15px;
  line-height: 1.6;
}

#wrapwrap main { background-color: transparent; }

#wrapwrap h1, #wrapwrap h2, #wrapwrap h3, #wrapwrap h4, #wrapwrap h5, #wrapwrap h6,
#wrapwrap .h1, #wrapwrap .h2, #wrapwrap .h3, #wrapwrap .h4 {
  font-family: var(--dy-font);
  color: var(--dy-text);
}
#wrapwrap h1, #wrapwrap .h1 { font-weight: 800; letter-spacing: -0.6px; line-height: 1.15; }
#wrapwrap h2, #wrapwrap .h2 { font-weight: 700; letter-spacing: -0.3px; line-height: 1.3; }
#wrapwrap h3, #wrapwrap .h3, #wrapwrap h4 { font-weight: 600; line-height: 1.4; }

#wrapwrap p, #wrapwrap li, #wrapwrap span, #wrapwrap label { font-family: var(--dy-font); }

#wrapwrap main a:not(.btn):not(.nav-link):not(.dropdown-item) { color: var(--dy-gold); }
#wrapwrap main a:not(.btn):not(.nav-link):not(.dropdown-item):hover { color: var(--dy-gold-hover); }

::selection { background: var(--dy-gold); color: var(--dy-black); }

#wrapwrap ::-webkit-scrollbar { width: 10px; height: 10px; }
#wrapwrap ::-webkit-scrollbar-track { background: var(--dy-bg); }
#wrapwrap ::-webkit-scrollbar-thumb { background: var(--dy-s3); border-radius: 5px; }
#wrapwrap ::-webkit-scrollbar-thumb:hover { background: var(--dy-anthracite); }

#wrapwrap :focus-visible {
  outline: none !important;
  box-shadow: var(--dy-ring), 0 0 0 1px var(--dy-gold) !important;
  border-radius: var(--dy-r-sm);
}

#wrapwrap hr { border-color: var(--dy-border-strong); opacity: 1; }

/* ---------- 2. Odoo kleurcombinaties & utilities → surface ramp ---------- */

#wrapwrap .o_cc1, #wrapwrap .o_cc2, #wrapwrap .o_cc3, #wrapwrap .o_cc4, #wrapwrap .o_cc5 {
  background-color: transparent;
  color: var(--dy-text);
}
#wrapwrap section.o_cc1, #wrapwrap section.o_cc4 { background-color: var(--dy-bg) !important; }
#wrapwrap section.o_cc2, #wrapwrap section.o_cc3, #wrapwrap section.o_cc5 { background-color: var(--dy-s1) !important; }

#wrapwrap .bg-white, #wrapwrap .bg-light, #wrapwrap .o_cc .bg-white { background-color: var(--dy-s1) !important; }
#wrapwrap .bg-black-25, #wrapwrap .bg-white-25 { background-color: rgba(10, 10, 10, 0.55) !important; }
#wrapwrap .bg-white-50 { background-color: rgba(10, 10, 10, 0.7) !important; }
#wrapwrap .text-black, #wrapwrap .text-dark, #wrapwrap .text-900 { color: var(--dy-text) !important; }
#wrapwrap .text-muted { color: var(--dy-text-soft) !important; }
#wrapwrap main .o_we_shape { opacity: 0.06; filter: grayscale(1); }

/* Section-koppen die als micro-label ogen */
#wrapwrap .s_text_block .small, #wrapwrap .section-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dy-gold);
}

/* ---------- 3. Header ---------- */

#wrapwrap header#top nav.navbar {
  background-color: rgba(10, 10, 10, 0.92) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--dy-border);
  box-shadow: none !important; /* o.a. shadow-sm op de navbar — Flat-At-Rest */
}
#wrapwrap header#top .navbar .nav-link,
#wrapwrap header#top .navbar a:not(.btn) {
  font-family: var(--dy-font);
  font-size: 13px;
  font-weight: 500;
  color: var(--dy-text-muted) !important;
  border-radius: 999px;
  transition: all 0.16s ease;
}
#wrapwrap header#top .navbar .nav-link:hover,
#wrapwrap header#top .navbar a:not(.btn):hover {
  color: var(--dy-text) !important;
  background-color: var(--dy-s2);
}
#wrapwrap header#top .navbar .nav-link.active,
#wrapwrap header#top .navbar .nav-item.active > .nav-link {
  color: var(--dy-gold) !important;
  background-color: var(--dy-gold-dim);
  box-shadow: inset 0 0 0 1px var(--dy-gold-border);
}
#wrapwrap header#top .navbar-brand, #wrapwrap header#top .navbar-brand span { color: var(--dy-text) !important; }
#wrapwrap header#top .navbar-toggler { color: var(--dy-text); border-color: var(--dy-border-strong); }

/* Mobiel offcanvas-menu */
#wrapwrap .o_navbar_mobile, #wrapwrap .offcanvas {
  background-color: var(--dy-black) !important;
  color: var(--dy-text);
}
#wrapwrap .offcanvas .nav-link { color: var(--dy-text-soft); }
#wrapwrap .offcanvas .nav-link.active { color: var(--dy-gold); }
#wrapwrap .offcanvas .btn-close { filter: invert(1); }

/* ---------- 4. Knoppen ---------- */

#wrapwrap .btn { font-family: var(--dy-font); transition: all 0.16s ease; }

#wrapwrap .btn-primary {
  background-color: var(--dy-gold) !important;
  border-color: var(--dy-gold) !important;
  color: var(--dy-black) !important;
  font-weight: 600;
  border-radius: var(--dy-r);
}
#wrapwrap .btn-primary:hover, #wrapwrap .btn-primary:focus {
  background-color: var(--dy-gold-hover) !important;
  border-color: var(--dy-gold-hover) !important;
  box-shadow: var(--dy-glow);
}

#wrapwrap .btn-secondary, #wrapwrap .btn-light, #wrapwrap .btn-outline-primary, #wrapwrap .btn-outline-secondary {
  background-color: var(--dy-s3) !important;
  border: 1px solid var(--dy-border-strong) !important;
  color: var(--dy-text) !important;
  border-radius: var(--dy-r);
}
#wrapwrap .btn-secondary:hover, #wrapwrap .btn-light:hover,
#wrapwrap .btn-outline-primary:hover, #wrapwrap .btn-outline-secondary:hover {
  background-color: var(--dy-s4) !important;
  border-color: var(--dy-gold-border) !important;
}

#wrapwrap .btn-link { color: var(--dy-gold); text-decoration: none; }
#wrapwrap .btn-link:hover { color: var(--dy-gold-hover); }

/* ---------- 5. Kaarten & snippets ---------- */

#wrapwrap main .card {
  background-color: var(--dy-s1);
  border: 1px solid var(--dy-border);
  border-radius: var(--dy-r-lg);
  color: var(--dy-text);
}
#wrapwrap main .card .card-body { color: var(--dy-text); }

/* USP-blokken en feature-kaarten: tactiele hover */
#wrapwrap .s_features_wave .row > div,
#wrapwrap .s_three_columns .card,
#wrapwrap .s_comparisons .card {
  transition: all 0.16s ease;
  border-radius: var(--dy-r-lg);
}
#wrapwrap .s_three_columns .card:hover, #wrapwrap .s_comparisons .card:hover {
  transform: translateY(-2px);
  border-color: var(--dy-gold-border);
  box-shadow: var(--dy-glow);
}
#wrapwrap .s_features_wave svg, #wrapwrap .s_features_wave .fa { color: var(--dy-gold); }

/* Hero */
#wrapwrap .s_cover { color: var(--dy-text); }
#wrapwrap .s_cover h1 { color: #FFFFFF; text-wrap: balance; }

/* ---------- 6. Shop ---------- */

#wrapwrap .oe_product .oe_product_cart {
  background-color: var(--dy-s1) !important;
  color: var(--dy-text);
  border: 1px solid var(--dy-border);
  border-radius: var(--dy-r-lg);
  overflow: hidden;
  transition: all 0.16s ease;
}
#wrapwrap .oe_product .oe_product_cart:hover {
  transform: translateY(-2px);
  border-color: var(--dy-gold-border);
  box-shadow: var(--dy-glow);
}
/* Productvitrine: witte fotoachtergronden bewust als licht vlak */
#wrapwrap .oe_product_image, #wrapwrap .oe_product_image_link {
  background-color: #FFFFFF;
}
/* Foto's iets van de rand af en een rustige zoom op hover */
#wrapwrap .oe_product .oe_product_image_img_wrapper { padding: 10px; }
#wrapwrap .oe_product .oe_product_image img { transition: transform 0.35s ease; }
#wrapwrap .oe_product .oe_product_cart:hover .oe_product_image img { transform: scale(1.04); }
#wrapwrap .oe_product .oe_product_cart .o_wsale_product_information {
  background-color: var(--dy-s1);
  border-top: 1px solid var(--dy-border);
  padding: 14px 16px;
}
#wrapwrap .oe_product .oe_product_cart a, #wrapwrap .oe_product .oe_product_cart h6 {
  color: var(--dy-text) !important;
  font-weight: 600;
}
/* ERP-artikelnamen (kapitalen) rustiger zetten */
#wrapwrap .o_wsale_products_item_title {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.45;
  margin-bottom: 4px;
}
/* Kaartsubtitel (x_dysun_card_subtitle via view website.dysun_card_subtitle) */
#wrapwrap .dysun-card-subtitle {
  font-size: 12px;
  line-height: 1.5;
  color: var(--dy-text-soft);
  margin-bottom: 6px;
}
#wrapwrap .product_price, #wrapwrap .oe_currency_value {
  font-family: var(--dy-mono);
  color: var(--dy-text);
}
/* B2B: prijzen bewust achter login — leeg prijsvak wordt een nette hint */
#wrapwrap .oe_product .product_price::after {
  content: "Prijs na inloggen";
  font-family: var(--dy-font);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dy-text-muted);
}
html[lang^="de"] #wrapwrap .oe_product .product_price::after { content: "Preis nach Anmeldung"; }
#wrapwrap .oe_product .product_price:has(.oe_currency_value)::after { content: none; }
/* Vergelijken-knop: alleen icoon (Engels "Compare"-label weg), stil ghost-knopje */
#wrapwrap .oe_product .o_add_compare .o_label { display: none; }
#wrapwrap .oe_product .o_add_compare {
  border: 1px solid var(--dy-border-strong);
  border-radius: var(--dy-r-sm);
  color: var(--dy-text-muted);
  transition: all 0.16s ease;
}
#wrapwrap .oe_product .o_add_compare:hover {
  color: var(--dy-gold);
  border-color: var(--dy-gold-border);
  background-color: var(--dy-gold-dim);
}
/* Shop-/categorietitel: de hero draagt de paginatitel al — dit wordt een sectielabel */
#wrapwrap .o_wsale_shop_title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dy-gold);
}
#wrapwrap .o_wsale_products_searchbar .form-control { border-radius: var(--dy-r) 0 0 var(--dy-r); }

/* Filters / categorieën-zijbalk */
#wrapwrap #o_wsale_offcanvas, #wrapwrap .o_wsale_products_grid_before {
  background-color: transparent;
  color: var(--dy-text-soft);
}
#wrapwrap .o_wsale_products_grid_before a { color: var(--dy-text-soft) !important; }
#wrapwrap .o_wsale_products_grid_before a:hover, #wrapwrap .o_wsale_products_grid_before .active > a { color: var(--dy-gold) !important; }

/* Productdetail */
#wrapwrap #product_detail #o-carousel-product,
#wrapwrap #product_detail .o_wsale_product_images {
  background-color: #FFFFFF;
  border-radius: var(--dy-r-lg);
  overflow: hidden;
}
#wrapwrap #product_detail .carousel-indicators [data-bs-target] { background-color: var(--dy-anthracite); }
#wrapwrap #add_to_cart { border-radius: var(--dy-r); }
#wrapwrap #product_details .css_attribute_color, #wrapwrap #product_details ul { color: var(--dy-text-soft); }

/* Brochure-flipbook iframe naadloos op donker veld */
#wrapwrap .dysun-brochure-embed iframe { border: 1px solid var(--dy-border); border-radius: var(--dy-r-lg); }

/* Winkelmandje & checkout */
#wrapwrap .o_wizard, #wrapwrap .wizard { background: transparent; }
#wrapwrap #cart_products, #wrapwrap .o_cart_lines { background-color: var(--dy-s1); border-radius: var(--dy-r-lg); }
#wrapwrap #o_payment_form .card, #wrapwrap .o_total_card {
  background-color: var(--dy-s1) !important;
  border: 1px solid var(--dy-border-strong);
}
/* Betaalprovider-iframes: verzorgde lichte omkadering */
#wrapwrap #o_payment_form iframe { background: #FFFFFF; border-radius: var(--dy-r-sm); }

/* ---------- 7. Formulieren ---------- */

#wrapwrap .form-control, #wrapwrap .form-select, #wrapwrap textarea, #wrapwrap input[type="text"],
#wrapwrap input[type="email"], #wrapwrap input[type="tel"], #wrapwrap input[type="number"],
#wrapwrap input[type="password"], #wrapwrap input[type="search"] {
  background-color: var(--dy-s2) !important;
  border: 1px solid var(--dy-border-strong) !important;
  border-radius: var(--dy-r);
  color: var(--dy-text) !important;
  font-family: var(--dy-font);
  font-size: 14px;
}
#wrapwrap .form-control:focus, #wrapwrap .form-select:focus, #wrapwrap textarea:focus {
  border-color: var(--dy-gold) !important;
  box-shadow: var(--dy-ring) !important;
  background-color: var(--dy-s2) !important;
}
#wrapwrap .form-control::placeholder, #wrapwrap textarea::placeholder { color: var(--dy-text-muted); }
#wrapwrap .form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23B0B0B0' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
}
#wrapwrap .form-label, #wrapwrap label { color: var(--dy-text-soft); font-size: 13px; font-weight: 500; }
#wrapwrap .form-check-input { background-color: var(--dy-s3); border-color: var(--dy-border-strong); }
#wrapwrap .form-check-input:checked { background-color: var(--dy-gold); border-color: var(--dy-gold); }
#wrapwrap .s_website_form { color: var(--dy-text); }

/* ---------- 8. Tabellen ---------- */

#wrapwrap main .table {
  color: var(--dy-text);
  border-color: var(--dy-border);
}
#wrapwrap main .table thead th, #wrapwrap main .table th {
  background-color: var(--dy-s2);
  color: var(--dy-text-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-color: var(--dy-border);
}
#wrapwrap main .table td { border-color: var(--dy-border); background-color: transparent; }
#wrapwrap main .table tbody tr:hover td { background-color: var(--dy-s2); }
#wrapwrap main .table tfoot td, #wrapwrap main .table tfoot th {
  color: var(--dy-gold);
  font-weight: 700;
  border-top: 2px solid var(--dy-border-strong);
}
#wrapwrap main .table .text-end, #wrapwrap main .table td[class*="numeric"] { font-family: var(--dy-mono); font-size: 13px; }

/* ---------- 9. Navigatie-elementen, badges, alerts, dropdowns, modals ---------- */

#wrapwrap .breadcrumb { background: transparent; }
#wrapwrap .breadcrumb-item, #wrapwrap .breadcrumb-item a { color: var(--dy-text-muted); }
#wrapwrap .breadcrumb-item.active { color: var(--dy-text-soft); }

#wrapwrap .pagination .page-link {
  background-color: var(--dy-s2);
  border-color: var(--dy-border-strong);
  color: var(--dy-text-soft);
}
#wrapwrap .pagination .page-link:hover { background-color: var(--dy-s3); color: var(--dy-text); }
#wrapwrap .pagination .page-item.active .page-link {
  background-color: var(--dy-gold);
  border-color: var(--dy-gold);
  color: var(--dy-black);
}

#wrapwrap .badge { border-radius: 999px; font-weight: 600; letter-spacing: 0.04em; }

#wrapwrap .alert-success { background: rgba(34,197,94,0.12); border-color: rgba(34,197,94,0.4); color: #86EFAC; }
#wrapwrap .alert-danger { background: rgba(239,68,68,0.12); border-color: rgba(239,68,68,0.4); color: #FCA5A5; }
#wrapwrap .alert-info { background: rgba(59,130,246,0.12); border-color: rgba(59,130,246,0.4); color: #93C5FD; }
#wrapwrap .alert-warning { background: rgba(245,158,11,0.12); border-color: rgba(245,158,11,0.4); color: #FCD34D; }

#wrapwrap .dropdown-menu {
  background-color: var(--dy-s2);
  border: 1px solid var(--dy-border-strong);
  border-radius: var(--dy-r);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}
#wrapwrap .dropdown-item { color: var(--dy-text-soft); }
#wrapwrap .dropdown-item:hover { background-color: var(--dy-s3); color: var(--dy-text); }
#wrapwrap .dropdown-item.active, #wrapwrap .dropdown-item:active {
  background-color: var(--dy-gold-dim) !important;
  color: var(--dy-gold) !important;
}

/* Cart-teller en andere primary-badges: zwart op goud, nooit wit op goud */
#wrapwrap .badge.bg-primary, #wrapwrap .badge.text-bg-primary { color: var(--dy-black) !important; }

/* In de editor gezette doorschijnend-witte panelen (blogkaarten e.d.) → donker glas.
   Attribuutselector vangt inline styles; solide witte vlakken blijven bewust wit. */
#wrapwrap main [style*="background-color: rgba(255, 255, 255"] {
  background-color: rgba(17, 17, 17, 0.88) !important;
}

#wrapwrap .modal-content {
  background-color: var(--dy-s2);
  border: 1px solid var(--dy-border-strong);
  border-radius: var(--dy-r-lg);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
  color: var(--dy-text);
}
#wrapwrap .modal-header, #wrapwrap .modal-footer { border-color: var(--dy-border); }
#wrapwrap .modal .btn-close { filter: invert(1); }

/* ---------- 10. Blog ---------- */

/* Blogkaarten: theme zet een wit glaspaneel (rgba 255,255,255,.9) op .card-body
   bovenop de coverfoto — wordt donker glas op het donkere veld. */
#wrapwrap .o_wblog_post .card-body {
  background-color: rgba(17, 17, 17, 0.88) !important;
  color: var(--dy-text);
}
#wrapwrap .o_wblog_post.card { border: 1px solid var(--dy-border); border-radius: var(--dy-r-lg); overflow: hidden; }

#wrapwrap .o_wblog_post_cover, #wrapwrap .o_wblog_list_cover { border-radius: var(--dy-r-lg); overflow: hidden; }
#wrapwrap .o_wblog_post_content p { max-width: 72ch; font-size: 16px; line-height: 1.7; color: var(--dy-text-soft); }
#wrapwrap .o_wblog_post_content h2, #wrapwrap .o_wblog_post_content h3 { color: var(--dy-text); margin-top: 1.6em; }
#wrapwrap .o_wblog_sidebar .card { background-color: var(--dy-s1); }

/* ---------- 11. Login & portaal ---------- */

#wrapwrap .oe_login_form, #wrapwrap .card.border:has(.oe_login_form) {
  background-color: var(--dy-s1);
  border: 1px solid var(--dy-border) !important;
  border-radius: var(--dy-r-lg);
}
#wrapwrap .o_portal .o_portal_navbar, #wrapwrap .o_portal_wrap .o_portal_my_home { color: var(--dy-text); }
#wrapwrap .o_portal_wrap .card { background-color: var(--dy-s1); }
#wrapwrap .o_portal_wrap .list-group-item {
  background-color: var(--dy-s1);
  border-color: var(--dy-border);
  color: var(--dy-text-soft);
}
#wrapwrap .o_portal_wrap .list-group-item:hover { background-color: var(--dy-s2); color: var(--dy-text); }

/* ---------- 12. Footer ---------- */

#wrapwrap footer#bottom {
  background-color: var(--dy-black) !important;
  color: var(--dy-text-soft);
  border-top: 1px solid var(--dy-border);
}
#wrapwrap footer#bottom h5, #wrapwrap footer#bottom .h5, #wrapwrap footer#bottom h6 {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dy-text-muted);
}
#wrapwrap footer#bottom a:not(.btn) { color: var(--dy-text-soft); transition: color 0.16s ease; }
#wrapwrap footer#bottom a:not(.btn):hover { color: var(--dy-text); }
#wrapwrap .o_footer_copyright { background-color: var(--dy-black) !important; color: var(--dy-text-muted); }
/* "Powered by Odoo"-blok verbergen tot de view-fix hem verwijdert */
#wrapwrap .o_footer_copyright a[href*="odoo.com"] { display: none !important; }

/* ---------- 13. Toegankelijkheid & motion ---------- */

@media (prefers-reduced-motion: reduce) {
  #wrapwrap *, #wrapwrap *::before, #wrapwrap *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
  #wrapwrap .oe_product .oe_product_cart:hover,
  #wrapwrap .s_three_columns .card:hover { transform: none; }
}