From 0dae0094f59f9e14891ffcf8895d6280d821f07b Mon Sep 17 00:00:00 2001
From: Edwin Noorlander <edwin@noorlander.info>
Date: Tue, 11 Aug 2026 16:48:21 +0200
Subject: [PATCH] Use SCSS as sole CSS source, remove manual theme.css

- Remove manual themes/default/assets/css/theme.css
- SCSS is compiled by scssphp to css_compiled/theme.css
- All nav-tabs, dropdown-menu, dropdown-item overrides in SCSS only
- Override ALL Bootstrap nav-tabs CSS variables and properties
---
 themes/default/assets/css/theme.css          | 390 -------------------
 themes/default/assets/css_compiled/.mtime    |   2 +-
 themes/default/assets/css_compiled/theme.css | 116 +++---
 themes/default/assets/scss/theme.scss        |  26 +-
 4 files changed, 94 insertions(+), 440 deletions(-)
 delete mode 100644 themes/default/assets/css/theme.css

diff --git a/themes/default/assets/css/theme.css b/themes/default/assets/css/theme.css
deleted file mode 100644
index 3d1a23c..0000000
--- a/themes/default/assets/css/theme.css
+++ /dev/null
@@ -1,390 +0,0 @@
-#site-header .search-input {
-  background-color: #ffffff !important;
-  color: #212529 !important;
-  border: 2px solid #0a369d !important;
-}
-
-#site-header .search-input::placeholder {
-  color: #6c757d !important;
-}
-
-#site-header .search-input:focus {
-  background-color: #ffffff !important;
-  color: #212529 !important;
-  border-color: #2754b4 !important;
-  box-shadow: 0 0 0 0.2rem rgba(10, 54, 157, 0.25) !important;
-}
-
-:root {
-  --header-bg: #0a369d;
-  --header-font: #ffffff;
-  --header-height: 56px;
-  --nav-bg: #2754b4;
-  --nav-font: #ffffff;
-  --nav-height: 42px;
-  --sidebar-bg: #f8f9fa;
-  --sidebar-border: #dee2e6;
-}
-
-#site-header {
-  background-image: none;
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
-  position: relative;
-}
-
-.navbar {
-  background-color: var(--header-bg) !important;
-  min-height: var(--header-height);
-}
-.navbar .navbar-brand,
-.navbar .navbar-text,
-.navbar .btn {
-  color: var(--header-font) !important;
-}
-.navbar .form-control {
-  color: var(--header-font) !important;
-}
-.navbar .form-control::placeholder {
-  color: rgba(255, 255, 255, 0.7) !important;
-}
-.navbar .search-input {
-  background-color: #ffffff !important;
-  color: #212529 !important;
-  border: 2px solid #0a369d !important;
-}
-.navbar .search-input::placeholder {
-  color: #6c757d !important;
-  opacity: 1 !important;
-}
-.navbar .search-input:focus {
-  background-color: #ffffff !important;
-  color: #212529 !important;
-  border-color: #2754b4 !important;
-  box-shadow: 0 0 0 0.2rem rgba(10, 54, 157, 0.25) !important;
-}
-.navbar .btn-outline-light {
-  border-color: var(--header-font) !important;
-}
-
-.dropdown-menu {
-  --bs-dropdown-min-width: 0;
-  --bs-dropdown-padding-x: 0;
-  --bs-dropdown-padding-y: 0;
-  --bs-dropdown-border-width: 0;
-  --bs-dropdown-border-radius: 0;
-  --bs-dropdown-box-shadow: none;
-  background-color: var(--header-bg) !important;
-  border: none !important;
-  border-radius: 0 !important;
-  padding: 0 !important;
-  margin: 0 !important;
-  min-width: 0 !important;
-  box-shadow: none !important;
-  width: max-content;
-}
-.dropdown-item {
-  color: var(--header-font) !important;
-  border-radius: 0 !important;
-  padding: 0.4rem 1rem;
-  white-space: nowrap;
-  display: block;
-  width: 100%;
-}
-.dropdown-item:hover, .dropdown-item:focus {
-  background-color: rgba(255, 255, 255, 0.1) !important;
-  color: var(--header-font) !important;
-}
-.nav-tabs .dropdown-menu {
-  margin-top: 0 !important;
-}
-
-.dropdown-toggle::after {
-  display: none !important;
-}
-
-.btn-outline-light {
-  color: var(--header-font) !important;
-  border-color: var(--header-font) !important;
-}
-.btn-outline-light:hover {
-  background-color: rgba(255, 255, 255, 0.1) !important;
-  color: var(--header-font) !important;
-}
-.btn-outline-light:focus, .btn-outline-light:active, .show > .btn-outline-light.dropdown-toggle {
-  background-color: rgba(255, 255, 255, 0.1) !important;
-  color: var(--header-font) !important;
-  border-color: var(--header-font) !important;
-  box-shadow: none !important;
-}
-
-.bi-chevron-down {
-  font-size: 0.75em;
-  margin-left: 0.25rem;
-}
-
-.breadcrumb-item + .breadcrumb-item::before {
-  content: "" !important;
-  padding: 0 !important;
-}
-
-.breadcrumb {
-  --bs-breadcrumb-divider: "";
-  --bs-breadcrumb-margin-bottom: 0;
-  margin-bottom: 0;
-}
-.breadcrumb .breadcrumb-item {
-  color: var(--header-bg) !important;
-}
-.breadcrumb .breadcrumb-item a {
-  color: var(--header-bg) !important;
-  text-decoration: none;
-}
-.breadcrumb .breadcrumb-item a:hover {
-  text-decoration: underline;
-}
-
-.sidebar-toggle-item {
-  display: flex;
-  align-items: center;
-  margin-right: 0.5rem;
-}
-
-.sidebar-toggle-btn {
-  padding: 0;
-  line-height: 1;
-  font-size: 1.1rem;
-  color: var(--header-bg) !important;
-  border: none !important;
-  background: transparent !important;
-  box-shadow: none !important;
-  cursor: pointer;
-}
-.sidebar-toggle-btn:hover {
-  opacity: 0.7;
-}
-
-.sidebar-column {
-  transition: all 0.3s ease;
-}
-
-.sidebar-hidden {
-  display: none !important;
-}
-
-.navigation-section {
-  background-color: var(--nav-bg) !important;
-  color: var(--nav-font) !important;
-  min-height: var(--nav-height);
-}
-
-.focus-visible:focus,
-.btn:focus,
-.form-control:focus,
-.nav-link:focus {
-  outline: 3px solid #0056b3 !important;
-  outline-offset: 2px !important;
-  box-shadow: 0 0 0 1px #ffffff, 0 0 0 4px #0056b3 !important;
-}
-
-@media (prefers-contrast: high) {
-  :root {
-    --text-color: #000000;
-    --bg-color: #ffffff;
-    --border-color: #000000;
-    --focus-color: #000000;
-  }
-  .btn-primary {
-    background-color: #000000 !important;
-    border-color: #000000 !important;
-    color: #ffffff !important;
-  }
-  .btn-outline-light {
-    color: #000000 !important;
-    border-color: #000000 !important;
-  }
-  .text-muted {
-    color: #000000 !important;
-  }
-  .navbar {
-    background-color: #ffffff !important;
-    border-bottom: 1px solid #000000 !important;
-  }
-}
-@media (prefers-reduced-motion: reduce) {
-  *,
-  *::before,
-  *::after {
-    animation-duration: 0.01ms !important;
-    animation-iteration-count: 1 !important;
-    transition-duration: 0.01ms !important;
-    scroll-behavior: auto !important;
-  }
-}
-.nav-tabs {
-  background-color: transparent !important;
-  border: none !important;
-  border-radius: 0 !important;
-  gap: 0 !important;
-}
-.nav-tabs .nav-link {
-  background-color: transparent !important;
-  border: none !important;
-  color: var(--nav-font) !important;
-}
-.nav-tabs .nav-link:hover {
-  background-color: rgba(255, 255, 255, 0.1) !important;
-}
-.nav-tabs .nav-link.active {
-  background-color: rgba(255, 255, 255, 0.2) !important;
-  border-bottom: 2px solid var(--nav-font) !important;
-}
-
-.sidebar-column {
-  background-color: var(--sidebar-bg) !important;
-  border-right: 1px solid var(--sidebar-border) !important;
-  position: sticky;
-  top: 0;
-  min-height: calc(100vh - var(--header-height) - var(--nav-height) - 42px);
-}
-
-.sidebar {
-  padding: 1.5rem;
-  height: 100%;
-  overflow-y: auto;
-}
-
-.content-column {
-  background-color: #ffffff;
-}
-
-.content-wrapper {
-  padding: 2rem;
-  padding-bottom: 80px !important;
-}
-
-.main-content {
-  flex: 1;
-  min-height: auto;
-}
-
-@media (max-width: 767.98px) {
-  .sidebar-column {
-    border-right: none !important;
-    border-top: 1px solid var(--sidebar-border) !important;
-    min-height: auto;
-    margin-top: 1rem;
-  }
-  .content-column {
-    background-color: #ffffff;
-  }
-  .content-wrapper {
-    min-height: auto;
-    padding-bottom: 2rem !important;
-  }
-}
-@media (max-width: 991.98px) {
-  .sidebar-column {
-    order: 2 !important;
-  }
-  .content-column {
-    order: 1 !important;
-  }
-}
-pre {
-  background: #f8f9fa;
-  padding: 1rem;
-  border-radius: 6px;
-  overflow-x: auto;
-  border: 1px solid #dee2e6;
-  margin-bottom: 1rem;
-}
-pre code {
-  background: none;
-  padding: 0;
-  color: #333;
-  font-size: 0.85rem;
-  line-height: 1.5;
-}
-
-/* Bootstrap 5 nested dropdown support (dropdown-submenu) — unlimited depth, CSS hover */
-.dropdown-submenu {
-  position: relative;
-}
-.dropdown-submenu > .dropdown-menu {
-  top: 0;
-  left: 100%;
-  margin-top: 0;
-  margin-left: 0;
-  display: none;
-  --bs-dropdown-border-width: 0;
-  --bs-dropdown-border-radius: 0;
-  --bs-dropdown-box-shadow: none;
-  border: none !important;
-  border-radius: 0 !important;
-  box-shadow: none !important;
-  width: max-content;
-}
-.dropdown-submenu:hover > .dropdown-menu {
-  display: block;
-}
-.dropdown-submenu:hover > .dropdown-toggle {
-  background-color: rgba(255, 255, 255, 0.15) !important;
-}
-.dropdown-submenu > .dropdown-toggle .bi-chevron-right {
-  float: right;
-  margin-top: 0.25rem;
-}
-@media (max-width: 767.98px) {
-  .dropdown-submenu > .dropdown-menu {
-    left: 0;
-    top: 100%;
-    margin-top: 0;
-    margin-left: 1rem;
-    border: none !important;
-    border-radius: 0 !important;
-    box-shadow: none;
-  }
-  .dropdown-submenu:hover > .dropdown-menu {
-    display: none;
-  }
-  .dropdown-submenu.show > .dropdown-menu {
-    display: block;
-  }
-}
-
-code {
-  background: #e8e8e8;
-  padding: 0.15rem 0.4rem;
-  border-radius: 3px;
-  font-size: 0.9em;
-  color: #d63384;
-}
-
-.footer-icon {
-  color: #6c757d;
-  text-decoration: none;
-  transition: all 0.2s ease-in-out;
-  display: inline-block;
-  padding: 2px;
-}
-.footer-icon:hover {
-  color: #0d6efd;
-  transform: translateY(-1px);
-}
-.footer-icon:active {
-  transform: translateY(0);
-}
-.footer-icon.guide:hover {
-  color: #198754;
-}
-.footer-icon.cms:hover {
-  color: #dc3545;
-}
-.footer-icon.git:hover {
-  color: #6f42c1;
-}
-.footer-icon.website:hover {
-  color: #fd7e14;
-}
\ No newline at end of file
diff --git a/themes/default/assets/css_compiled/.mtime b/themes/default/assets/css_compiled/.mtime
index fc06ae2..3902b43 100644
--- a/themes/default/assets/css_compiled/.mtime
+++ b/themes/default/assets/css_compiled/.mtime
@@ -1 +1 @@
-1786279979
\ No newline at end of file
+1786459597
\ No newline at end of file
diff --git a/themes/default/assets/css_compiled/theme.css b/themes/default/assets/css_compiled/theme.css
index 3d1a23c..908dab3 100644
--- a/themes/default/assets/css_compiled/theme.css
+++ b/themes/default/assets/css_compiled/theme.css
@@ -84,6 +84,7 @@
   box-shadow: none !important;
   width: max-content;
 }
+
 .dropdown-item {
   color: var(--header-font) !important;
   border-radius: 0 !important;
@@ -96,6 +97,7 @@
   background-color: rgba(255, 255, 255, 0.1) !important;
   color: var(--header-font) !important;
 }
+
 .nav-tabs .dropdown-menu {
   margin-top: 0 !important;
 }
@@ -223,24 +225,90 @@
   }
 }
 .nav-tabs {
+  --bs-nav-tabs-border-width: 0 !important;
+  --bs-nav-tabs-border-color: transparent !important;
+  --bs-nav-tabs-border-radius: 0 !important;
+  --bs-nav-tabs-link-hover-border-color: transparent !important;
+  --bs-nav-tabs-link-active-color: var(--nav-font) !important;
+  --bs-nav-tabs-link-active-bg: transparent !important;
+  --bs-nav-tabs-link-active-border-color: transparent !important;
   background-color: transparent !important;
   border: none !important;
+  border-bottom: none !important;
   border-radius: 0 !important;
   gap: 0 !important;
 }
 .nav-tabs .nav-link {
+  margin-bottom: 0 !important;
   background-color: transparent !important;
   border: none !important;
+  border-top-left-radius: 0 !important;
+  border-top-right-radius: 0 !important;
+  border-bottom-left-radius: 0 !important;
+  border-bottom-right-radius: 0 !important;
   color: var(--nav-font) !important;
 }
-.nav-tabs .nav-link:hover {
+.nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus {
+  isolation: auto;
   background-color: rgba(255, 255, 255, 0.1) !important;
+  border-color: transparent !important;
 }
 .nav-tabs .nav-link.active {
   background-color: rgba(255, 255, 255, 0.2) !important;
+  border-color: transparent !important;
   border-bottom: 2px solid var(--nav-font) !important;
 }
+.nav-tabs .dropdown-menu {
+  margin-top: 0 !important;
+  border-top-left-radius: 0 !important;
+  border-top-right-radius: 0 !important;
+}
 
+.dropdown-submenu {
+  position: relative;
+}
+.dropdown-submenu > .dropdown-menu {
+  top: 0;
+  left: 100%;
+  margin-top: 0;
+  margin-left: 0;
+  display: none;
+  --bs-dropdown-border-width: 0;
+  --bs-dropdown-border-radius: 0;
+  --bs-dropdown-box-shadow: none;
+  border: none !important;
+  border-radius: 0 !important;
+  box-shadow: none !important;
+  width: max-content;
+}
+.dropdown-submenu:hover > .dropdown-menu {
+  display: block;
+}
+.dropdown-submenu:hover > .dropdown-toggle {
+  background-color: rgba(255, 255, 255, 0.15) !important;
+}
+.dropdown-submenu > .dropdown-toggle .bi-chevron-right {
+  float: right;
+  margin-top: 0.25rem;
+}
+
+@media (max-width: 767.98px) {
+  .dropdown-submenu > .dropdown-menu {
+    left: 0;
+    top: 100%;
+    margin-top: 0;
+    margin-left: 1rem;
+    border: none !important;
+    border-radius: 0 !important;
+    box-shadow: none;
+  }
+  .dropdown-submenu:hover > .dropdown-menu {
+    display: none;
+  }
+  .dropdown-submenu.show > .dropdown-menu {
+    display: block;
+  }
+}
 .sidebar-column {
   background-color: var(--sidebar-bg) !important;
   border-right: 1px solid var(--sidebar-border) !important;
@@ -308,52 +376,6 @@ pre code {
   line-height: 1.5;
 }
 
-/* Bootstrap 5 nested dropdown support (dropdown-submenu) — unlimited depth, CSS hover */
-.dropdown-submenu {
-  position: relative;
-}
-.dropdown-submenu > .dropdown-menu {
-  top: 0;
-  left: 100%;
-  margin-top: 0;
-  margin-left: 0;
-  display: none;
-  --bs-dropdown-border-width: 0;
-  --bs-dropdown-border-radius: 0;
-  --bs-dropdown-box-shadow: none;
-  border: none !important;
-  border-radius: 0 !important;
-  box-shadow: none !important;
-  width: max-content;
-}
-.dropdown-submenu:hover > .dropdown-menu {
-  display: block;
-}
-.dropdown-submenu:hover > .dropdown-toggle {
-  background-color: rgba(255, 255, 255, 0.15) !important;
-}
-.dropdown-submenu > .dropdown-toggle .bi-chevron-right {
-  float: right;
-  margin-top: 0.25rem;
-}
-@media (max-width: 767.98px) {
-  .dropdown-submenu > .dropdown-menu {
-    left: 0;
-    top: 100%;
-    margin-top: 0;
-    margin-left: 1rem;
-    border: none !important;
-    border-radius: 0 !important;
-    box-shadow: none;
-  }
-  .dropdown-submenu:hover > .dropdown-menu {
-    display: none;
-  }
-  .dropdown-submenu.show > .dropdown-menu {
-    display: block;
-  }
-}
-
 code {
   background: #e8e8e8;
   padding: 0.15rem 0.4rem;
diff --git a/themes/default/assets/scss/theme.scss b/themes/default/assets/scss/theme.scss
index 2f0d244..5dbe738 100644
--- a/themes/default/assets/scss/theme.scss
+++ b/themes/default/assets/scss/theme.scss
@@ -288,27 +288,49 @@ $header-bg-opacity: 1;
     }
 }
 
-// Remove nav-tabs background so it inherits from parent
+// Navigation tabs — completely override Bootstrap nav-tabs styling
 .nav-tabs {
+    --bs-nav-tabs-border-width: 0 !important;
+    --bs-nav-tabs-border-color: transparent !important;
+    --bs-nav-tabs-border-radius: 0 !important;
+    --bs-nav-tabs-link-hover-border-color: transparent !important;
+    --bs-nav-tabs-link-active-color: var(--nav-font) !important;
+    --bs-nav-tabs-link-active-bg: transparent !important;
+    --bs-nav-tabs-link-active-border-color: transparent !important;
     background-color: transparent !important;
     border: none !important;
+    border-bottom: none !important;
     border-radius: 0 !important;
     gap: 0 !important;
 
     .nav-link {
+        margin-bottom: 0 !important;
         background-color: transparent !important;
         border: none !important;
+        border-top-left-radius: 0 !important;
+        border-top-right-radius: 0 !important;
+        border-bottom-left-radius: 0 !important;
+        border-bottom-right-radius: 0 !important;
         color: var(--nav-font) !important;
 
-        &:hover {
+        &:hover, &:focus {
+            isolation: auto;
             background-color: rgba(255, 255, 255, 0.1) !important;
+            border-color: transparent !important;
         }
 
         &.active {
             background-color: rgba(255, 255, 255, 0.2) !important;
+            border-color: transparent !important;
             border-bottom: 2px solid var(--nav-font) !important;
         }
     }
+
+    .dropdown-menu {
+        margin-top: 0 !important;
+        border-top-left-radius: 0 !important;
+        border-top-right-radius: 0 !important;
+    }
 }
 
 // Bootstrap 5 nested dropdown support (dropdown-submenu) — unlimited depth, CSS hover