From 9830b0b40a68d5c1b8885fd81b72d53efe2bf2cf Mon Sep 17 00:00:00 2001
From: pxpm <pxpm88@gmail.com>
Date: Tue, 12 Nov 2024 16:18:17 +0000
Subject: [PATCH 01/24] wip

---
 resources/views/inc/theme_scripts.blade.php | 2 +-
 resources/views/inc/theme_styles.blade.php  | 2 +-
 src/AddonServiceProvider.php                | 3 +++
 3 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/resources/views/inc/theme_scripts.blade.php b/resources/views/inc/theme_scripts.blade.php
index 2c62ce2..e4adbb0 100644
--- a/resources/views/inc/theme_scripts.blade.php
+++ b/resources/views/inc/theme_scripts.blade.php
@@ -1,2 +1,2 @@
 @basset(base_path('vendor/backpack/theme-tabler/resources/assets/js/tabler.js'))
-@basset('https://unpkg.com/@tabler/core@1.0.0-beta19/dist/js/tabler.min.js')
+@basset('bp-tabler-js')
diff --git a/resources/views/inc/theme_styles.blade.php b/resources/views/inc/theme_styles.blade.php
index c0597c7..5a4141d 100644
--- a/resources/views/inc/theme_styles.blade.php
+++ b/resources/views/inc/theme_styles.blade.php
@@ -4,5 +4,5 @@
 --}}
 <script>document.documentElement.setAttribute("data-bs-theme", localStorage.colorMode ?? 'light');</script>
 
-@basset('https://unpkg.com/@tabler/core@1.0.0-beta19/dist/css/tabler.min.css')
+@basset('bp-tabler-css')
 @basset(base_path('vendor/backpack/theme-tabler/resources/assets/css/style.css'))
\ No newline at end of file
diff --git a/src/AddonServiceProvider.php b/src/AddonServiceProvider.php
index f7990f0..f60a2cb 100644
--- a/src/AddonServiceProvider.php
+++ b/src/AddonServiceProvider.php
@@ -2,6 +2,7 @@
 
 namespace Backpack\ThemeTabler;
 
+use Backpack\Basset\Facades\Basset;
 use Backpack\CRUD\ThemeServiceProvider;
 use Illuminate\View\Compilers\BladeCompiler;
 use Illuminate\Support\Facades\Blade;
@@ -19,5 +20,7 @@ public function boot(): void
             Blade::componentNamespace('Backpack\\ThemeTabler\\View\\Components', $this->packageName);
         });
         
+        Basset::map('bp-tabler-css', 'https://unpkg.com/@tabler/core@1.0.0-beta19/dist/css/tabler.min.css', ['integrity' => 'sha384-wIPtnwKyfjylOkP4ccy+aMlHOLIfVWHDdlJ35pBwbLDH4HHXq5yG4NknAhu6Rraf', 'crossorigin' => 'anonymous']);
+        Basset::map('bp-tabler-js', 'https://unpkg.com/@tabler/core@1.0.0-beta19/dist/js/tabler.min.js', ['integrity' => 'sha384-DnBu3uHMkeDdH3JZaljVS533JqQjgcRVO+uZ3YiBXQYcYITM6HER+4+RPGobVEEZ', 'crossorigin' => 'anonymous']);
     }
 }

From 92d0416e3b025ad6e08bb023445458ffa89b8fbb Mon Sep 17 00:00:00 2001
From: pxpm <pxpm88@gmail.com>
Date: Tue, 28 Jan 2025 10:37:52 +0000
Subject: [PATCH 02/24] wip

---
 composer.json | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/composer.json b/composer.json
index 62af42c..cc2f389 100644
--- a/composer.json
+++ b/composer.json
@@ -24,11 +24,11 @@
         "Laravel", "Backpack", "Backpack for Laravel", "Backpack Addon", "ThemeTabler"
     ],
     "require": {
-        "backpack/crud": "^6.2.1"
+        "backpack/crud": "7.0.0-alpha.1"
     },
     "require-dev": {
-        "phpunit/phpunit": "~9.0",
-        "orchestra/testbench": "~5|~6"
+        "phpunit/phpunit": "^10.0",
+        "orchestra/testbench": "^8||^9"
     },
     "autoload": {
         "psr-4": {

From 54f0d46dc5f6d3b03c0e2047ccd9e94d6aa63f5d Mon Sep 17 00:00:00 2001
From: pxpm <pxpm88@gmail.com>
Date: Fri, 7 Feb 2025 14:40:05 +0000
Subject: [PATCH 03/24] fix bottom buttons margin

---
 resources/assets/css/style.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/resources/assets/css/style.css b/resources/assets/css/style.css
index f7c60ff..bec895e 100644
--- a/resources/assets/css/style.css
+++ b/resources/assets/css/style.css
@@ -541,6 +541,7 @@ footer {
 /*bulk buttons*/
 #bottom_buttons a.btn.btn-sm {
     padding: 5px 10px;
+    margin-top: 5px;
 }
 
 [data-bs-theme=dark] #crudTable_wrapper table tbody tr td input[type=editable_text],

From db7882ea1d364284ee8c407a136877b4e7c256cc Mon Sep 17 00:00:00 2001
From: Pedro Martins <pxpm88@gmail.com>
Date: Thu, 6 Mar 2025 09:52:20 +0000
Subject: [PATCH 04/24] Update composer.json

---
 composer.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/composer.json b/composer.json
index cc2f389..f9b7f27 100644
--- a/composer.json
+++ b/composer.json
@@ -24,7 +24,7 @@
         "Laravel", "Backpack", "Backpack for Laravel", "Backpack Addon", "ThemeTabler"
     ],
     "require": {
-        "backpack/crud": "7.0.0-alpha.1"
+        "backpack/crud": "^7.0.0-alpha"
     },
     "require-dev": {
         "phpunit/phpunit": "^10.0",

From 0e404d3458b536e01fa4a0c1e13a3e53d4acf65c Mon Sep 17 00:00:00 2001
From: Pedro Martins <pxpm88@gmail.com>
Date: Thu, 6 Mar 2025 09:52:46 +0000
Subject: [PATCH 05/24] Update composer.json

---
 composer.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/composer.json b/composer.json
index f9b7f27..a94c1dc 100644
--- a/composer.json
+++ b/composer.json
@@ -27,8 +27,8 @@
         "backpack/crud": "^7.0.0-alpha"
     },
     "require-dev": {
-        "phpunit/phpunit": "^10.0",
-        "orchestra/testbench": "^8||^9"
+        "phpunit/phpunit": "^10.0|^11.0",
+        "orchestra/testbench": "^8||^9||^10||^11"
     },
     "autoload": {
         "psr-4": {

From 023826922453e4a34e5b6e63d2f8bb7bfbd94a35 Mon Sep 17 00:00:00 2001
From: pxpm <pxpm88@gmail.com>
Date: Mon, 9 Jun 2025 17:15:50 +0100
Subject: [PATCH 06/24] wip

---
 resources/assets/css/style.css | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/resources/assets/css/style.css b/resources/assets/css/style.css
index bec895e..fe4168e 100644
--- a/resources/assets/css/style.css
+++ b/resources/assets/css/style.css
@@ -691,9 +691,18 @@ tr.array-row td:has(span.ui-sortable-handle) {
 }
 
 @media (min-width: 992px) {
-    body[bp-layout=horizontal-overlap] .header-operation,
-    body[bp-layout=horizontal-overlap] [bp-section=page-heading] {
-        color: var(--tblr-gray-200);
+    body[bp-layout=horizontal-overlap] .header-operation {
+    color: var(--tblr-gray-200);
+    }
+
+    [data-bs-theme=light] body[bp-layout=horizontal-overlap] .datatable-widget-wrapper>.header-operation,
+    [data-bs-theme=light] body[bp-layout=horizontal-overlap] .datatable-widget-wrapper>.header-operation:not([bp-section=crud-operation-list] .header-operation) {
+        color: var(--tblr-body-color);
+    }
+
+    body[bp-layout=horizontal-overlap] [bp-section=crud-operation-list] .header-operation,
+    body[bp-layout=horizontal-overlap] .datatable-widget-wrapper>.header-operation {
+        padding-left: 0px;
     }
 }
 

From 3d14e2a826a7a21b337092c2da32b67ccc74691f Mon Sep 17 00:00:00 2001
From: pxpm <pxpm88@gmail.com>
Date: Tue, 10 Jun 2025 09:59:13 +0100
Subject: [PATCH 07/24] table heading fixes

---
 resources/assets/css/style.css | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/resources/assets/css/style.css b/resources/assets/css/style.css
index fe4168e..6356d96 100644
--- a/resources/assets/css/style.css
+++ b/resources/assets/css/style.css
@@ -692,16 +692,14 @@ tr.array-row td:has(span.ui-sortable-handle) {
 
 @media (min-width: 992px) {
     body[bp-layout=horizontal-overlap] .header-operation {
-    color: var(--tblr-gray-200);
+        color: var(--tblr-gray-200);
     }
 
-    [data-bs-theme=light] body[bp-layout=horizontal-overlap] .datatable-widget-wrapper>.header-operation,
-    [data-bs-theme=light] body[bp-layout=horizontal-overlap] .datatable-widget-wrapper>.header-operation:not([bp-section=crud-operation-list] .header-operation) {
+    [data-bs-theme=light] body[bp-layout=horizontal-overlap] .datatable-header:not([bp-section=crud-operation-list] .datatable-header) {
         color: var(--tblr-body-color);
     }
 
-    body[bp-layout=horizontal-overlap] [bp-section=crud-operation-list] .header-operation,
-    body[bp-layout=horizontal-overlap] .datatable-widget-wrapper>.header-operation {
+    body[bp-layout=horizontal-overlap] .datatable-header {
         padding-left: 0px;
     }
 }

From 5295172bd50cc1f9d7e128316c8861b0701fafc4 Mon Sep 17 00:00:00 2001
From: pxpm <pxpm88@gmail.com>
Date: Thu, 12 Jun 2025 13:28:27 +0100
Subject: [PATCH 08/24] update tabler

---
 resources/views/inc/sidebar_content.blade.php | 14 +++++++-------
 src/AddonServiceProvider.php                  |  4 ++--
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/resources/views/inc/sidebar_content.blade.php b/resources/views/inc/sidebar_content.blade.php
index 3a9c319..9b977dd 100644
--- a/resources/views/inc/sidebar_content.blade.php
+++ b/resources/views/inc/sidebar_content.blade.php
@@ -5,7 +5,7 @@
 <script type="text/javascript">
     document.addEventListener("DOMContentLoaded", function() {
         [...document.querySelectorAll('aside .dropdown-toggle.active')].forEach(el => { 
-            let bsDropdown = bootstrap.Dropdown.getInstance(el);
+            let bsDropdown = tabler.bootstrap.Dropdown.getInstance(el);
             if(typeof bsDropdown !== 'undefined' && bsDropdown !== null) {
                 bsDropdown.show();
                 el.blur();                 
@@ -16,7 +16,7 @@
         // in topbar we can use `click outside` to close the menu, but here we don't want
         // the menu closing while we interact with the page, only when another main menu is clicked
         [...document.querySelectorAll('aside .nav-item.dropdown')].forEach(el => {
-        let bsDropdown = bootstrap.Dropdown.getInstance(el.firstElementChild);
+        let bsDropdown = tabler.bootstrap.Dropdown.getInstance(el.firstElementChild);
         if(typeof bsDropdown !== 'undefined' && bsDropdown !== null) {
             bsDropdown._config.autoClose = false;
             bsDropdown.update();
@@ -24,7 +24,7 @@
             bsDropdown._element.addEventListener('show.bs.dropdown', function(e) {
                 let openDropdownInstance = document.querySelector('aside .nav-link.dropdown-toggle.show');
                 if(openDropdownInstance !== null) {
-                    let openDropdown = bootstrap.Dropdown.getInstance(openDropdownInstance);
+                    let openDropdown = tabler.bootstrap.Dropdown.getInstance(openDropdownInstance);
                     openDropdown.hide();
                 }
             });
@@ -33,7 +33,7 @@
         });
 
         [...document.querySelectorAll('header.top .dropdown-toggle, aside .dropdown-toggle')].forEach(el => {
-            let bsDropdown = bootstrap.Dropdown.getInstance(el);
+            let bsDropdown = tabler.bootstrap.Dropdown.getInstance(el);
             if(typeof bsDropdown !== 'undefined' && bsDropdown !== null) {
                 if(!bsDropdown._element.classList.contains('nav-link')) {
                     bsDropdown._element.addEventListener('show.bs.dropdown', function(e) {
@@ -42,7 +42,7 @@
                         let openDropdownInstances = targetParent.querySelectorAll('.dropdown-toggle.show');
                         if(openDropdownInstances !== null) {
                            openDropdownInstances.forEach(function(openDropdownInstance) {
-                                let openDropdown = bootstrap.Dropdown.getInstance(openDropdownInstance);
+                                let openDropdown = tabler.bootstrap.Dropdown.getInstance(openDropdownInstance);
                                 openDropdown.hide();
                             });
                         }
@@ -53,7 +53,7 @@
                         if(e.target.parentElement.classList.contains('active') || e.target.classList.contains('active')) {
                             e.target.parentElement.querySelectorAll('.dropdown-toggle.active').forEach(function(openDropdownInstance) {
                                 if(openDropdownInstance !== e.target) {
-                                    let openDropdown = bootstrap.Dropdown.getInstance(openDropdownInstance);
+                                    let openDropdown = tabler.bootstrap.Dropdown.getInstance(openDropdownInstance);
                                     openDropdown.show();
                                 }
                             });
@@ -67,7 +67,7 @@
 
         // closes the main dropdown when clicking outside
         [...document.querySelectorAll('header.top .nav-item.dropdown')].forEach(el => {
-            let bsDropdown = bootstrap.Dropdown.getInstance(el.firstElementChild);
+            let bsDropdown = tabler.bootstrap.Dropdown.getInstance(el.firstElementChild);
             if(typeof bsDropdown !== 'undefined' && bsDropdown !== null) {
                 bsDropdown._config.autoClose = 'outside';
                 bsDropdown.update();
diff --git a/src/AddonServiceProvider.php b/src/AddonServiceProvider.php
index f60a2cb..190f685 100644
--- a/src/AddonServiceProvider.php
+++ b/src/AddonServiceProvider.php
@@ -20,7 +20,7 @@ public function boot(): void
             Blade::componentNamespace('Backpack\\ThemeTabler\\View\\Components', $this->packageName);
         });
         
-        Basset::map('bp-tabler-css', 'https://unpkg.com/@tabler/core@1.0.0-beta19/dist/css/tabler.min.css', ['integrity' => 'sha384-wIPtnwKyfjylOkP4ccy+aMlHOLIfVWHDdlJ35pBwbLDH4HHXq5yG4NknAhu6Rraf', 'crossorigin' => 'anonymous']);
-        Basset::map('bp-tabler-js', 'https://unpkg.com/@tabler/core@1.0.0-beta19/dist/js/tabler.min.js', ['integrity' => 'sha384-DnBu3uHMkeDdH3JZaljVS533JqQjgcRVO+uZ3YiBXQYcYITM6HER+4+RPGobVEEZ', 'crossorigin' => 'anonymous']);
+        Basset::map('bp-tabler-css', 'https://cdn.jsdelivr.net/npm/@tabler/core@1.3.2/dist/css/tabler.min.css', ['integrity' => 'sha384-7aLJEogmAYs7X+MSqgKyrK8EQgOyuqTPfYrAs0hJt6IOuVczGdjpiNMmHiXRozR5', 'crossorigin' => 'anonymous']);
+        Basset::map('bp-tabler-js', 'https://cdn.jsdelivr.net/npm/@tabler/core@1.3.2/dist/js/tabler.min.js', ['integrity' => 'sha384-DaKT+KCi9ypTlo8Tfz74XJPqZhkV6luseXpEDIzTeYfy4PIZZW9gV6hAxC4/mGDj', 'crossorigin' => 'anonymous']);
     }
 }

From a5e7c2bbdda5b866919dfd0bcbc33205e9b92b5c Mon Sep 17 00:00:00 2001
From: Cristian Tabacitu <cristian.tabacitu@digitallyhappy.com>
Date: Thu, 19 Jun 2025 10:50:15 +0300
Subject: [PATCH 09/24] added a bit of CSS for datagrid and datalist components

---
 resources/assets/css/style.css | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/resources/assets/css/style.css b/resources/assets/css/style.css
index 6356d96..ce3c676 100644
--- a/resources/assets/css/style.css
+++ b/resources/assets/css/style.css
@@ -99,6 +99,11 @@ table .btn-link, #form_tabs p .btn-link:not(:hover) {
     color: var(--tblr-primary);
 }
 
+.bp-datagrid .btn-link,
+.bp-datalist .btn-link {
+    color: var(--tblr-primary);
+}
+
 #form_tabs p .btn-link:hover {
     background-color: transparent;
     color: var(--tblr-btn-hover-color);

From 16602da38882311d12786ef801e893bd4bc528c5 Mon Sep 17 00:00:00 2001
From: Cristian Tabacitu <cristian.tabacitu@digitallyhappy.com>
Date: Fri, 20 Jun 2025 11:39:53 +0300
Subject: [PATCH 10/24] better on bigger screens - use container-xxl everywhere

---
 resources/assets/css/style.css                       | 12 ++++++++++--
 resources/views/inc/footer.blade.php                 |  2 +-
 resources/views/inc/menu_user_dropdown.blade.php     |  2 +-
 .../layouts/_horizontal/header_container.blade.php   |  4 ++--
 .../layouts/_horizontal/menu_container.blade.php     |  2 +-
 .../_vertical_transparent/header_container.blade.php |  2 +-
 resources/views/layouts/horizontal.blade.php         |  2 +-
 resources/views/layouts/horizontal_dark.blade.php    |  2 +-
 resources/views/layouts/horizontal_overlap.blade.php |  2 +-
 resources/views/layouts/plain.blade.php              |  2 +-
 resources/views/layouts/right_vertical.blade.php     |  2 +-
 .../views/layouts/right_vertical_dark.blade.php      |  2 +-
 .../layouts/right_vertical_transparent.blade.php     |  2 +-
 resources/views/layouts/vertical.blade.php           |  2 +-
 resources/views/layouts/vertical_dark.blade.php      |  2 +-
 .../views/layouts/vertical_transparent.blade.php     |  2 +-
 16 files changed, 26 insertions(+), 18 deletions(-)

diff --git a/resources/assets/css/style.css b/resources/assets/css/style.css
index ce3c676..aa2a6e3 100644
--- a/resources/assets/css/style.css
+++ b/resources/assets/css/style.css
@@ -1,6 +1,6 @@
 /**
-    This file adjusts things so that Tabler looks cool and is used always,
-    regardless of skin color applied and dark/light mode used.
+    This file adjusts Tabler styles to better fit Backpack for Laravel.
+    This file is always used, regardless of color skin applied and dark/light mode used.
 */
 
 html:not([data-theme]) .show-theme-system { display: initial!important; }
@@ -690,6 +690,14 @@ tr.array-row td:has(span.ui-sortable-handle) {
     line-height: normal;
 }
 
+/* XXL containers for big displays */
+
+@media (min-width: 1600px) {
+    .container-xxl {
+        max-width: 1920px;
+    }
+}
+
 /* Horizontal Overlap Layout */
 .navbar-overlap:after {
     height: 13rem;
diff --git a/resources/views/inc/footer.blade.php b/resources/views/inc/footer.blade.php
index 44233d1..fcd1174 100644
--- a/resources/views/inc/footer.blade.php
+++ b/resources/views/inc/footer.blade.php
@@ -1,6 +1,6 @@
 @if (backpack_theme_config('show_powered_by') || backpack_theme_config('developer_link'))
     <footer class="d-print-none {{ backpack_theme_config('classes.footer') ?? 'footer app-footer sticky-footer bg-transparent p-3 border-top-0' }}">
-        <div class="{{ backpack_theme_config('options.useFluidContainers') ? 'container-fluid' : 'container-xl' }}">
+        <div class="{{ backpack_theme_config('options.useFluidContainers') ? 'container-fluid' : 'container-xxl' }}">
             <div class="@if (backpack_theme_config('developer_link') && backpack_theme_config('developer_name') && backpack_theme_config('show_powered_by')) row @endif text-center align-items-center flex-row-reverse">
                 @if (backpack_theme_config('show_powered_by'))
                     <div class="col-lg-auto ms-lg-auto">
diff --git a/resources/views/inc/menu_user_dropdown.blade.php b/resources/views/inc/menu_user_dropdown.blade.php
index 7dd3c7a..89e56f9 100644
--- a/resources/views/inc/menu_user_dropdown.blade.php
+++ b/resources/views/inc/menu_user_dropdown.blade.php
@@ -1,4 +1,4 @@
-<div class="nav-item dropdown">
+<div class="nav-item dropdown pe-3">
     <a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown" aria-label="Open user menu">
         <span class="avatar avatar-sm rounded-circle">
             <img class="avatar avatar-sm rounded-circle bg-transparent" src="{{ backpack_avatar_url(backpack_auth()->user()) }}"
diff --git a/resources/views/layouts/_horizontal/header_container.blade.php b/resources/views/layouts/_horizontal/header_container.blade.php
index 7718e5c..b478bda 100644
--- a/resources/views/layouts/_horizontal/header_container.blade.php
+++ b/resources/views/layouts/_horizontal/header_container.blade.php
@@ -1,6 +1,6 @@
 <header data-bs-theme={{ $theme ?? 'system' }} class="d-print-none {{ backpack_theme_config('classes.topHeader') ?? 'd-none d-lg-block px-3 navbar navbar-expand-md navbar-'.($theme ?? 'light') }}">
-    <div class="{{ backpack_theme_config('options.useFluidContainers') ? 'container-fluid' : 'container-xl' }}">
-        <div class="{{ backpack_theme_config('options.useFluidContainers') ? 'container-fluid' : 'container-xl' }} d-flex align-items-center justify-content-between">
+    <div class="{{ backpack_theme_config('options.useFluidContainers') ? 'container-fluid' : 'container-xxl' }}">
+        <div class="{{ backpack_theme_config('options.useFluidContainers') ? 'container-fluid' : 'container-xxl' }} d-flex align-items-center justify-content-between">
             <a class="h2 text-decoration-none mb-0" href="{{ url(backpack_theme_config('home_link')) }}" title="{{ backpack_theme_config('project_name') }}">
                 {!! backpack_theme_config('project_logo') !!}
             </a>
diff --git a/resources/views/layouts/_horizontal/menu_container.blade.php b/resources/views/layouts/_horizontal/menu_container.blade.php
index 1328bf5..bb804e3 100644
--- a/resources/views/layouts/_horizontal/menu_container.blade.php
+++ b/resources/views/layouts/_horizontal/menu_container.blade.php
@@ -1,7 +1,7 @@
 <header data-bs-theme={{ $theme ?? 'system' }} class="{{ backpack_theme_config('classes.menuHorizontalContainer') ?? 'navbar-expand-lg top' }}">
     <div class="collapse navbar-collapse" id="navbar-menu">
         <div class="d-print-none {{ backpack_theme_config('classes.menuHorizontalContent') ?? 'navbar navbar-expand-lg navbar-'.($theme ?? 'light').' navbar-'.(($overlap ?? false) ? 'overlap' : '') }}">
-            <div class="{{ backpack_theme_config('options.useFluidContainers') ? 'container-fluid' : 'container-xl' }}">
+            <div class="{{ backpack_theme_config('options.useFluidContainers') ? 'container-fluid' : 'container-xxl' }}">
                 <ul class="navbar-nav">
                     @unless(backpack_theme_config('options.doubleTopBarInHorizontalLayouts'))
                         <li class="nav-brand">
diff --git a/resources/views/layouts/_vertical_transparent/header_container.blade.php b/resources/views/layouts/_vertical_transparent/header_container.blade.php
index 6e2ef5d..28da370 100644
--- a/resources/views/layouts/_vertical_transparent/header_container.blade.php
+++ b/resources/views/layouts/_vertical_transparent/header_container.blade.php
@@ -1,5 +1,5 @@
 <header class="d-print-none {{ backpack_theme_config('classes.topHeader') ?? 'd-none d-lg-block px-3 navbar navbar-expand-md topbar-transparent' }}">
-    <div class="{{ backpack_theme_config('options.useFluidContainers') ? 'container-fluid' : 'container-xl' }} d-flex justify-content-end">
+    <div class="{{ backpack_theme_config('options.useFluidContainers') ? 'container-fluid' : 'container-xxl' }} d-flex justify-content-end">
         <div class="navbar-nav">
             @include(backpack_view('inc.menu'))
         </div>
diff --git a/resources/views/layouts/horizontal.blade.php b/resources/views/layouts/horizontal.blade.php
index 5404225..b7aa45b 100644
--- a/resources/views/layouts/horizontal.blade.php
+++ b/resources/views/layouts/horizontal.blade.php
@@ -19,7 +19,7 @@
         </div>
 
         <div class="page-body">
-            <main class="{{ backpack_theme_config('options.useFluidContainers') ? 'container-fluid' : 'container-xl' }}">
+            <main class="{{ backpack_theme_config('options.useFluidContainers') ? 'container-fluid' : 'container-xxl' }}">
 
                 @yield('before_breadcrumbs_widgets')
                 @includeWhen(isset($breadcrumbs), backpack_view('inc.breadcrumbs'))
diff --git a/resources/views/layouts/horizontal_dark.blade.php b/resources/views/layouts/horizontal_dark.blade.php
index 042a96d..7a4c56c 100644
--- a/resources/views/layouts/horizontal_dark.blade.php
+++ b/resources/views/layouts/horizontal_dark.blade.php
@@ -19,7 +19,7 @@
         </div>
 
         <div class="page-body">
-            <main class="{{ backpack_theme_config('options.useFluidContainers') ? 'container-fluid' : 'container-xl' }}">
+            <main class="{{ backpack_theme_config('options.useFluidContainers') ? 'container-fluid' : 'container-xxl' }}">
 
                 @yield('before_breadcrumbs_widgets')
                 @includeWhen(isset($breadcrumbs), backpack_view('inc.breadcrumbs'))
diff --git a/resources/views/layouts/horizontal_overlap.blade.php b/resources/views/layouts/horizontal_overlap.blade.php
index 183a05b..090425f 100644
--- a/resources/views/layouts/horizontal_overlap.blade.php
+++ b/resources/views/layouts/horizontal_overlap.blade.php
@@ -17,7 +17,7 @@
         @include(backpack_view('layouts._horizontal_overlap.menu_container'))
 
         <div class="page-body">
-            <main class="{{ backpack_theme_config('options.useFluidContainers') ? 'container-fluid' : 'container-xl' }}">
+            <main class="{{ backpack_theme_config('options.useFluidContainers') ? 'container-fluid' : 'container-xxl' }}">
 
                 @yield('before_breadcrumbs_widgets')
                 @includeWhen(isset($breadcrumbs), backpack_view('inc.breadcrumbs'))
diff --git a/resources/views/layouts/plain.blade.php b/resources/views/layouts/plain.blade.php
index 44bee9d..d2e353c 100644
--- a/resources/views/layouts/plain.blade.php
+++ b/resources/views/layouts/plain.blade.php
@@ -15,7 +15,7 @@
     <div class="page-wrapper">
 
         <div class="page-body">
-            <main class="{{ backpack_theme_config('options.useFluidContainers') ? 'container-fluid' : 'container-xl' }}">
+            <main class="{{ backpack_theme_config('options.useFluidContainers') ? 'container-fluid' : 'container-xxl' }}">
 
                 @yield('before_breadcrumbs_widgets')
                 @includeWhen(isset($breadcrumbs), backpack_view('inc.breadcrumbs'))
diff --git a/resources/views/layouts/right_vertical.blade.php b/resources/views/layouts/right_vertical.blade.php
index 79650f2..87a2efa 100644
--- a/resources/views/layouts/right_vertical.blade.php
+++ b/resources/views/layouts/right_vertical.blade.php
@@ -17,7 +17,7 @@
     <div class="page-wrapper">
 
         <div class="page-body">
-            <main class="{{ backpack_theme_config('options.useFluidContainers') ? 'container-fluid' : 'container-xl' }}">
+            <main class="{{ backpack_theme_config('options.useFluidContainers') ? 'container-fluid' : 'container-xxl' }}">
 
                 @yield('before_breadcrumbs_widgets')
                 @includeWhen(isset($breadcrumbs), backpack_view('inc.breadcrumbs'))
diff --git a/resources/views/layouts/right_vertical_dark.blade.php b/resources/views/layouts/right_vertical_dark.blade.php
index 287c21c..9f903af 100644
--- a/resources/views/layouts/right_vertical_dark.blade.php
+++ b/resources/views/layouts/right_vertical_dark.blade.php
@@ -17,7 +17,7 @@
     <div class="page-wrapper">
 
         <div class="page-body">
-            <main class="{{ backpack_theme_config('options.useFluidContainers') ? 'container-fluid' : 'container-xl' }}">
+            <main class="{{ backpack_theme_config('options.useFluidContainers') ? 'container-fluid' : 'container-xxl' }}">
 
                 @yield('before_breadcrumbs_widgets')
                 @includeWhen(isset($breadcrumbs), backpack_view('inc.breadcrumbs'))
diff --git a/resources/views/layouts/right_vertical_transparent.blade.php b/resources/views/layouts/right_vertical_transparent.blade.php
index b97804d..c5ad683 100644
--- a/resources/views/layouts/right_vertical_transparent.blade.php
+++ b/resources/views/layouts/right_vertical_transparent.blade.php
@@ -21,7 +21,7 @@
         </div>
 
         <div class="page-body">
-            <main class="{{ backpack_theme_config('options.useFluidContainers') ? 'container-fluid' : 'container-xl' }}">
+            <main class="{{ backpack_theme_config('options.useFluidContainers') ? 'container-fluid' : 'container-xxl' }}">
 
                 @yield('before_breadcrumbs_widgets')
                 @includeWhen(isset($breadcrumbs), backpack_view('inc.breadcrumbs'))
diff --git a/resources/views/layouts/vertical.blade.php b/resources/views/layouts/vertical.blade.php
index a96f284..013645f 100644
--- a/resources/views/layouts/vertical.blade.php
+++ b/resources/views/layouts/vertical.blade.php
@@ -17,7 +17,7 @@
     <div class="page-wrapper">
 
         <div class="page-body">
-            <main class="{{ backpack_theme_config('options.useFluidContainers') ? 'container-fluid' : 'container-xl' }}">
+            <main class="{{ backpack_theme_config('options.useFluidContainers') ? 'container-fluid' : 'container-xxl' }}">
 
                 @yield('before_breadcrumbs_widgets')
                 @includeWhen(isset($breadcrumbs), backpack_view('inc.breadcrumbs'))
diff --git a/resources/views/layouts/vertical_dark.blade.php b/resources/views/layouts/vertical_dark.blade.php
index a965aa3..d94ab87 100644
--- a/resources/views/layouts/vertical_dark.blade.php
+++ b/resources/views/layouts/vertical_dark.blade.php
@@ -17,7 +17,7 @@
     <div class="page-wrapper">
 
         <div class="page-body">
-            <main class="{{ backpack_theme_config('options.useFluidContainers') ? 'container-fluid' : 'container-xl' }}">
+            <main class="{{ backpack_theme_config('options.useFluidContainers') ? 'container-fluid' : 'container-xxl' }}">
 
                 @yield('before_breadcrumbs_widgets')
                 @includeWhen(isset($breadcrumbs), backpack_view('inc.breadcrumbs'))
diff --git a/resources/views/layouts/vertical_transparent.blade.php b/resources/views/layouts/vertical_transparent.blade.php
index 2ee3e54..3b758c0 100644
--- a/resources/views/layouts/vertical_transparent.blade.php
+++ b/resources/views/layouts/vertical_transparent.blade.php
@@ -21,7 +21,7 @@
         </div>
 
         <div class="page-body">
-            <main class="{{ backpack_theme_config('options.useFluidContainers') ? 'container-fluid' : 'container-xl' }}">
+            <main class="{{ backpack_theme_config('options.useFluidContainers') ? 'container-fluid' : 'container-xxl' }}">
 
                 @yield('before_breadcrumbs_widgets')
                 @includeWhen(isset($breadcrumbs), backpack_view('inc.breadcrumbs'))

From 90451aa4291b9908f1ec3cb070bb6a7b1e2f74b5 Mon Sep 17 00:00:00 2001
From: Cristian Tabacitu <cristian.tabacitu@digitallyhappy.com>
Date: Fri, 20 Jun 2025 12:06:58 +0300
Subject: [PATCH 11/24] add glass skin

---
 config/theme-tabler.php                      |  3 +-
 resources/assets/css/skins/glass.css         | 51 ++++++++++++++++++++
 resources/views/layouts/horizontal.blade.php |  2 +-
 3 files changed, 54 insertions(+), 2 deletions(-)
 create mode 100644 resources/assets/css/skins/glass.css

diff --git a/config/theme-tabler.php b/config/theme-tabler.php
index c6fb196..94b5beb 100644
--- a/config/theme-tabler.php
+++ b/config/theme-tabler.php
@@ -22,7 +22,7 @@
      * Possible values: horizontal, horizontal_dark, horizontal_overlap, vertical,
      * vertical_dark, vertical_transparent (legacy theme), right_vertical, right_vertical_dark, right_vertical_transparent
      */
-    'layout' => 'horizontal_overlap',
+    'layout' => 'horizontal',
 
     /**
      * Pick a login page layout.
@@ -41,6 +41,7 @@
     'styles' => [
         base_path('vendor/backpack/theme-tabler/resources/assets/css/color-adjustments.css'),
         base_path('vendor/backpack/theme-tabler/resources/assets/css/colors.css'),
+        base_path('vendor/backpack/theme-tabler/resources/assets/css/skins/glass.css'),
     ],
 
     /**
diff --git a/resources/assets/css/skins/glass.css b/resources/assets/css/skins/glass.css
new file mode 100644
index 0000000..07e83fd
--- /dev/null
+++ b/resources/assets/css/skins/glass.css
@@ -0,0 +1,51 @@
+/*
+    Fuzzy ball skin for Tabler and/or Backpack for Laravel.
+*/
+
+/* BlurBerry background */
+body {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' viewBox='0 0 800 800'%3E%3Cdefs%3E%3Cfilter id='bbblurry-filter' x='-100%25' y='-100%25' width='400%25' height='400%25' filterUnits='objectBoundingBox' primitiveUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur stdDeviation='40' x='0%25' y='0%25' width='100%25' height='100%25' in='SourceGraphic' edgeMode='none' result='blur'%3E%3C/feGaussianBlur%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url(%23bbblurry-filter)'%3E%3Cellipse rx='150' ry='150' cx='462.9146816404486' cy='534.6882471935419' fill='hsl(37, 99%25, 67%25)'%3E%3C/ellipse%3E%3Cellipse rx='150' ry='150' cx='179.02369011526488' cy='367.0291623615862' fill='hsl(316, 73%25, 52%25)'%3E%3C/ellipse%3E%3Cellipse rx='150' ry='150' cx='245.39283048169654' cy='478.9292209148051' fill='hsl(185, 100%25, 57%25)'%3E%3C/ellipse%3E%3C/g%3E%3C/svg%3E");
+    background-size: cover;
+    background-position: bottom;
+    background-repeat: no-repeat;
+    /* background-attachment: fixed; */
+}
+
+/* SLIMBAR - reduced-width navbar when horizontal layout is active */
+body[bp-layout=horizontal] .single-top-bar #navbar-menu .navbar {
+    border-radius: 0.5rem;
+    margin-top: 1rem;
+    margin-right: 3rem;
+    margin-left: 3rem;
+}
+
+/* :root, */
+[data-bs-theme=light],
+[data-menu-theme=light] {
+    --tblr-bg-surface: rgba(255, 255, 255, 0.7);
+    --tblr-bg-surface-tertiary: rgba(255, 255, 255, 0.7);
+    --tblr-bg-surface-border: 1px solid rgba(255, 255, 255, 0.3);
+    --tblr-bg-surface-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
+    --tblr-bg-surface-backdrop: blur(5px);
+    --tblr-bg-surface-backdrop-webkit: blur(5px);
+
+    /* TODO: Dropdowns need to be more opaque */
+    --tblr-dropdown-bg: rgba(255, 255, 255, 0.9)!important;
+    --tblr-table-striped-bg: rgba(255, 255, 255, 0.7)!important;
+    --tblr-table-bg-typed: rgba(255, 255, 255, 0.7)!important;
+}
+
+.dropdown-menu.show {
+    background-color: var(--tblr-dropdown-bg);
+    background-color: rgba(255, 255, 255, 0.97) !important;
+}
+
+.table-striped>tbody>tr:nth-of-type(2n)>* {
+    background-color: var(--tblr-table-striped-bg);
+    background-color: rgba(255, 255, 255, 0.2) !important;
+    --tblr-table-bg-type: rgba(255, 255, 255, 0.2) !important;
+}
+
+table.table.dataTable.table-striped>tbody>tr:nth-of-type(2n+1)>* {
+    box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-stripe), 0.03) !important;
+}
diff --git a/resources/views/layouts/horizontal.blade.php b/resources/views/layouts/horizontal.blade.php
index b7aa45b..cd681ab 100644
--- a/resources/views/layouts/horizontal.blade.php
+++ b/resources/views/layouts/horizontal.blade.php
@@ -13,7 +13,7 @@
 <div class="page">
     <div class="page-wrapper">
 
-        <div class="@if(backpack_theme_config('options.useStickyHeader')) sticky-top @endif">
+        <div class="@if(backpack_theme_config('options.doubleTopBarInHorizontalLayouts')) double-top-bar @else single-top-bar @endif @if(backpack_theme_config('options.useStickyHeader')) sticky-top @endif">
             @includeWhen(backpack_theme_config('options.doubleTopBarInHorizontalLayouts'), backpack_view('layouts._horizontal.header_container'))
             @include(backpack_view('layouts._horizontal.menu_container'))
         </div>

From 126c9c0f6bab7805d316df581cbe7c0df6b6390a Mon Sep 17 00:00:00 2001
From: Cristian Tabacitu <cristian.tabacitu@digitallyhappy.com>
Date: Fri, 20 Jun 2025 12:07:52 +0300
Subject: [PATCH 12/24] fix datatable classes

---
 resources/assets/css/style.css | 29 ++++++++++++++++++-----------
 1 file changed, 18 insertions(+), 11 deletions(-)

diff --git a/resources/assets/css/style.css b/resources/assets/css/style.css
index aa2a6e3..351f6e1 100644
--- a/resources/assets/css/style.css
+++ b/resources/assets/css/style.css
@@ -164,7 +164,7 @@ table .btn-link:active {
     background-color: var(--tblr-table-bg);
 }
 
-[data-bs-theme=dark] #crudTable_processing.dataTables_processing.card {
+[data-bs-theme=dark] .dt-processing.card {
     background-color: var(--tblr-dark);
     border-radius: 0;
 }
@@ -304,18 +304,19 @@ header.top div.dropdown-menu a.dropdown-item i {
 }
 
 /*table hover*/
-#crudTable_wrapper .table-striped > tbody > tr:hover > * {
+.crud-table.table-striped > tbody > tr:hover > * {
     box-shadow: none !important;
-    background-color: rgba(var(--tblr-primary-rgb),.1);
+    background-color: rgba(var(--tblr-primary-rgb),.1)!important;
 }
 
-[data-bs-theme=light] table#crudTable {
+/*
+[data-bs-theme=light] table.crud-table {
     background-color: var(--tblr-white);
 }
 
-[data-bs-theme=dark] table#crudTable {
+[data-bs-theme=dark] table.crud-table {
     background-color: var(--tblr-bg-surface);
-}
+} */
 
 /*filters*/
 [data-bs-theme=dark] .navbar-filters .select2-container .select2-search input {
@@ -362,7 +363,12 @@ header.top div.dropdown-menu a.dropdown-item i {
 span.select2-selection.select2-selection--single,
 .select2-selection.select2-selection--multiple ul.select2-selection__rendered,
 .form-control {
-    border-radius: 0 !important;
+    /* border-radius: 0 !important; */
+    border-radius: var(--tblr-border-radius);
+}
+
+form .select2.select2-container {
+    border-radius: var(--tblr-border-radius);
 }
 
 [data-bs-theme=dark] .navbar-filters .select2-results ul.select2-results__options li.select2-results__option.select2-results__option--highlighted {
@@ -549,16 +555,16 @@ footer {
     margin-top: 5px;
 }
 
-[data-bs-theme=dark] #crudTable_wrapper table tbody tr td input[type=editable_text],
-[data-bs-theme=dark] #crudTable_wrapper table tbody tr td select {
+/* [data-bs-theme=dark] table.crud-table tbody tr td input[type=editable_text],
+[data-bs-theme=dark] table.crud-table tbody tr td select {
     color: var(--tblr-light-text);
     border-bottom: 1px dashed var(--tblr-gray-700) !important;
 }
 
-[data-bs-theme=dark] #crudTable_wrapper table tbody tr td input[type=editable_text]:focus {
+[data-bs-theme=dark] table.crud-table tbody tr td input[type=editable_text]:focus {
     --bs-table-accent-bg: none !important;
     box-shadow: none !important;
-}
+} */
 
 a.actions-buttons-column {
     border: none;
@@ -600,6 +606,7 @@ body {
 /*Adjust topbar*/
 .topbar-transparent {
     background-color: transparent !important;
+    box-shadow: none;
 }
 
 /*Sidebar shortcuts*/

From f70cde2cb871b3072008577392b864129ba0d801 Mon Sep 17 00:00:00 2001
From: Cristian Tabacitu <cristian.tabacitu@digitallyhappy.com>
Date: Tue, 24 Jun 2025 10:55:11 +0300
Subject: [PATCH 13/24] some fixes in glass styling

---
 resources/assets/css/skins/glass.css | 37 +++++++++++++++++++++++++---
 resources/assets/css/style.css       | 23 ++++++++++++++---
 2 files changed, 52 insertions(+), 8 deletions(-)

diff --git a/resources/assets/css/skins/glass.css b/resources/assets/css/skins/glass.css
index 07e83fd..5b614e4 100644
--- a/resources/assets/css/skins/glass.css
+++ b/resources/assets/css/skins/glass.css
@@ -2,8 +2,8 @@
     Fuzzy ball skin for Tabler and/or Backpack for Laravel.
 */
 
-/* BlurBerry background */
 body {
+    /* BlurBerry background */
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' viewBox='0 0 800 800'%3E%3Cdefs%3E%3Cfilter id='bbblurry-filter' x='-100%25' y='-100%25' width='400%25' height='400%25' filterUnits='objectBoundingBox' primitiveUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur stdDeviation='40' x='0%25' y='0%25' width='100%25' height='100%25' in='SourceGraphic' edgeMode='none' result='blur'%3E%3C/feGaussianBlur%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url(%23bbblurry-filter)'%3E%3Cellipse rx='150' ry='150' cx='462.9146816404486' cy='534.6882471935419' fill='hsl(37, 99%25, 67%25)'%3E%3C/ellipse%3E%3Cellipse rx='150' ry='150' cx='179.02369011526488' cy='367.0291623615862' fill='hsl(316, 73%25, 52%25)'%3E%3C/ellipse%3E%3Cellipse rx='150' ry='150' cx='245.39283048169654' cy='478.9292209148051' fill='hsl(185, 100%25, 57%25)'%3E%3C/ellipse%3E%3C/g%3E%3C/svg%3E");
     background-size: cover;
     background-position: bottom;
@@ -19,24 +19,53 @@ body[bp-layout=horizontal] .single-top-bar #navbar-menu .navbar {
     margin-left: 3rem;
 }
 
+/* media query for slimbar for between 992px to 1400px */
+@media (min-width: 992px) and (max-width: 1400px) {
+    body[bp-layout=horizontal] .single-top-bar #navbar-menu .navbar {
+        margin-right: 1rem;
+        margin-left: 1rem;
+    }
+}
+
+@media (min-width: 1600px) {
+    body[bp-layout=horizontal] .single-top-bar #navbar-menu .navbar {
+        margin-right: 1rem;
+        margin-left: 1rem;
+    }
+}
+
 /* :root, */
 [data-bs-theme=light],
 [data-menu-theme=light] {
+    /* Base surface variables */
     --tblr-bg-surface: rgba(255, 255, 255, 0.7);
     --tblr-bg-surface-tertiary: rgba(255, 255, 255, 0.7);
+
+    /* Glass effect properties */
     --tblr-bg-surface-border: 1px solid rgba(255, 255, 255, 0.3);
     --tblr-bg-surface-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
     --tblr-bg-surface-backdrop: blur(5px);
     --tblr-bg-surface-backdrop-webkit: blur(5px);
 
-    /* TODO: Dropdowns need to be more opaque */
+    /* Card footers */
+    /* --tblr-card-cap-bg: transparent; */
+
+    /* Dropdowns need to be more opaque */
     --tblr-dropdown-bg: rgba(255, 255, 255, 0.9)!important;
     --tblr-table-striped-bg: rgba(255, 255, 255, 0.7)!important;
     --tblr-table-bg-typed: rgba(255, 255, 255, 0.7)!important;
+
+    /* Modals */
+    --tblr-modal-bg: rgba(255, 255, 255, 0.97) !important;
+}
+
+.card-footer,
+.modal-footer {
+    background-color: transparent;
 }
 
-.dropdown-menu.show {
-    background-color: var(--tblr-dropdown-bg);
+[data-bs-theme=light] .dropdown-menu.show,
+[data-bs-theme=light] .modal-content {
     background-color: rgba(255, 255, 255, 0.97) !important;
 }
 
diff --git a/resources/assets/css/style.css b/resources/assets/css/style.css
index 351f6e1..f725b88 100644
--- a/resources/assets/css/style.css
+++ b/resources/assets/css/style.css
@@ -188,9 +188,9 @@ table .btn-link:active {
     background-color: transparent;
 }
 
-[data-bs-theme=dark] .btn-link:hover, 
-[data-bs-theme=dark] a:not(.btn):hover, 
-[data-menu-theme=dark] .btn-link:hover, 
+[data-bs-theme=dark] .btn-link:hover,
+[data-bs-theme=dark] a:not(.btn):hover,
+[data-menu-theme=dark] .btn-link:hover,
 [data-menu-theme=dark] a:not(.btn):hover {
     color: var(--tblr-gray-200);
 }
@@ -464,6 +464,21 @@ form .select2.select2-container {
     color: var(--tblr-light-text);
 }
 
+div.dtr-modal div.dtr-modal-background {
+    /* background-color: rgba(var(--tblr-dark-rgb), 0.8) !important; */
+    -webkit-backdrop-filter: blur(4px);
+    backdrop-filter: blur(4px);
+    --tblr-modal-margin: 1.75rem;
+    background: var(--tblr-bg-surface)!important;
+}
+
+div.dtr-modal div.dtr-modal-display {
+    border: 1px solid var(--tblr-primary-border) !important;
+    background-color: var(--tblr-bg-surface) !important;
+    border-radius: var(--tblr-border-radius) !important;
+    box-shadow: var(--tblr-shadow) !important;
+}
+
 /*tabbed fields*/
 div.tab-container div.tab-content {
     padding: 25px;
@@ -1028,4 +1043,4 @@ body[bp-layout=horizontal-overlap] .nav-item > a {
 
 [data-bs-theme=dark] .alert {
     color: var(--tblr-gray-400);
-}
\ No newline at end of file
+}

From e957689193e3309122c7a50d55ff7dca13f97055 Mon Sep 17 00:00:00 2001
From: Cristian Tabacitu <cristian.tabacitu@digitallyhappy.com>
Date: Tue, 24 Jun 2025 11:29:40 +0300
Subject: [PATCH 14/24] color fixes

---
 resources/assets/css/skins/glass.css | 32 ++++++++++++++--------------
 resources/assets/css/style.css       |  6 +++---
 2 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/resources/assets/css/skins/glass.css b/resources/assets/css/skins/glass.css
index 5b614e4..cb8ec5b 100644
--- a/resources/assets/css/skins/glass.css
+++ b/resources/assets/css/skins/glass.css
@@ -8,7 +8,7 @@ body {
     background-size: cover;
     background-position: bottom;
     background-repeat: no-repeat;
-    /* background-attachment: fixed; */
+    background-attachment: fixed;
 }
 
 /* SLIMBAR - reduced-width navbar when horizontal layout is active */
@@ -47,34 +47,34 @@ body[bp-layout=horizontal] .single-top-bar #navbar-menu .navbar {
     --tblr-bg-surface-backdrop: blur(5px);
     --tblr-bg-surface-backdrop-webkit: blur(5px);
 
-    /* Card footers */
-    /* --tblr-card-cap-bg: transparent; */
-
-    /* Dropdowns need to be more opaque */
-    --tblr-dropdown-bg: rgba(255, 255, 255, 0.9)!important;
+    /* Table styles */
     --tblr-table-striped-bg: rgba(255, 255, 255, 0.7)!important;
     --tblr-table-bg-typed: rgba(255, 255, 255, 0.7)!important;
-
-    /* Modals */
-    --tblr-modal-bg: rgba(255, 255, 255, 0.97) !important;
 }
 
-.card-footer,
-.modal-footer {
-    background-color: transparent;
+[data-bs-theme=light] .dropdown-menu {
+    --tblr-dropdown-bg: rgba(255, 255, 255, 1)!important;
 }
 
-[data-bs-theme=light] .dropdown-menu.show,
 [data-bs-theme=light] .modal-content {
-    background-color: rgba(255, 255, 255, 0.97) !important;
+    --tblr-modal-bg: rgba(255, 255, 255, 0.97) !important;
+    --tblr-footer-bg: transparent;
 }
 
-.table-striped>tbody>tr:nth-of-type(2n)>* {
+[data-bs-theme=light] .card {
+    --tblr-card-cap-bg: transparent;
+}
+
+[data-bs-theme=light] .table-striped>tbody>tr:nth-of-type(2n)>* {
     background-color: var(--tblr-table-striped-bg);
     background-color: rgba(255, 255, 255, 0.2) !important;
     --tblr-table-bg-type: rgba(255, 255, 255, 0.2) !important;
 }
 
-table.table.dataTable.table-striped>tbody>tr:nth-of-type(2n+1)>* {
+[data-bs-theme=light] table.table.dataTable.table-striped>tbody>tr:nth-of-type(2n+1)>* {
     box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-stripe), 0.03) !important;
 }
+
+.navbar {
+    --tblr-navbar-active-bg: rgba(var(--tblr-primary-rgb), 0.3);
+}
diff --git a/resources/assets/css/style.css b/resources/assets/css/style.css
index f725b88..0d96e58 100644
--- a/resources/assets/css/style.css
+++ b/resources/assets/css/style.css
@@ -164,8 +164,8 @@ table .btn-link:active {
     background-color: var(--tblr-table-bg);
 }
 
-[data-bs-theme=dark] .dt-processing.card {
-    background-color: var(--tblr-dark);
+.dataTables_processing.card {
+    background-color: var(--tblr-bg-surface)!important;
     border-radius: 0;
 }
 
@@ -464,7 +464,7 @@ form .select2.select2-container {
     color: var(--tblr-light-text);
 }
 
-div.dtr-modal div.dtr-modal-background {
+[data-bs-theme=light] div.dtr-modal div.dtr-modal-background {
     /* background-color: rgba(var(--tblr-dark-rgb), 0.8) !important; */
     -webkit-backdrop-filter: blur(4px);
     backdrop-filter: blur(4px);

From 30b740344b297f81cd9127928fdb2ba7c59ab81f Mon Sep 17 00:00:00 2001
From: Cristian Tabacitu <cristian.tabacitu@digitallyhappy.com>
Date: Tue, 24 Jun 2025 11:33:19 +0300
Subject: [PATCH 15/24] fix datatable header hover

---
 resources/assets/css/style.css | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/resources/assets/css/style.css b/resources/assets/css/style.css
index 0d96e58..965211d 100644
--- a/resources/assets/css/style.css
+++ b/resources/assets/css/style.css
@@ -1044,3 +1044,12 @@ body[bp-layout=horizontal-overlap] .nav-item > a {
 [data-bs-theme=dark] .alert {
     color: var(--tblr-gray-400);
 }
+
+table.dataTable thead>tr>th.dt-orderable-asc:hover,
+table.dataTable thead>tr>th.dt-orderable-desc:hover,
+table.dataTable thead>tr>td.dt-orderable-asc:hover,
+table.dataTable thead>tr>td.dt-orderable-desc:hover
+{
+    outline: none !important;
+    outline-offset: 0 !important;
+}

From d369bdf75f69c5523e1215639c81d20d12c1288a Mon Sep 17 00:00:00 2001
From: Cristian Tabacitu <cristian.tabacitu@digitallyhappy.com>
Date: Fri, 27 Jun 2025 13:03:51 +0300
Subject: [PATCH 16/24] move optional CSS styles to skin files

---
 config/theme-tabler.php                             |  6 +++---
 .../backpack-color-palette.css}                     |  0
 resources/assets/css/skins/fuzzy-background.css     | 12 ++++++++++++
 resources/assets/css/skins/glass.css                | 13 -------------
 resources/views/inc/theme_styles.blade.php          |  7 ++++---
 5 files changed, 19 insertions(+), 19 deletions(-)
 rename resources/assets/css/{colors.css => skins/backpack-color-palette.css} (100%)
 create mode 100644 resources/assets/css/skins/fuzzy-background.css

diff --git a/config/theme-tabler.php b/config/theme-tabler.php
index 94b5beb..0b13b8f 100644
--- a/config/theme-tabler.php
+++ b/config/theme-tabler.php
@@ -35,13 +35,13 @@
      * Note: if you want to customize the style to create your own custom skin colors:
      *   - make a copy of the file "vendor/backpack/theme-tabler/resources/assets/css/colors.css" into your project
      *   - adjust colors variables as you wish
-     *   - replace "base_path('vendor/backpack/theme-tabler/resources/assets/css/colors.css')," with the path to the file created above
+     *   - replace "base_path('vendor/backpack/theme-tabler/resources/assets/css/backpack-color-palette.css')," with the path to the file created above
      *   - boom!
      */
     'styles' => [
-        base_path('vendor/backpack/theme-tabler/resources/assets/css/color-adjustments.css'),
-        base_path('vendor/backpack/theme-tabler/resources/assets/css/colors.css'),
+        base_path('vendor/backpack/theme-tabler/resources/assets/css/skins/backpack-color-palette.css'),
         base_path('vendor/backpack/theme-tabler/resources/assets/css/skins/glass.css'),
+        base_path('vendor/backpack/theme-tabler/resources/assets/css/skins/fuzzy-background.css'),
     ],
 
     /**
diff --git a/resources/assets/css/colors.css b/resources/assets/css/skins/backpack-color-palette.css
similarity index 100%
rename from resources/assets/css/colors.css
rename to resources/assets/css/skins/backpack-color-palette.css
diff --git a/resources/assets/css/skins/fuzzy-background.css b/resources/assets/css/skins/fuzzy-background.css
new file mode 100644
index 0000000..a5a3bc3
--- /dev/null
+++ b/resources/assets/css/skins/fuzzy-background.css
@@ -0,0 +1,12 @@
+/*
+    Fuzzy ball skin for Tabler and/or Backpack for Laravel.
+*/
+
+body {
+    /* BlurBerry background */
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' viewBox='0 0 800 800'%3E%3Cdefs%3E%3Cfilter id='bbblurry-filter' x='-100%25' y='-100%25' width='400%25' height='400%25' filterUnits='objectBoundingBox' primitiveUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur stdDeviation='40' x='0%25' y='0%25' width='100%25' height='100%25' in='SourceGraphic' edgeMode='none' result='blur'%3E%3C/feGaussianBlur%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url(%23bbblurry-filter)'%3E%3Cellipse rx='150' ry='150' cx='462.9146816404486' cy='534.6882471935419' fill='hsl(37, 99%25, 67%25)'%3E%3C/ellipse%3E%3Cellipse rx='150' ry='150' cx='179.02369011526488' cy='367.0291623615862' fill='hsl(316, 73%25, 52%25)'%3E%3C/ellipse%3E%3Cellipse rx='150' ry='150' cx='245.39283048169654' cy='478.9292209148051' fill='hsl(185, 100%25, 57%25)'%3E%3C/ellipse%3E%3C/g%3E%3C/svg%3E");
+    background-size: cover;
+    background-position: bottom;
+    background-repeat: no-repeat;
+    background-attachment: fixed;
+}
diff --git a/resources/assets/css/skins/glass.css b/resources/assets/css/skins/glass.css
index cb8ec5b..b44c840 100644
--- a/resources/assets/css/skins/glass.css
+++ b/resources/assets/css/skins/glass.css
@@ -1,16 +1,3 @@
-/*
-    Fuzzy ball skin for Tabler and/or Backpack for Laravel.
-*/
-
-body {
-    /* BlurBerry background */
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' viewBox='0 0 800 800'%3E%3Cdefs%3E%3Cfilter id='bbblurry-filter' x='-100%25' y='-100%25' width='400%25' height='400%25' filterUnits='objectBoundingBox' primitiveUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur stdDeviation='40' x='0%25' y='0%25' width='100%25' height='100%25' in='SourceGraphic' edgeMode='none' result='blur'%3E%3C/feGaussianBlur%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url(%23bbblurry-filter)'%3E%3Cellipse rx='150' ry='150' cx='462.9146816404486' cy='534.6882471935419' fill='hsl(37, 99%25, 67%25)'%3E%3C/ellipse%3E%3Cellipse rx='150' ry='150' cx='179.02369011526488' cy='367.0291623615862' fill='hsl(316, 73%25, 52%25)'%3E%3C/ellipse%3E%3Cellipse rx='150' ry='150' cx='245.39283048169654' cy='478.9292209148051' fill='hsl(185, 100%25, 57%25)'%3E%3C/ellipse%3E%3C/g%3E%3C/svg%3E");
-    background-size: cover;
-    background-position: bottom;
-    background-repeat: no-repeat;
-    background-attachment: fixed;
-}
-
 /* SLIMBAR - reduced-width navbar when horizontal layout is active */
 body[bp-layout=horizontal] .single-top-bar #navbar-menu .navbar {
     border-radius: 0.5rem;
diff --git a/resources/views/inc/theme_styles.blade.php b/resources/views/inc/theme_styles.blade.php
index 5a4141d..eaaf4e1 100644
--- a/resources/views/inc/theme_styles.blade.php
+++ b/resources/views/inc/theme_styles.blade.php
@@ -1,8 +1,9 @@
-{{-- 
-    we use a render blocking script in <head> to force the theme attribute to be in the document before it renders 
+{{--
+    we use a render blocking script in <head> to force the theme attribute to be in the document before it renders
     avoiding white flicks when for example, using the dark color mode.
 --}}
 <script>document.documentElement.setAttribute("data-bs-theme", localStorage.colorMode ?? 'light');</script>
 
 @basset('bp-tabler-css')
-@basset(base_path('vendor/backpack/theme-tabler/resources/assets/css/style.css'))
\ No newline at end of file
+@basset(base_path('vendor/backpack/theme-tabler/resources/assets/css/style.css'))
+@basset(base_path('vendor/backpack/theme-tabler/resources/assets/css/color-adjustments.css'))

From 21c3eae56ff02fadbb58b1c5e4a05d25b7ed72b3 Mon Sep 17 00:00:00 2001
From: pxpm <pxpm88@gmail.com>
Date: Tue, 8 Jul 2025 14:44:11 +0100
Subject: [PATCH 17/24] make tabler backward compatible

---
 resources/assets/js/tabler.js               | 5 +++++
 resources/views/inc/theme_scripts.blade.php | 2 +-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/resources/assets/js/tabler.js b/resources/assets/js/tabler.js
index b317658..612e221 100644
--- a/resources/assets/js/tabler.js
+++ b/resources/assets/js/tabler.js
@@ -18,3 +18,8 @@
             el = el.parentElement;
         }
     });
+/**
+ * For backward compatibility with previous tabler version and other themes.
+ * In Tabler v1x, the bootstrap object is no longer available globally
+ */
+window.bootstrap = tabler.bootstrap;
diff --git a/resources/views/inc/theme_scripts.blade.php b/resources/views/inc/theme_scripts.blade.php
index e4adbb0..5325575 100644
--- a/resources/views/inc/theme_scripts.blade.php
+++ b/resources/views/inc/theme_scripts.blade.php
@@ -1,2 +1,2 @@
-@basset(base_path('vendor/backpack/theme-tabler/resources/assets/js/tabler.js'))
 @basset('bp-tabler-js')
+@basset(base_path('vendor/backpack/theme-tabler/resources/assets/js/tabler.js'))

From 975cf9ba18cf2c8579714d3d898dd82c33cfe8d2 Mon Sep 17 00:00:00 2001
From: pxpm <pxpm88@gmail.com>
Date: Wed, 16 Jul 2025 14:10:30 +0100
Subject: [PATCH 18/24] update assets

---
 resources/views/inc/theme_scripts.blade.php | 2 +-
 resources/views/inc/theme_styles.blade.php  | 2 +-
 src/AddonServiceProvider.php                | 3 ---
 3 files changed, 2 insertions(+), 5 deletions(-)

diff --git a/resources/views/inc/theme_scripts.blade.php b/resources/views/inc/theme_scripts.blade.php
index 5325575..60a6e18 100644
--- a/resources/views/inc/theme_scripts.blade.php
+++ b/resources/views/inc/theme_scripts.blade.php
@@ -1,2 +1,2 @@
-@basset('bp-tabler-js')
+@basset('https://cdn.jsdelivr.net/npm/@tabler/core@1.3.2/dist/js/tabler.min.js', true, ['integrity' => 'sha384-DaKT+KCi9ypTlo8Tfz74XJPqZhkV6luseXpEDIzTeYfy4PIZZW9gV6hAxC4/mGDj', 'crossorigin' => 'anonymous'])
 @basset(base_path('vendor/backpack/theme-tabler/resources/assets/js/tabler.js'))
diff --git a/resources/views/inc/theme_styles.blade.php b/resources/views/inc/theme_styles.blade.php
index eaaf4e1..8e5ce4a 100644
--- a/resources/views/inc/theme_styles.blade.php
+++ b/resources/views/inc/theme_styles.blade.php
@@ -4,6 +4,6 @@
 --}}
 <script>document.documentElement.setAttribute("data-bs-theme", localStorage.colorMode ?? 'light');</script>
 
-@basset('bp-tabler-css')
+@basset('https://cdn.jsdelivr.net/npm/@tabler/core@1.3.2/dist/css/tabler.min.css', true, ['integrity' => 'sha384-7aLJEogmAYs7X+MSqgKyrK8EQgOyuqTPfYrAs0hJt6IOuVczGdjpiNMmHiXRozR5', 'crossorigin' => 'anonymous'])
 @basset(base_path('vendor/backpack/theme-tabler/resources/assets/css/style.css'))
 @basset(base_path('vendor/backpack/theme-tabler/resources/assets/css/color-adjustments.css'))
diff --git a/src/AddonServiceProvider.php b/src/AddonServiceProvider.php
index 190f685..49f1ba7 100644
--- a/src/AddonServiceProvider.php
+++ b/src/AddonServiceProvider.php
@@ -19,8 +19,5 @@ public function boot(): void
         $this->app->afterResolving(BladeCompiler::class, function () {
             Blade::componentNamespace('Backpack\\ThemeTabler\\View\\Components', $this->packageName);
         });
-        
-        Basset::map('bp-tabler-css', 'https://cdn.jsdelivr.net/npm/@tabler/core@1.3.2/dist/css/tabler.min.css', ['integrity' => 'sha384-7aLJEogmAYs7X+MSqgKyrK8EQgOyuqTPfYrAs0hJt6IOuVczGdjpiNMmHiXRozR5', 'crossorigin' => 'anonymous']);
-        Basset::map('bp-tabler-js', 'https://cdn.jsdelivr.net/npm/@tabler/core@1.3.2/dist/js/tabler.min.js', ['integrity' => 'sha384-DaKT+KCi9ypTlo8Tfz74XJPqZhkV6luseXpEDIzTeYfy4PIZZW9gV6hAxC4/mGDj', 'crossorigin' => 'anonymous']);
     }
 }

From 2859a1659aee74de8a7202ffe664f71d9e53ed58 Mon Sep 17 00:00:00 2001
From: pxpm <pxpm88@gmail.com>
Date: Tue, 22 Jul 2025 15:54:38 +0100
Subject: [PATCH 19/24] wip

---
 resources/assets/css/skins/fuzzy-background.css | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/resources/assets/css/skins/fuzzy-background.css b/resources/assets/css/skins/fuzzy-background.css
index a5a3bc3..93d8e0d 100644
--- a/resources/assets/css/skins/fuzzy-background.css
+++ b/resources/assets/css/skins/fuzzy-background.css
@@ -2,11 +2,17 @@
     Fuzzy ball skin for Tabler and/or Backpack for Laravel.
 */
 
-body {
+html {
     /* BlurBerry background */
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' viewBox='0 0 800 800'%3E%3Cdefs%3E%3Cfilter id='bbblurry-filter' x='-100%25' y='-100%25' width='400%25' height='400%25' filterUnits='objectBoundingBox' primitiveUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur stdDeviation='40' x='0%25' y='0%25' width='100%25' height='100%25' in='SourceGraphic' edgeMode='none' result='blur'%3E%3C/feGaussianBlur%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url(%23bbblurry-filter)'%3E%3Cellipse rx='150' ry='150' cx='462.9146816404486' cy='534.6882471935419' fill='hsl(37, 99%25, 67%25)'%3E%3C/ellipse%3E%3Cellipse rx='150' ry='150' cx='179.02369011526488' cy='367.0291623615862' fill='hsl(316, 73%25, 52%25)'%3E%3C/ellipse%3E%3Cellipse rx='150' ry='150' cx='245.39283048169654' cy='478.9292209148051' fill='hsl(185, 100%25, 57%25)'%3E%3C/ellipse%3E%3C/g%3E%3C/svg%3E");
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' viewBox='0 0 800 800'%3E%3Cdefs%3E%3Cfilter id='bbblurry-filter' x='-100%25' y='-100%25' width='400%25' height='400%25' filterUnits='objectBoundingBox' primitiveUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur stdDeviation='40' x='0%25' y='0%25' width='100%25' height='100%25' in='SourceGraphic' edgeMode='none' result='blur'%3E%3C/feGaussianBlur%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url(%23bbblurry-filter)'%3E%3Cellipse rx='150' ry='150' cx='400' cy='300' fill='hsl(37, 99%25, 67%25)'%3E%3C/ellipse%3E%3Cellipse rx='150' ry='150' cx='280' cy='500' fill='hsl(316, 73%25, 52%25)'%3E%3C/ellipse%3E%3Cellipse rx='150' ry='150' cx='520' cy='450' fill='hsl(185, 100%25, 57%25)'%3E%3C/ellipse%3E%3C/g%3E%3C/svg%3E");
     background-size: cover;
-    background-position: bottom;
+    background-position: 50% 50%;
     background-repeat: no-repeat;
     background-attachment: fixed;
+    min-height: 100%;
+    margin-left: 10%;
+}
+
+body {
+    background: transparent;
 }

From fbce16b7316bdfc4b59149083a6949fe61ded805 Mon Sep 17 00:00:00 2001
From: Cristian Tabacitu <cristian.tabacitu@digitallyhappy.com>
Date: Mon, 28 Jul 2025 14:44:18 +0300
Subject: [PATCH 20/24] fix fuzzy bkg problems

---
 .../assets/css/skins/fuzzy-background.css     | 44 +++++++++++++++----
 1 file changed, 36 insertions(+), 8 deletions(-)

diff --git a/resources/assets/css/skins/fuzzy-background.css b/resources/assets/css/skins/fuzzy-background.css
index 93d8e0d..b1665c8 100644
--- a/resources/assets/css/skins/fuzzy-background.css
+++ b/resources/assets/css/skins/fuzzy-background.css
@@ -1,18 +1,46 @@
 /*
-    Fuzzy ball skin for Tabler and/or Backpack for Laravel.
+|--------------------------------------------------------------------------
+| Fuzzy ball skin for Tabler and/or Backpack for Laravel
+|--------------------------------------------------------------------------
+|
+| 🎨 This adds a quirky blurred SVG background using hsl(...) color stops.
+| 🛠️ To customize colors, just find & replace the HSL values below:
+|    - hsl(37, 99%25, 67%25) → color #1 (orange-ish)
+|    - hsl(316, 73%25, 52%25) → color #2 (pink/purple)
+|    - hsl(185, 100%25, 57%25) → color #3 (cyan)
+|
+| 💡 Tip: Use a URL encoder like https://yoksel.github.io/url-encoder/ if
+|         you want to regenerate or preview the SVG. The current one is
+|         encoded as a data URI inside background-image.
 */
 
-html {
+body {
     /* BlurBerry background */
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' viewBox='0 0 800 800'%3E%3Cdefs%3E%3Cfilter id='bbblurry-filter' x='-100%25' y='-100%25' width='400%25' height='400%25' filterUnits='objectBoundingBox' primitiveUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur stdDeviation='40' x='0%25' y='0%25' width='100%25' height='100%25' in='SourceGraphic' edgeMode='none' result='blur'%3E%3C/feGaussianBlur%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url(%23bbblurry-filter)'%3E%3Cellipse rx='150' ry='150' cx='400' cy='300' fill='hsl(37, 99%25, 67%25)'%3E%3C/ellipse%3E%3Cellipse rx='150' ry='150' cx='280' cy='500' fill='hsl(316, 73%25, 52%25)'%3E%3C/ellipse%3E%3Cellipse rx='150' ry='150' cx='520' cy='450' fill='hsl(185, 100%25, 57%25)'%3E%3C/ellipse%3E%3C/g%3E%3C/svg%3E");
+    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' viewBox='0 0 800 800'%3E%3Cdefs%3E%3Cfilter id='bbblurry-filter' x='-100%25' y='-100%25' width='400%25' height='400%25' filterUnits='objectBoundingBox' primitiveUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur stdDeviation='40' x='0%25' y='0%25' width='100%25' height='100%25' in='SourceGraphic' edgeMode='none' result='blur'%3E%3C/feGaussianBlur%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url(%23bbblurry-filter)'%3E%3Cellipse rx='150' ry='150' cx='462.9146816404486' cy='534.6882471935419' fill='hsl(37, 99%25, 67%25)'%3E%3C/ellipse%3E%3Cellipse rx='150' ry='150' cx='179.02369011526488' cy='367.0291623615862' fill='hsl(316, 73%25, 52%25)'%3E%3C/ellipse%3E%3Cellipse rx='150' ry='150' cx='245.39283048169654' cy='478.9292209148051' fill='hsl(185, 100%25, 57%25)'%3E%3C/ellipse%3E%3C/g%3E%3C/svg%3E");
     background-size: cover;
-    background-position: 50% 50%;
+    background-position: bottom center;
     background-repeat: no-repeat;
-    background-attachment: fixed;
+    /* background-attachment: fixed; */
     min-height: 100%;
-    margin-left: 10%;
 }
 
-body {
-    background: transparent;
+/* on mobile */
+@media (max-width: 991px) {
+    body {
+        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' viewBox='0 0 400 800'%3E%3Cdefs%3E%3Cfilter id='bbblurry-filter' x='-50%25' y='-50%25' width='240%25' height='400%25' filterUnits='objectBoundingBox' primitiveUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur stdDeviation='40' x='0%25' y='0%25' width='100%25' height='100%25' in='SourceGraphic' edgeMode='none' result='blur'%3E%3C/feGaussianBlur%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url(%23bbblurry-filter)'%3E%3Cellipse rx='150' ry='150' cx='262.9146816404486' cy='334.6882471935419' fill='hsl(37, 99%25, 67%25)'%3E%3C/ellipse%3E%3Cellipse rx='150' ry='150' cx='79.02369011526488' cy='167.0291623615862' fill='hsl(316, 73%25, 52%25)'%3E%3C/ellipse%3E%3Cellipse rx='150' ry='150' cx='245.39283048169654' cy='478.9292209148051' fill='hsl(185, 100%25, 57%25)'%3E%3C/ellipse%3E%3C/g%3E%3C/svg%3E");
+        background-position: top left;
+    }
+}
+
+html[data-bs-theme=light] {
+    /* background: #f9f9f9; */
+    background: var(--tblr-light);
+}
+
+[data-bs-theme=light] .page {
+    background: rgb(255 255 255 / 0.00);
+}
+
+[data-bs-theme=dark] .page {
+    background: rgba(0, 0, 0, 0.75);
 }

From b60d2ef02ceea27eae36563b364af161f34576a4 Mon Sep 17 00:00:00 2001
From: pxpm <pxpm88@gmail.com>
Date: Mon, 4 Aug 2025 12:48:13 +0100
Subject: [PATCH 21/24] wip

---
 resources/assets/css/style.css               | 8 --------
 resources/views/layouts/horizontal.blade.php | 2 +-
 2 files changed, 1 insertion(+), 9 deletions(-)

diff --git a/resources/assets/css/style.css b/resources/assets/css/style.css
index 965211d..9408206 100644
--- a/resources/assets/css/style.css
+++ b/resources/assets/css/style.css
@@ -712,14 +712,6 @@ tr.array-row td:has(span.ui-sortable-handle) {
     line-height: normal;
 }
 
-/* XXL containers for big displays */
-
-@media (min-width: 1600px) {
-    .container-xxl {
-        max-width: 1920px;
-    }
-}
-
 /* Horizontal Overlap Layout */
 .navbar-overlap:after {
     height: 13rem;
diff --git a/resources/views/layouts/horizontal.blade.php b/resources/views/layouts/horizontal.blade.php
index cd681ab..f1c3b63 100644
--- a/resources/views/layouts/horizontal.blade.php
+++ b/resources/views/layouts/horizontal.blade.php
@@ -13,7 +13,7 @@
 <div class="page">
     <div class="page-wrapper">
 
-        <div class="@if(backpack_theme_config('options.doubleTopBarInHorizontalLayouts')) double-top-bar @else single-top-bar @endif @if(backpack_theme_config('options.useStickyHeader')) sticky-top @endif">
+        <div class="@if(backpack_theme_config('options.doubleTopBarInHorizontalLayouts')) double-top-bar @else single-top-bar @endif @if(backpack_theme_config('options.useStickyHeader')) sticky-top @endif @if(backpack_theme_config('options.useFluidContainers')) container-fluid @else container-xxl @endif">
             @includeWhen(backpack_theme_config('options.doubleTopBarInHorizontalLayouts'), backpack_view('layouts._horizontal.header_container'))
             @include(backpack_view('layouts._horizontal.menu_container'))
         </div>

From 7290ee8f8897d2ffcff7fbd38276db55deb10f25 Mon Sep 17 00:00:00 2001
From: pxpm <pxpm88@gmail.com>
Date: Mon, 4 Aug 2025 12:48:57 +0100
Subject: [PATCH 22/24] use fluid containers by default

---
 config/theme-tabler.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/config/theme-tabler.php b/config/theme-tabler.php
index 0b13b8f..ae831b1 100644
--- a/config/theme-tabler.php
+++ b/config/theme-tabler.php
@@ -81,7 +81,7 @@
         /**
          * When true, the content area will take the whole screen width.
          */
-        'useFluidContainers' => false,
+        'useFluidContainers' => true,
 
         /**
          * When true, the sidebar content for vertical layouts will not scroll with the rest of the content.

From 3d58c4c8a7b1e2d66cc820cbc143f7bf7f535e30 Mon Sep 17 00:00:00 2001
From: Cristian Tabacitu <cristian.tabacitu@digitallyhappy.com>
Date: Thu, 16 Oct 2025 13:49:19 +0300
Subject: [PATCH 23/24] remove alert background overrides

---
 resources/assets/css/style.css | 14 --------------
 1 file changed, 14 deletions(-)

diff --git a/resources/assets/css/style.css b/resources/assets/css/style.css
index 9408206..384515d 100644
--- a/resources/assets/css/style.css
+++ b/resources/assets/css/style.css
@@ -785,12 +785,6 @@ body[bp-layout=horizontal-overlap] .nav-item > a {
     border-radius: 4px;
 }
 
-/* Alerts */
-
-[data-bs-theme=dark] .alert-danger {
-    background-color: var(--tblr-bg-surface);
-}
-
 /* Swal */
 
 [data-bs-theme=dark] .swal-modal {
@@ -1029,14 +1023,6 @@ body[bp-layout=horizontal-overlap] .nav-item > a {
     color: inherit;
 }
 
-.alert {
-    background: var(--tblr-bg-surface);
-}
-
-[data-bs-theme=dark] .alert {
-    color: var(--tblr-gray-400);
-}
-
 table.dataTable thead>tr>th.dt-orderable-asc:hover,
 table.dataTable thead>tr>th.dt-orderable-desc:hover,
 table.dataTable thead>tr>td.dt-orderable-asc:hover,

From 49a591fe215a61e34d7793473c08c56e281314bd Mon Sep 17 00:00:00 2001
From: Cristian Tabacitu <cristian.tabacitu@digitallyhappy.com>
Date: Thu, 16 Oct 2025 16:14:13 +0300
Subject: [PATCH 24/24] minor CSS fixes

---
 resources/assets/css/skins/glass.css | 21 ++-------------------
 resources/assets/css/style.css       |  8 ++++++++
 2 files changed, 10 insertions(+), 19 deletions(-)

diff --git a/resources/assets/css/skins/glass.css b/resources/assets/css/skins/glass.css
index b44c840..52704a7 100644
--- a/resources/assets/css/skins/glass.css
+++ b/resources/assets/css/skins/glass.css
@@ -2,23 +2,8 @@
 body[bp-layout=horizontal] .single-top-bar #navbar-menu .navbar {
     border-radius: 0.5rem;
     margin-top: 1rem;
-    margin-right: 3rem;
-    margin-left: 3rem;
-}
-
-/* media query for slimbar for between 992px to 1400px */
-@media (min-width: 992px) and (max-width: 1400px) {
-    body[bp-layout=horizontal] .single-top-bar #navbar-menu .navbar {
-        margin-right: 1rem;
-        margin-left: 1rem;
-    }
-}
-
-@media (min-width: 1600px) {
-    body[bp-layout=horizontal] .single-top-bar #navbar-menu .navbar {
-        margin-right: 1rem;
-        margin-left: 1rem;
-    }
+    margin-right: 1rem;
+    margin-left: 1rem;
 }
 
 /* :root, */
@@ -53,8 +38,6 @@ body[bp-layout=horizontal] .single-top-bar #navbar-menu .navbar {
 }
 
 [data-bs-theme=light] .table-striped>tbody>tr:nth-of-type(2n)>* {
-    background-color: var(--tblr-table-striped-bg);
-    background-color: rgba(255, 255, 255, 0.2) !important;
     --tblr-table-bg-type: rgba(255, 255, 255, 0.2) !important;
 }
 
diff --git a/resources/assets/css/style.css b/resources/assets/css/style.css
index 384515d..a7e0c38 100644
--- a/resources/assets/css/style.css
+++ b/resources/assets/css/style.css
@@ -169,6 +169,10 @@ table .btn-link:active {
     border-radius: 0;
 }
 
+[data-bs-theme=dark] .dt-processing.card {
+    background-color: var(--tblr-bg-surface)!important;
+}
+
 [data-bs-theme=light] tbody {
     background-color: var(--tblr-table-bg);
 }
@@ -1019,6 +1023,10 @@ body[bp-layout=horizontal-overlap] .nav-item > a {
     height: 0.4rem;
 }
 
+.card-body {
+    border-radius: inherit;
+}
+
 .card-body .subheader {
     color: inherit;
 }