/**
 * Lexend Deca Font for Axelor - FONT ONLY, NO OTHER CHANGES
 *
 * This CSS applies ONLY the Lexend Deca font to text elements.
 * Icons, colors, and all other styling remain unchanged.
 */

/* ===================================================
   IMPORT LEXEND DECA FROM GOOGLE FONTS
   =================================================== */

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

/* ===================================================
   APPLY LEXEND DECA - BUT NOT TO ICONS OR PSEUDO-ELEMENTS
   =================================================== */

/* Text elements only - NOT using * selector to avoid icons */
body,
h1, h2, h3, h4, h5, h6,
p,
label,
a:not([class*="icon"]):not([class*="glyphicon"]):not([class*="fa"]),
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
textarea,
select,
table,
th,
td {
  font-family: 'Lexend Deca', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  color: #000000; /* Black text */
}

/* Buttons - but preserve their icons */
button:not([class*="icon"]):not(.fa):not(.glyphicon),
.btn:not([class*="icon"]):not(.fa):not(.glyphicon) {
  font-family: 'Lexend Deca', sans-serif !important;
}

/* Span and div - but only if they don't contain icon classes */
span:not([class*="icon"]):not([class*="glyphicon"]):not([class*="fa"]):not([class*="material"]):not([class*="mdi"]),
div:not([class*="icon"]):not([class*="glyphicon"]):not([class*="fa"]):not([class*="material"]):not([class*="mdi"]) {
  font-family: 'Lexend Deca', sans-serif !important;
}

/* List items */
li:not([class*="icon"]):not([class*="glyphicon"]):not([class*="fa"]) {
  font-family: 'Lexend Deca', sans-serif !important;
}

/* ===================================================
   CRITICAL: NEVER TOUCH ICONS - THESE MUST USE ICON FONTS
   =================================================== */

/* Icon font classes - NEVER apply Lexend Deca */
[class^="icon-"],
[class*=" icon-"],
[class^="glyphicon"],
[class*=" glyphicon"],
.glyphicon,
.glyphicon-before,
.glyphicon-after,
.fa,
.fas,
.far,
.fal,
.fab,
.fad,
[class^="fa-"],
[class*=" fa-"],
.material-icons,
.mdi,
[class^="mdi-"],
[class*=" mdi-"],
.axelor-icon,
i,
i[class],
em[class] {
  font-family: inherit !important;
  /* Explicitly prevent Lexend Deca */
}

/* Icons inside buttons and links */
.btn [class^="icon-"],
.btn [class*=" icon-"],
.btn .glyphicon,
.btn .fa,
.btn i,
a [class^="icon-"],
a [class*=" icon-"],
a .glyphicon,
a .fa,
a i {
  font-family: inherit !important;
}

/* Pseudo-elements used for icons - NEVER touch these */
*:before,
*:after,
*::before,
*::after {
  font-family: inherit !important;
}

/* ===================================================
   FONT RENDERING OPTIMIZATION
   =================================================== */

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ===================================================
   TASK 1: REPLACE PURPLE BACKGROUNDS WITH GRAY
   =================================================== */

/* Panel headers and section headers - Deep Gray */
.panel-header,
.panel-heading,
.form-section-header,
.section-title,
[class*="panel-primary"] .panel-heading,
[class*="panel-primary"] .panel-header,
[class*="panel"][class*="primary"],
div[class*="header"],
header[class*="panel"] {
  background-color: #F5F5F7 !important;
  border-bottom: 1px solid #E5E5EA !important;
}

/* Panel bodies and form sections - White */
.panel-body,
.form-section,
.panel-content {
  background-color: #FFFFFF !important;
}

/* Override all purple/lavender backgrounds */
[style*="background-color: #7C4DFF"],
[style*="background-color: #B39DDB"],
[style*="background-color: #9575CD"],
[style*="background-color: #6C67FA"],
[style*="background-color: #C354F2"],
[style*="background: #7C4DFF"],
[style*="background: #B39DDB"],
[style*="background: #9575CD"],
[style*="background: #6C67FA"],
[style*="background: #C354F2"] {
  background-color: #F5F5F7 !important;
}

/* Light purple/lavender container backgrounds */
[style*="background-color: #FBFBFF"],
[style*="background-color: #F8F8FF"],
[style*="background-color: #EAEAFE"],
[style*="background: #FBFBFF"],
[style*="background: #F8F8FF"],
[style*="background: #EAEAFE"] {
  background-color: #F5F5F7 !important;
}

/* CSS variable overrides for purple backgrounds */
:root {
  --ax-theme-panel-header-bg: #F5F5F7 !important;
  --ax-theme-table-striped-bg: #F5F5F7 !important;
  --ax-theme-nav-menu-bg: #F5F5F7 !important;
  --bs-primary-bg-subtle: #F5F5F7 !important;
}

/* ===================================================
   TASK 2: CHANGE ALL LINKS TO CLASSIC BLUE
   =================================================== */

/* Standard blue links - Classic internet style */
a,
a:link,
.link,
.nav-link,
a[href],
[class*="link"]:not([class*="button"]):not(.btn) {
  color: #0066CC !important;
  text-decoration: none !important;
}

/* Hover state - Darker blue with underline */
a:hover,
a:focus,
.link:hover,
.nav-link:hover,
a[href]:hover {
  color: #004C99 !important;
  text-decoration: underline !important;
}

/* Active state - Very dark blue */
a:active,
.link:active,
a[href]:active {
  color: #003D7A !important;
}

/* Visited links - Classic purple (optional) */
a:visited {
  color: #551A8B !important;
}

/* Links in tables (like company names) */
table a,
td a,
th a,
.table a {
  color: #0066CC !important;
  text-decoration: none !important;
}

table a:hover,
td a:hover,
th a:hover,
.table a:hover {
  color: #004C99 !important;
  text-decoration: underline !important;
}

/* Links in navigation */
nav a,
.navbar a,
.nav a,
.menu a,
[role="navigation"] a {
  color: #0066CC !important;
}

nav a:hover,
.navbar a:hover,
.nav a:hover,
.menu a:hover {
  color: #004C99 !important;
}

/* Override CSS variables for link colors */
:root {
  --bs-link-color: #0066CC !important;
  --bs-link-hover-color: #004C99 !important;
  --bs-link-color-rgb: 0, 102, 204 !important;
  --bs-link-hover-color-rgb: 0, 76, 153 !important;
}

/* Make sure icon links don't get affected (preserve icon fonts) */
a i,
a [class^="icon-"],
a [class*=" icon-"],
a .glyphicon,
a .fa {
  color: inherit !important;
  font-family: inherit !important;
}

/* ===================================================
   TASK 3: ALTO TEAL PRIMARY COLOR
   =================================================== */

/* Alto Teal Palette:
   - Primary: #5BA3A0 (main teal)
   - Hover/Dark: #4A8C89 (darker for hover states)
   - Light: #6BB4B1 (lighter for accents)
   - Very Light: #E8F5F4 (subtle backgrounds)
   - Accent: #D97C4A (orange for highlights)
*/

/* 1. Primary Buttons */
.btn-primary,
button.btn-primary,
.btn-success,
[class*="btn-primary"] {
  background-color: #5BA3A0 !important;
  border-color: #5BA3A0 !important;
  color: #FFFFFF !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-success:hover,
.btn-success:focus,
button.btn-primary:hover,
button.btn-primary:focus {
  background-color: #4A8C89 !important;
  border-color: #4A8C89 !important;
  color: #FFFFFF !important;
}

.btn-primary:active,
.btn-success:active,
button.btn-primary:active {
  background-color: #4A8C89 !important;
  border-color: #4A8C89 !important;
}

/* 2. Active/Selected Menu Items - ONLY for content area, NOT sidebar */
.nav-link.active:not(.sidebar .nav-link):not([class*="sidebar"] .nav-link),
.navbar-nav .nav-link.active:not(.sidebar .nav-link),
.menu-item.active:not(.sidebar .menu-item),
.menu-item:hover:not(.sidebar .menu-item),
[class*="menu"] .active:not(.sidebar *):not([class*="sidebar"] *),
.nav-pills .nav-link.active:not(.sidebar .nav-link) {
  background-color: #E8F5F4 !important;
  color: #5BA3A0 !important;
  border-left-color: #5BA3A0 !important;
}

/* Navigation hover states - ONLY for content area, NOT sidebar */
.nav-link:hover:not(.sidebar .nav-link):not([class*="sidebar"] .nav-link),
.menu-item:hover:not(.sidebar .menu-item) {
  background-color: #E8F5F4 !important;
  color: #4A8C89 !important;
}

/* 3. Selected Table Rows */
table tr.selected,
.table tr.selected,
table tbody tr.selected,
tr.selected,
tr.active,
.table-hover tbody tr:hover,
.table > tbody > tr.selected > td,
.table > tbody > tr.selected > th {
  background-color: #E8F5F4 !important;
  border-left: 3px solid #5BA3A0 !important;
}

/* 4. Checkboxes and Radio Buttons (checked state) */
input[type="checkbox"]:checked,
input[type="radio"]:checked,
.checkbox input[type="checkbox"]:checked + label::before,
.radio input[type="radio"]:checked + label::before {
  background-color: #5BA3A0 !important;
  border-color: #5BA3A0 !important;
}

/* Custom checkbox/radio styling */
input[type="checkbox"]:checked::before,
input[type="radio"]:checked::before {
  background-color: #5BA3A0 !important;
}

/* Bootstrap 5 form check */
.form-check-input:checked {
  background-color: #5BA3A0 !important;
  border-color: #5BA3A0 !important;
}

/* 5. Primary Badges/Labels */
.badge,
.badge-primary,
.badge-success,
.label,
.label-primary,
.label-success,
span.badge,
span.label {
  background-color: #5BA3A0 !important;
  color: #FFFFFF !important;
}

.badge.bg-primary,
.badge.bg-success {
  background-color: #5BA3A0 !important;
}

/* 6. Focus Rings/Outlines */
button:focus,
input:focus,
select:focus,
textarea:focus,
.btn:focus,
.form-control:focus,
a:focus-visible {
  outline-color: #5BA3A0 !important;
  border-color: #5BA3A0 !important;
  box-shadow: 0 0 0 0.2rem rgba(44, 160, 28, 0.25) !important;
}

/* Focus visible for buttons */
.btn-primary:focus,
.btn-primary:focus-visible {
  box-shadow: 0 0 0 0.25rem rgba(44, 160, 28, 0.5) !important;
}

/* 7. Active Tabs */
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link,
.tab-pane.active,
.tabs .tab.active,
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  background-color: #FFFFFF !important;
  border-bottom: 3px solid #5BA3A0 !important;
  color: #5BA3A0 !important;
}

.nav-tabs .nav-link:hover {
  border-bottom: 3px solid #6BB4B1 !important;
  color: #4A8C89 !important;
}

/* 8. Progress Bars */
.progress-bar,
.progress-bar-primary,
.progress-bar-success {
  background-color: #5BA3A0 !important;
}

.progress-bar-striped {
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent) !important;
  background-color: #5BA3A0 !important;
}

/* 9. Toggle Switches (active state) */
.toggle.active,
.switch input:checked + .slider,
.form-switch .form-check-input:checked,
input[type="checkbox"].toggle:checked + label,
.custom-switch .custom-control-input:checked ~ .custom-control-label::before {
  background-color: #5BA3A0 !important;
  border-color: #5BA3A0 !important;
}

/* Toggle switch handle */
.toggle.active .toggle-handle,
.switch input:checked + .slider:before {
  background-color: #FFFFFF !important;
}

/* 10. Primary Alerts/Notifications */
.alert-primary,
.alert-success,
.notification-primary,
.toast-success {
  background-color: #E8F5F4 !important;
  border-left: 4px solid #5BA3A0 !important;
  color: #3A7673 !important;
}

.alert-primary .alert-link,
.alert-success .alert-link {
  color: #4A8C89 !important;
}

/* Override Bootstrap 5 CSS Variables for Primary Color */
:root {
  --bs-primary: #5BA3A0 !important;
  --bs-primary-rgb: 44, 160, 28 !important;
  --bs-primary-bg-subtle: #E8F5F4 !important;
  --bs-primary-text-emphasis: #3A7673 !important;
  --bs-primary-border-subtle: #6BB4B1 !important;

  --bs-success: #5BA3A0 !important;
  --bs-success-rgb: 44, 160, 28 !important;
  --bs-success-bg-subtle: #E8F5F4 !important;
  --bs-success-text-emphasis: #3A7673 !important;
  --bs-success-border-subtle: #6BB4B1 !important;

  /* Axelor custom variables */
  --ax-theme-primary-color: #5BA3A0 !important;
  --ax-theme-primary-hover: #4A8C89 !important;
  --ax-theme-primary-light: #6BB4B1 !important;
  --ax-theme-accent-color: #5BA3A0 !important;
}

/* Additional button variants that might use primary color */
.btn-outline-primary {
  color: #5BA3A0 !important;
  border-color: #5BA3A0 !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background-color: #5BA3A0 !important;
  border-color: #5BA3A0 !important;
  color: #FFFFFF !important;
}

/* Link buttons with primary style */
.btn-link.text-primary,
a.btn.btn-link {
  color: #5BA3A0 !important;
}

.btn-link.text-primary:hover {
  color: #4A8C89 !important;
}

/* Dropdown active items */
.dropdown-item.active,
.dropdown-item:active {
  background-color: #5BA3A0 !important;
  color: #FFFFFF !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: #E8F5F4 !important;
  color: #4A8C89 !important;
}

/* List group active items */
.list-group-item.active {
  background-color: #5BA3A0 !important;
  border-color: #5BA3A0 !important;
  color: #FFFFFF !important;
}

.list-group-item:hover {
  background-color: #E8F5F4 !important;
}

/* Pagination active */
.pagination .page-item.active .page-link {
  background-color: #5BA3A0 !important;
  border-color: #5BA3A0 !important;
}

.pagination .page-link:hover {
  background-color: #E8F5F4 !important;
  color: #5BA3A0 !important;
}

/* Spinner/Loading indicators */
.spinner-border.text-primary,
.spinner-grow.text-primary {
  color: #5BA3A0 !important;
}

/* ===================================================
   TASK 4: DARK SIDEBAR & WHITE NAVBAR
   =================================================== */

/* Reference: QuickBooks Sales Pro UI
   - Dark charcoal sidebar (left)
   - White/light navbar (top)
   - Modern, clean contrast
*/

/* ===== DARK SIDEBAR THEME ===== */

/* Sidebar container - Dark charcoal background */
.sidebar,
.nav-sidebar,
.left-menu,
aside,
.main-menu,
[class*="sidebar"],
nav[class*="sidebar"],
div[class*="sidebar"],
.offcanvas-start,
.app-sidebar {
  background-color: #2C2C2C !important;
  color: #FFFFFF !important;
  border-right: 1px solid #3D3D3D !important;
}

/* Sidebar text and links - White text */
.sidebar a,
.sidebar .menu-item,
.sidebar .nav-link,
.sidebar span:not([class*="icon"]):not([class*="glyphicon"]):not(.fa),
.sidebar label,
.sidebar p,
.sidebar li,
.sidebar .nav-item {
  color: #FFFFFF !important;
}

/* Sidebar icons - Light gray */
.sidebar i,
.sidebar .icon,
.sidebar [class^="icon-"],
.sidebar [class*=" icon-"],
.sidebar .glyphicon,
.sidebar .fa,
.sidebar .material-icons {
  color: #B0B0B0 !important;
}

/* Active menu item - Light gray background + green border accent (NOT full green bg) */
.sidebar .active,
.sidebar .menu-item.active,
.sidebar li.active,
.sidebar li.active a,
.sidebar .nav-link.active,
.sidebar .nav-item.active,
.sidebar a.active {
  background-color: #4A4A4A !important; /* Light gray, NOT green */
  color: #FFFFFF !important; /* Bright white text, NOT green */
  border-left: 3px solid #5BA3A0 !important; /* Green accent border */
  font-weight: 500 !important; /* Slightly bolder */
}

/* Active menu icon - Emerald green accent */
.sidebar .active i,
.sidebar .active .icon,
.sidebar .active [class^="icon-"],
.sidebar li.active i,
.sidebar .nav-link.active i {
  color: #5BA3A0 !important; /* Green icon as accent */
}

/* Hover states - Subtle medium gray background (NOT green) */
.sidebar .menu-item:hover,
.sidebar a:hover,
.sidebar li:hover,
.sidebar .nav-link:hover,
.sidebar .nav-item:hover a {
  background-color: #383838 !important; /* Subtle gray */
  color: #FFFFFF !important; /* Bright white */
}

/* Hover state icons brighten to white */
.sidebar a:hover i,
.sidebar li:hover i {
  color: #FFFFFF !important; /* Brighten to white on hover */
}

/* Sidebar headers/sections - Light gray uppercase labels */
.sidebar .menu-header,
.sidebar .section-title,
.sidebar .menu-category,
.sidebar .nav-header {
  color: #B0B0B0 !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  padding: 10px 15px !important;
  font-weight: 600 !important;
}

/* Sidebar dividers - Dark gray separators */
.sidebar hr,
.sidebar .divider,
.sidebar .separator {
  border-color: #3D3D3D !important;
  background-color: #3D3D3D !important;
}

/* Sidebar scrollbar styling (for webkit browsers) */
.sidebar::-webkit-scrollbar {
  width: 8px !important;
  background-color: #2C2C2C !important;
}

.sidebar::-webkit-scrollbar-thumb {
  background-color: #3D3D3D !important;
  border-radius: 4px !important;
}

.sidebar::-webkit-scrollbar-thumb:hover {
  background-color: #4D4D4D !important;
}

/* Sidebar collapse/expand button */
.sidebar .collapse-btn,
.sidebar .toggle-btn,
.sidebar button {
  background-color: #3D3D3D !important;
  color: #FFFFFF !important;
  border: none !important;
}

.sidebar .collapse-btn:hover,
.sidebar .toggle-btn:hover {
  background-color: #4D4D4D !important;
}

/* Sidebar badges/counters */
.sidebar .badge,
.sidebar .counter {
  background-color: #5BA3A0 !important;
  color: #FFFFFF !important;
}

/* ===== WHITE NAVBAR/HEADER THEME ===== */

/* Navbar container - Clean white background */
.navbar,
.navbar-default,
.navbar-light,
.top-bar,
header,
.main-header,
.app-header,
.navbar-top,
header[class*="navbar"],
.header-bar {
  background-color: #FFFFFF !important;
  border-bottom: 1px solid #E5E5EA !important;
  color: #2C2C2C !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

/* Navbar text and links - Dark gray */
.navbar a:not(.btn),
.navbar .nav-link,
.navbar span:not([class*="icon"]):not([class*="glyphicon"]):not(.fa):not(.badge),
.navbar .navbar-brand,
.navbar .nav-item a,
.navbar .menu-item {
  color: #2C2C2C !important;
}

/* Navbar icons - Medium gray */
.navbar i,
.navbar .icon,
.navbar [class^="icon-"],
.navbar [class*=" icon-"],
.navbar .glyphicon,
.navbar .fa {
  color: #5C5C5C !important;
}

/* Navbar hover - Emerald green with light background */
.navbar a:not(.btn):hover,
.navbar .nav-link:hover,
.navbar .nav-item:hover a,
.navbar .menu-item:hover {
  color: #5BA3A0 !important; /* Emerald on hover */
  background-color: #F5F5F7 !important;
}

/* Navbar hover icons */
.navbar a:hover i,
.navbar .nav-link:hover i {
  color: #5BA3A0 !important;
}

/* Navbar buttons - Outline style */
.navbar .btn:not(.btn-primary):not(.btn-success) {
  color: #2C2C2C !important;
  border-color: #E5E5EA !important;
  background-color: transparent !important;
}

.navbar .btn:not(.btn-primary):not(.btn-success):hover {
  background-color: #F5F5F7 !important;
  border-color: #5BA3A0 !important;
  color: #5BA3A0 !important;
}

/* Company/App name in navbar - Bold dark text */
.navbar .navbar-brand,
.navbar .app-title,
.navbar .brand,
.navbar .company-name {
  color: #2C2C2C !important;
  font-weight: 600 !important;
}

/* Navbar user menu/profile dropdown */
.navbar .dropdown-toggle,
.navbar .user-menu,
.navbar .profile-menu {
  color: #2C2C2C !important;
}

.navbar .dropdown-toggle:hover,
.navbar .user-menu:hover {
  background-color: #F5F5F7 !important;
  color: #5BA3A0 !important;
}

/* Navbar search bar */
.navbar .search-bar,
.navbar .form-control,
.navbar input[type="search"] {
  background-color: #F5F5F7 !important;
  border: 1px solid #E5E5EA !important;
  color: #2C2C2C !important;
}

.navbar .search-bar:focus,
.navbar .form-control:focus,
.navbar input[type="search"]:focus {
  background-color: #FFFFFF !important;
  border-color: #5BA3A0 !important;
}

/* Navbar notifications badge */
.navbar .notification-badge,
.navbar .badge {
  background-color: #5BA3A0 !important;
  color: #FFFFFF !important;
}

/* Navbar dividers */
.navbar .divider,
.navbar .separator {
  border-color: #E5E5EA !important;
}

/* Navbar active item */
.navbar .active,
.navbar .nav-link.active,
.navbar .nav-item.active a {
  color: #5BA3A0 !important;
  font-weight: 600 !important;
}

/* Override previous Task 3 rules that might conflict with navbar */
.navbar-nav .nav-link.active {
  background-color: transparent !important; /* Keep navbar background white */
  color: #5BA3A0 !important;
  border-left: none !important; /* Remove left border from navbar items */
  border-bottom: 2px solid #5BA3A0 !important; /* Bottom border instead for navbar */
}

/* Ensure sidebar stays dark even with previous active states */
.sidebar .nav-link.active,
.sidebar .navbar-nav .nav-link.active {
  background-color: #3D3D3D !important; /* Override to keep dark */
  color: #5BA3A0 !important;
  border-left: 3px solid #5BA3A0 !important; /* Sidebar uses left border */
  border-bottom: none !important; /* No bottom border in sidebar */
}

/* ===================================================
   DARK SIDEBAR - CSS VARIABLES OVERRIDE (AXELOR SPECIFIC)
   =================================================== */

/* Override Axelor's navigation menu CSS variables */
:root {
  /* Navigation Menu Background & Colors */
  --ax-nav-menu-bg: #2C2C2C !important;
  --ax-theme-nav-menu-bg: #2C2C2C !important;
  --ax-nav-menu-color: #FFFFFF !important;
  --ax-theme-nav-menu-color: #FFFFFF !important;

  /* Navigation Menu Borders & Shadow */
  --ax-nav-menu-right-border: 1px solid #3D3D3D !important;
  --ax-theme-nav-menu-right-border: 1px solid #3D3D3D !important;
  --ax-nav-menu-border-color: #3D3D3D !important;
  --ax-theme-nav-menu-border-color: #3D3D3D !important;
  --ax-nav-menu-border: 1px solid #3D3D3D !important;
  --ax-theme-nav-menu-border: 1px solid #3D3D3D !important;
  --ax-nav-menu-shadow: none !important;
  --ax-theme-nav-menu-shadow: none !important;

  /* Navigation Menu Header */
  --ax-nav-menu-header-bg: #2C2C2C !important;
  --ax-theme-nav-menu-header-bg: #2C2C2C !important;
  --ax-nav-menu-header-color: #B0B0B0 !important;
  --ax-theme-nav-menu-header-color: #B0B0B0 !important;

  /* Navigation Menu Icons */
  --ax-nav-menu-icons-bg: transparent !important;
  --ax-theme-nav-menu-icons-bg: transparent !important;
  --ax-nav-menu-icon-bg: transparent !important;
  --ax-theme-nav-menu-icon-bg: transparent !important;
  --ax-nav-menu-icon-color: #B0B0B0 !important;
  --ax-theme-nav-menu-icon-color: #B0B0B0 !important;

  /* Navigation Menu Icon Hover States */
  --ax-nav-menu-icon-hover-bg: #383838 !important;
  --ax-theme-nav-menu-icon-hover-bg: #383838 !important;
  --ax-nav-menu-icon-hover-color: #FFFFFF !important;
  --ax-theme-nav-menu-icon-hover-color: #FFFFFF !important;

  /* Navigation Menu Icon Active States */
  --ax-nav-menu-icon-active-bg: #3D3D3D !important;
  --ax-theme-nav-menu-icon-active-bg: #3D3D3D !important;
  --ax-nav-menu-icon-active-color: #5BA3A0 !important;
  --ax-theme-nav-menu-icon-active-color: #5BA3A0 !important;

  /* Navigation Menu Item Hover States - Subtle gray, NOT green */
  --ax-nav-menu-item-hover-bg: #383838 !important;
  --ax-theme-nav-menu-item-hover-bg: #383838 !important;
  --ax-nav-menu-item-hover-color: #FFFFFF !important;
  --ax-theme-nav-menu-item-hover-color: #FFFFFF !important;

  /* Navigation Menu Item Active States - Light gray bg, NOT green bg */
  --ax-nav-menu-item-active-bg: #4A4A4A !important;
  --ax-theme-nav-menu-item-active-bg: #4A4A4A !important;
  --ax-nav-menu-item-active-color: #FFFFFF !important;
  --ax-theme-nav-menu-item-active-color: #FFFFFF !important;
}

/* ===================================================
   DARK SIDEBAR - NUCLEAR OPTION (AGGRESSIVE OVERRIDE)
   =================================================== */

/* Target ALL possible sidebar selectors - Bootstrap 2 + AngularJS patterns */
aside,
.sidebar,
.nav-sidebar,
.main-nav,
.nav-tree,
.sidebar-menu,
.left-sidebar,
.navigation-menu,
.main-menu,
.app-sidebar,
[class*="sidebar"],
[class*="navigation"],
[class*="nav-tree"],
[class*="left-nav"],
[id*="sidebar"],
[id*="navigation"],
#sidebar,
#nav-menu,
#main-nav,
.offcanvas-start,
.nav-list,
ul.nav-list,
.nav-vertical {
  background-color: #2C2C2C !important;
  color: #FFFFFF !important;
  border-right: 1px solid #3D3D3D !important;
}

/* Bootstrap 2 grid - Target first column (sidebar is usually .span2 or .span3) */
.container-fluid > .row-fluid > .span2,
.container-fluid > .row-fluid > .span3,
.container-fluid > .row > .span2,
.container-fluid > .row > .span3,
.row-fluid > [class*="span"]:first-child,
.row > [class*="span"]:first-child {
  background-color: #2C2C2C !important;
  color: #FFFFFF !important;
}

/* Target by structure - common Axelor patterns */
body > div:first-child > aside,
body > div > div > aside,
#app > aside,
#main-container > .sidebar,
#main-container > aside,
[role="navigation"],
nav[role="navigation"] {
  background-color: #2C2C2C !important;
  color: #FFFFFF !important;
}

/* ALL links inside sidebar areas */
aside a,
.sidebar a,
.nav-sidebar a,
.main-nav a,
.nav-tree a,
.sidebar-menu a,
.nav-list a,
[class*="sidebar"] a,
[id*="sidebar"] a,
.container-fluid > .row-fluid > .span2 a,
.container-fluid > .row-fluid > .span3 a {
  color: #FFFFFF !important;
  text-decoration: none !important;
}

/* ALL list items inside sidebar */
aside li,
.sidebar li,
.nav-sidebar li,
.main-nav li,
.nav-tree li,
.sidebar-menu li,
.nav-list li,
[class*="sidebar"] li,
[id*="sidebar"] li {
  background-color: transparent !important;
  border: none !important;
}

/* Sidebar list item links - Bootstrap 2 pattern */
.nav-list > li > a,
aside > ul > li > a,
.sidebar > ul > li > a {
  color: #FFFFFF !important;
  padding: 10px 15px !important;
  display: block !important;
}

/* Icons inside sidebar */
aside i,
.sidebar i,
.nav-sidebar i,
.main-nav i,
.nav-tree i,
.sidebar-menu i,
.nav-list i,
[class*="sidebar"] i,
[id*="sidebar"] i,
aside .icon,
.sidebar .icon,
aside [class^="icon-"],
.sidebar [class^="icon-"],
aside [class*=" icon-"],
.sidebar [class*=" icon-"],
aside .glyphicon,
.sidebar .glyphicon {
  color: #B0B0B0 !important;
}

/* Hover states - ALL sidebar elements - Subtle gray, NOT green */
aside li:hover,
.sidebar li:hover,
.nav-sidebar li:hover,
.main-nav li:hover,
.nav-tree li:hover,
.sidebar-menu li:hover,
.nav-list li:hover,
.nav-list > li > a:hover,
aside > ul > li:hover,
.sidebar > ul > li:hover,
[class*="sidebar"] li:hover,
[id*="sidebar"] li:hover {
  background-color: #383838 !important; /* Subtle gray */
  color: #FFFFFF !important; /* Bright white text */
  cursor: pointer !important;
}

aside li:hover a,
.sidebar li:hover a,
.nav-list li:hover a {
  color: #FFFFFF !important; /* Bright white text on hover */
  background-color: transparent !important;
}

/* Hover state icons - Brighten on hover */
aside li:hover i,
.sidebar li:hover i,
.nav-list li:hover i,
aside li:hover .icon,
.sidebar li:hover .icon {
  color: #FFFFFF !important; /* Icons brighten to white on hover */
}

/* Active states - ALL sidebar elements - Light gray bg + green border accent */
aside li.active,
.sidebar li.active,
.nav-sidebar li.active,
.main-nav li.active,
.nav-tree li.active,
.sidebar-menu li.active,
.nav-list > .active,
.nav-list > li.active,
aside > ul > li.active,
.sidebar > ul > li.active,
[class*="sidebar"] li.active,
[id*="sidebar"] li.active {
  background-color: #4A4A4A !important; /* Light gray, NOT green */
  color: #FFFFFF !important; /* Bright white text */
  border-left: 3px solid #5BA3A0 !important; /* Green accent border */
  font-weight: 500 !important; /* Slightly bolder */
}

aside li.active > a,
.sidebar li.active > a,
.nav-list > .active > a,
.nav-list > li.active > a,
aside > ul > li.active > a,
.sidebar > ul > li.active > a {
  background-color: transparent !important;
  color: #FFFFFF !important; /* White text, not green */
}

/* Active icons - Green accent */
aside li.active i,
.sidebar li.active i,
.nav-list > .active i,
.nav-list > li.active i,
aside li.active .icon,
.sidebar li.active .icon {
  color: #5BA3A0 !important; /* Green icon as subtle accent */
}

/* Focus states - Same as active (when clicking/focusing) */
aside li:focus,
.sidebar li:focus,
aside a:focus,
.sidebar a:focus,
.nav-list li:focus,
.nav-list a:focus {
  background-color: #4A4A4A !important; /* Light gray like active */
  border-left: 3px solid #5BA3A0 !important; /* Green border */
  outline: none !important; /* Remove default outline */
  color: #FFFFFF !important;
}

/* Sidebar headers/sections */
aside .nav-header,
.sidebar .nav-header,
.nav-list .nav-header,
aside h3,
.sidebar h3,
aside h4,
.sidebar h4,
[class*="sidebar"] .nav-header {
  color: #B0B0B0 !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  padding: 10px 15px !important;
  background-color: transparent !important;
}

/* Dividers inside sidebar */
aside .divider,
.sidebar .divider,
.nav-list .divider,
aside hr,
.sidebar hr {
  border-top: 1px solid #3D3D3D !important;
  border-bottom: none !important;
  background-color: #3D3D3D !important;
  height: 1px !important;
}

/* Override any light backgrounds */
aside,
.sidebar,
.nav-sidebar,
.nav-tree,
.sidebar-menu,
[class*="sidebar"],
[id*="sidebar"] {
  background-image: none !important;
}

/* Nested ul/ol inside sidebar */
aside ul,
aside ol,
.sidebar ul,
.sidebar ol,
.nav-tree ul,
.nav-tree ol {
  background-color: transparent !important;
}

/* Span elements inside sidebar (might contain text) */
aside span:not([class*="icon"]):not([class*="glyphicon"]):not(.fa),
.sidebar span:not([class*="icon"]):not([class*="glyphicon"]):not(.fa),
.nav-list span:not([class*="icon"]):not([class*="glyphicon"]):not(.fa) {
  color: #FFFFFF !important;
}

/* Labels inside sidebar */
aside label,
.sidebar label,
.nav-list label {
  color: #FFFFFF !important;
}

/* Override AngularJS ng-style if present */
aside[ng-style],
.sidebar[ng-style],
[class*="sidebar"][ng-style] {
  background-color: #2C2C2C !important;
}

/* Scrollbar for sidebar */
aside::-webkit-scrollbar,
.sidebar::-webkit-scrollbar,
.nav-tree::-webkit-scrollbar,
[class*="sidebar"]::-webkit-scrollbar {
  width: 8px !important;
  background-color: #2C2C2C !important;
}

aside::-webkit-scrollbar-thumb,
.sidebar::-webkit-scrollbar-thumb,
.nav-tree::-webkit-scrollbar-thumb {
  background-color: #3D3D3D !important;
  border-radius: 4px !important;
}

aside::-webkit-scrollbar-thumb:hover,
.sidebar::-webkit-scrollbar-thumb:hover {
  background-color: #4D4D4D !important;
}

/* ===================================================
   AXELOR GRID STYLING - CSS Modules Compatible

   NOTE: Axelor uses CSS Modules with hashed class names!
   Example: _header_6j3fy_53, _row_7k4gh_88

   We use attribute selectors [class*="_pattern_"] to match
   the unhashed part, which survives rebuilds.
   =================================================== */

/* ===== GRID HEADER ROW - Deeper Gray ===== */
/* Matches any element with "_header_" in its class name */
div[class*="_header_"][class*="_sticky_"],
div[class*="_header_"]:not([class*="_row_"]) {
  background-color: #E1E4E8 !important;
}

/* Header column titles - bold, dark text */
span[class*="_headerColumnTitle_"],
div[class*="_headerColumn_"] span,
[class*="_header_"] span {
  color: #2C2C2C !important;
  font-weight: 600 !important;
  font-size: 13px !important;
}

/* ===== DATA ROWS - All White (Remove Alternating Colors) ===== */
/* Matches rows but excludes header rows */
div[class*="_row_"]:not([class*="_header_"]) {
  background-color: #FFFFFF !important;
}

/* Specifically target grid rows */
div[class*="_gridRow_"],
div[class*="_dataRow_"],
[class*="_row_"][class*="_even_"],
[class*="_row_"][class*="_odd_"] {
  background-color: #FFFFFF !important;
}

/* Cell borders - subtle */
div[class*="_column_"]:not([class*="_header_"]) {
  border-bottom: 1px solid #F0F0F0 !important;
}

/* ===== HOVER STATE - Light Gray ===== */
div[class*="_row_"]:hover:not([class*="_header_"]),
div[class*="_gridRow_"]:hover,
div[class*="_dataRow_"]:hover {
  background-color: #F5F6F8 !important;
  cursor: pointer !important;
}

/* ===== SELECTED ROW - Light Green with Emerald Border ===== */
div[class*="_row_"][class*="_selected_"],
div[class*="_row_"].selected,
div[class*="_gridRow_"][class*="_selected_"] {
  background-color: #E8F5F4 !important;
  border-left: 3px solid #5BA3A0 !important;
}

/* ===== FALLBACK: Legacy class names (if any still exist) ===== */
.grid-table thead,
.table thead,
table.grid thead {
  background-color: #E1E4E8 !important;
}

.grid-table tbody tr,
.table tbody tr,
tbody tr {
  background-color: #FFFFFF !important;
}

.grid-table tbody tr:hover,
.table tbody tr:hover,
tbody tr:hover {
  background-color: #F5F6F8 !important;
}

/* ===================================================
   BALANCE/STAT CARDS - Dark Pills (Not Bright Green)
   =================================================== */

/* Target balance buttons specifically - Dark charcoal pills */
button[class*="_button_"][class*="_btn-primary_"][class*="_1yygd_"] {
  background: linear-gradient(135deg, #2C2C2C 0%, #1a1a1a 100%) !important;
  border: 1px solid #3D3D3D !important;
  border-radius: 12px !important;
  padding: 16px 20px !important;
  color: #FFFFFF !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
  transition: all 0.2s ease !important;
}

/* Hover effect - slightly lighter */
button[class*="_button_"][class*="_btn-primary_"][class*="_1yygd_"]:hover {
  background: linear-gradient(135deg, #383838 0%, #2C2C2C 100%) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
  transform: translateY(-1px) !important;
}

/* Icon inside balance card - emerald green accent */
button[class*="_button_"][class*="_1yygd_"] span[class*="_icon_"] {
  color: #5BA3A0 !important;
  font-size: 2rem !important;
}

/* Value (the big number) - bright white */
div[class*="_value_"][class*="_1yygd_"] {
  color: #FFFFFF !important;
  font-size: 1.75rem !important;
  font-weight: 700 !important;
}

/* Title text (like "Solde débiteur") - light gray */
div[class*="_title_"][class*="_1yygd_"] {
  color: #B0B0B0 !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  margin-top: 4px !important;
}

/* Data container */
div[class*="_data_"][class*="_1yygd_"] {
  color: #FFFFFF !important;
}

/* ===================================================
   OUTLINE BUTTONS - Gray Instead of Pink/Mauve
   =================================================== */

/* All outline buttons - default gray state */
button[class*="_btn-outline-"],
.btn-outline-secondary,
.btn-outline-info,
.btn-outline-light,
button.btn-outline-secondary,
button.btn-outline-info,
button.btn-outline-light {
  background-color: transparent !important;
  border: 1.5px solid #D1D5DB !important;
  color: #5C5C5C !important;
  font-weight: 500 !important;
  transition: all 0.2s ease !important;
}

/* Hover state - light green with emerald accent */
button[class*="_btn-outline-"]:hover,
.btn-outline-secondary:hover,
.btn-outline-info:hover,
.btn-outline-light:hover,
button.btn-outline-secondary:hover,
button.btn-outline-info:hover,
button.btn-outline-light:hover {
  background-color: #E8F5F4 !important;
  border-color: #5BA3A0 !important;
  color: #5BA3A0 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 4px rgba(44, 160, 28, 0.2) !important;
}

/* Active/pressed state - solid green */
button[class*="_btn-outline-"]:active,
button[class*="_btn-outline-"].active,
.btn-outline-secondary:active,
.btn-outline-info:active,
.btn-outline-light:active,
button.btn-outline-secondary:active,
button.btn-outline-info:active,
button.btn-outline-light:active {
  background-color: #5BA3A0 !important;
  border-color: #5BA3A0 !important;
  color: #FFFFFF !important;
}

/* Focus state - emerald ring */
button[class*="_btn-outline-"]:focus,
.btn-outline-secondary:focus,
.btn-outline-info:focus,
.btn-outline-light:focus,
button.btn-outline-secondary:focus,
button.btn-outline-info:focus,
button.btn-outline-light:focus {
  box-shadow: 0 0 0 3px rgba(44, 160, 28, 0.25) !important;
  border-color: #5BA3A0 !important;
  outline: none !important;
}

/* ===================================================
   END - NO OTHER CHANGES

   NOTE: Form background modifications removed.
   Keeping only what works:
   - Lexend Deca font
   - Alto teal primary color (#5BA3A0)
   - Dark sidebar (#2C2C2C)
   - White navbar
   - Classic blue links
   - Clean grid/table styling
   - Dark balance cards
   - Gray outline buttons
   =================================================== */

/* ===================================================
   REBRANDING: Hide/Replace Axelor references in About page
   =================================================== */

/* Hide "Axelor SDK" text in About dialog */
/* Target common patterns where SDK version might appear */
.about-dialog [class*="sdk"],
.about-dialog [class*="version"] span:contains("Axelor"),
[class*="about"] [class*="sdk"]:contains("Axelor") {
  display: none !important;
}

/* If the text appears in a specific element, we can hide it */
/* This targets any text node containing "Axelor SDK" */
.modal-body *:not(script):not(style) {
  /* Unfortunately CSS can't select by text content reliably */
  /* JavaScript would be needed for precise text replacement */
}

/* Alternative: Hide the entire SDK version line if needed */
/* Uncomment if the SDK line needs to be completely hidden */
/*
[class*="about"] div:has-text("SDK"),
[class*="about"] span:has-text("SDK") {
  display: none !important;
}
*/

/* End of custom About page styling */

/* ===================================================
   REBRANDING: AXELOR LOGO REPLACEMENT

   IMPORTANT: These rules are now DISABLED because:
   1. The axelor.png files have been replaced with Solvab logos at source
   2. The aggressive CSS selectors were breaking company logo uploads

   The PNG replacement approach is cleaner and doesn't affect forms.
   =================================================== */

/*
 * DISABLED - Logo hiding CSS removed to fix company logo uploads
 * The axelor.png files are now replaced with alto-logo.png in build.gradle
 * No CSS hiding is needed anymore.
 */

/* ===================================================
   SIDEBAR LOGO SIZE - CONSERVATIVE APPROACH
   Only target the logo image itself, NOT containers
   =================================================== */

/*
 * DISABLED - Previous CSS was breaking Axelor layout
 * The logo overlapped menu items because we modified containers
 *
 * New approach: Leave Axelor's layout intact
 * Only adjust the logo image dimensions within its existing container
 */

/* ===================================================
   HIDE SIDEBAR HEADER/LOGO ZONE COMPLETELY
   This removes both the logo AND the X icon
   =================================================== */

/*
 * PRAGMATIC SOLUTION:
 * Instead of trying to fix the X icon, hide the entire
 * header zone of the sidebar. This removes:
 * - The Alto logo (when sidebar is open)
 * - The X icon (when sidebar is collapsed)
 *
 * Result: Sidebar starts directly with search bar
 */

/* ===================================================
   HIDE APP ICON (X) IN COLLAPSED SIDEBAR
   The X appears in _menusIcon_ > _header_ > _appIcon_
   =================================================== */

/* Hide the appIcon div that contains the X when collapsed */
[class*="_appIcon_"] {
  display: none !important;
}

/* Also hide the header inside menusIcon (collapsed mode) */
[class*="_menusIcon_"] [class*="_header_"] {
  display: none !important;
}

/* Keep the toggle button visible but ensure logo is hidden */
[class*="_appLogo_"] {
  display: none !important;
}

/* End of Rebranding Section */