:root {
  /* Surface Foundations - Clean & Crisp */
  --bg: #f9fafb; /* clean neutral background */
  --text: #111827;
  --card-bg: #ffffff; /* pure white card surface */
  --card-text: #1f2937;

  /* Muted / Neutral Tones - Refined grays */
  --muted: #6b7280;
  --muted-subtle: #9ca3af;
  --muted-deep: #374151;

  /* Brand: Modern "Solar" Yellow Palette */
  /* Brighter, more energetic yellow with better contrast */
  --primary: #FFE059;
  --primary-hover: #f59e0b;
  --primary-active: #d97706;

  /* Modern Tints using OKLCH for better color consistency */
  --primary-100: color-mix(in oklch, var(--primary), 90% white);
  --primary-200: color-mix(in oklch, var(--primary), 80% white);
  --primary-300: color-mix(in oklch, var(--primary), 70% white);

  /* Gradients: Dynamic 120-degree flows for more visual interest */
  --primary-gradient: linear-gradient(120deg, #fde68a 0%, #fbbf24 50%, #f59e0b 100%);
  --primary-gradient-hover: linear-gradient(120deg, #fbbf24 0%, #f59e0b 50%, #d97706 100%);
  --primary-gradient-subtle: linear-gradient(120deg, #fef9c3 0%, #fde68a 100%);

  /* Semantic - Fresh, modern palette */
  --success: #22c55e;
  --danger: #ef4444;
  --warning: #f97316;
  --info: #3b82f6;

  /* UI Utilities */
  --white: #ffffff;
  --black: #000000;
  --secondary: #4b5563;
  --secondary-hover: #1f2937;

  --border: #e5e7eb; /* clean neutral border */
  --input-bg: #ffffff;
  --input-border: #d1d5db;
  --icon-color: #6b7280;

  /* Depth: Layered, dimensional shadows */
  --card-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05), 0 1px 2px -1px rgba(0, 0, 0, 0.05);
  --shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.02);
  --shadow-lg: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
  --accent-glow: 0 0 25px color-mix(in oklch, var(--primary), 85% transparent);
}

/* Audiowide imported at file top */
[data-theme="dark"] {
  /* Surface: Rich "Midnight" foundation */
  --bg: #030712;
  --text: #f9fafb;
  --card-bg: #111827;
  --card-text: #f3f4f6;

  --muted: #9ca3af;
  --muted-subtle: #4b5563;
  --muted-deep: #d1d5db;

  /* Brand (Dark): Vibrant yellow that pops against dark bg */
  --primary: #fcd34d;
  --primary-hover: #fbbf24;
  --primary-active: #f59e0b;

  /* Semantic (Dark) - Slightly muted for better harmony */
  --success: #4ade80;
  --danger: #f87171;
  --warning: #fb923c;
  --info: #60a5fa;

  /* UI Elements (Dark) - Refined transparency */
  --border: rgba(255, 255, 255, 0.08);
  --input-bg: #030712;
  --input-border: rgba(255, 255, 255, 0.12);
  --icon-color: #9ca3af;

  /* Depth (Dark): Elegant ambient shadows with subtle rim light */
  --card-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05), 0 4px 6px -4px rgba(0, 0, 0, 0.5);
  --shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.02);
  --shadow-lg: 0 35px 60px -15px rgba(0, 0, 0, 0.6);
  --accent-glow: 0 0 30px color-mix(in oklch, var(--primary), 80% transparent);
}
*{box-sizing:border-box}
html, body{overflow-x:hidden}
body{background:var(--bg);color:var(--text);font-family:'Inter',sans-serif;padding-top:64px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

/* Global focus cleanup: remove ugly rings on click but keep for keyboard */
button:focus:not(:focus-visible),
.btn:focus:not(:focus-visible),
.icon-btn:focus:not(:focus-visible) {
  outline: none !important;
  box-shadow: none !important;
}

/* Use Audiowide for main page headings and add an artistic stroke */
h1.h3, h1.page-title, .page-heading {
  letter-spacing: 0.6px;
  position: relative;
  display: block;
  padding-bottom: 4px; /* closer to text */
}

h1.h3::after, h1.page-title::after, .page-heading::after {
  content: "";
  display: block;
  width: 140px;      /* longer */
  height: 4px;       /* thinner */
  margin: 4px auto 0;/* not too far from text */
  background: linear-gradient(90deg, rgba(251,191,36,0.1), var(--primary), rgba(139,92,246,0.1));
  border-radius: 6px;
  transform: skewX(-8deg);
  box-shadow: 0 4px 6px rgba(0,0,0,0.05); /* more subtle shadow, no glow */
}

@media (prefers-reduced-motion: reduce) {
  h1.h3::after, h1.page-title::after, .page-heading::after {
    transform: none;
  }
}

.card{
  background:var(--card-bg);
  color:var(--card-text);
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:var(--card-shadow);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.card::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.05),
    transparent
  );
  transition: 0.5s;
}

[data-theme="dark"] .card::before {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.1),
    transparent
  );
}

.card:hover{
  transform: translateY(-4px);
  border-color: var(--primary);
  box-shadow: var(--shadow), var(--accent-glow);
}

.card:hover::before {
  left: 100%;
  transition: 0.7s;
}

@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.stat-label{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--muted);margin-bottom: 0.5rem; display: block;}
.stat-value{font-size:1.75rem;font-weight:800; color: var(--text)}
.progress{height:8px;border-radius:10px; background-color: var(--border);}
.progress-bar { background-color: var(--primary); }

.nav-icon-box{
  padding:16px;
  text-align:center;
  border-radius:16px;
  background:var(--card-bg);
  cursor:pointer;
  border:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  gap:10px;
  color:var(--muted-3);
  transition: all 0.3s ease;
}

.nav-icon-box:hover{
  background:var(--primary-100);
  color:var(--primary);
  border-color:var(--primary);
  box-shadow: var(--accent-glow);
}

.nav-icon-box i{font-size:1.5rem;margin-bottom:0;display:inline-block}

/* DataTables Wrapper Adjustments */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
  padding: 1rem 1.5rem !important;
}

/* Fix misalignment of info and pagination in footer */
.dataTables_wrapper .row:last-child {
  padding: 0.5rem 1.5rem 1.5rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.dataTables_wrapper .dataTables_info {
  padding: 0 !important;
  font-size: 0.875rem;
  color: var(--muted);
}

.dataTables_wrapper .dataTables_paginate {
  padding: 0 !important;
  margin: 0 !important;
}

.dataTables_wrapper .pagination {
  margin: 0 !important;
  gap: 4px;
}

.dataTables_wrapper .page-item .page-link {
  border-radius: 8px !important;
  border: 1px solid var(--border);
  background-color: var(--card-bg);
  color: var(--text);
  padding: 0.5rem 0.85rem;
  font-size: 0.875rem;
  font-weight: 500;
  transition: all 0.2s ease;
  box-shadow: none !important;
}

.dataTables_wrapper .page-item.active .page-link {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: var(--black) !important;
  font-weight: 700;
}

.dataTables_wrapper .page-item:not(.active):hover .page-link {
  background-color: var(--primary-100);
  border-color: var(--primary);
  color: var(--primary);
}

.dataTables_wrapper .page-item.disabled .page-link {
  background-color: var(--input-bg);
  border-color: var(--border);
  opacity: 0.6;
}

.dataTables_wrapper .dataTables_filter input {
  border-radius: 10px;
  border: 1px solid var(--border);
  padding: 0.4rem 0.8rem;
  background-color: var(--input-bg);
  color: var(--text);
}
.dataTables_wrapper .dataTables_filter input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-100);
}

/* Force Header for DataTables */
#products-table thead th,
#companies-table thead th,
#clients-table thead th,
#orders-table thead th,
#users-table thead th,
#colis-table thead th,
.table-thead-yellow th {
  background: transparent !important;
  color: var(--text) !important;
  border-bottom: 2px solid var(--border) !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.5px;
  padding: 14px 24px !important;
}

/* Align table cell content with headers and card spacing */
#products-table tbody td,
#companies-table tbody td,
#clients-table tbody td,
#orders-table tbody td,
#users-table tbody td,
#colis-table tbody td,
.table tbody td {
  padding: 12px 24px !important;
  vertical-align: middle;
}

/* Yellow DataTables Pagination */
.page-item.active .page-link {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: var(--black) !important;
  font-weight: 700;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.page-link {
  color: var(--muted-3);
  border-radius: 8px !important;
  margin: 0 2px;
}
.page-link:hover {
  background-color: var(--primary-100);
  border-color: var(--primary);
  color: var(--primary);
}

/* DataTables Sorting Icon Styling */
table.dataTable thead.table-thead-yellow .sorting::before,
table.dataTable thead.table-thead-yellow .sorting_asc::before,
table.dataTable thead.table-thead-yellow .sorting_desc::before,
table.dataTable thead.table-thead-yellow .sorting::after,
table.dataTable thead.table-thead-yellow .sorting_asc::after,
table.dataTable thead.table-thead-yellow .sorting_desc::after {
  color: var(--text) !important;
  opacity: 0.3 !important;
}

table.dataTable thead.table-thead-yellow .sorting_asc::before,
table.dataTable thead.table-thead-yellow .sorting_desc::after {
  opacity: 1 !important;
}

.table-custom th{font-weight:600;color:var(--muted-2);font-size:.8rem; text-transform: uppercase; letter-spacing: 0.5px}
.badge { padding: 0.5em 0.8em; font-weight: 600; }
.badge-soft-success{background:rgba(var(--success-rgb), 0.1) !important;color:var(--success) !important}
.badge-soft-primary{background:var(--primary-100) !important;color:var(--primary-active) !important}
.badge-soft-warning{background:rgba(var(--warning-rgb), 0.1) !important;color:var(--warning) !important}
.badge-soft-danger{background:rgba(var(--danger-rgb), 0.1) !important;color:var(--danger) !important}
.badge-soft-info{background:rgba(var(--info-rgb), 0.1) !important;color:var(--info) !important}

/* Dark mode specific badge overrides */
[data-theme="dark"] .badge-soft-primary { background: var(--primary-100) !important; color: var(--primary) !important; }
[data-theme="dark"] .badge-soft-warning { background: rgba(var(--warning-rgb), 0.1) !important; color: var(--warning) !important; }
[data-theme="dark"] .badge-soft-success { background: rgba(var(--success-rgb), 0.15) !important; color: var(--success) !important; }
[data-theme="dark"] .badge-soft-info { background: rgba(var(--info-rgb), 0.15) !important; color: var(--info) !important; }

.top-navbar{
  z-index:1030;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  background:var(--card-bg);
  border-bottom:1px solid var(--border);
  height:64px;
  display: flex;
  align-items: center;
}
.top-navbar .container-fluid {
  height: 100%;
  display: flex;
  align-items: center;
}
.navbar-brand .brand-logo{height:42px;width:auto;display:inline-block;border-radius:6px;background:transparent;margin-right:8px;object-fit:contain}
.logo-img{display:block;height:42px;width:auto;border-radius:6px}

/* Navbar Button fixes for mobile */
.top-navbar .btn {
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.top-navbar .btn-outline-secondary.d-lg-none {
    width: 40px;
    padding: 0;
    border-radius: 12px;
    color: var(--muted-3);
    border-color: var(--border);
}
.top-navbar .btn-outline-secondary.d-lg-none:hover {
    background: var(--primary-100);
    color: var(--primary);
    border-color: var(--primary);
}


.search-input{
  width:240px;
  background:var(--input-bg);
  border:1px solid var(--input-border);
  border-radius:12px;
  padding:8px 16px;
  transition: all 0.2s ease;
  color:var(--text);
}
.search-input:focus{
  outline: 0;
  border-color: var(--primary);
  box-shadow: 0 0 0 4px var(--primary-100);
  width: 280px;
}
.icon-btn{
  width:40px;
  height:40px;
  border-radius:12px;
  background:var(--card-bg);
  border:1px solid var(--border);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--icon-color);
  transition: all 0.2s ease;
}
.icon-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-100);
}
.icon-btn:focus { outline: none; box-shadow: none; }
.icon-btn:focus-visible { box-shadow: 0 0 0 3px var(--primary-100); }

.btn-icon-sm {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--input-bg);
  border: 1px solid var(--border);
  color: var(--muted-2);
  transition: all 0.2s ease;
  line-height: 0; /* Ensures icons don't inherit high line-heights */
}

.btn-icon-sm i {
  font-size: 1rem;
  line-height: 1;
}

.btn d-inline-flex, .btn d-flex {
  line-height: 0;
}

.btn i[class^="bi-"] {
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-sm.d-inline-flex span {
  line-height: 1;
}

.btn-icon-sm:hover {
  background: var(--primary-100);
  border-color: var(--primary);
  color: var(--primary);
}

#sidebarToggle{background:transparent;border:none;color:var(--muted-3);width:32px;height:32px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;transition:all 0.2s ease}
#sidebarToggle:hover { background: var(--border); color: var(--primary); }
#sidebarToggle i{transition:transform .3s ease}
body.sidebar-collapsed #sidebarToggle i, html.sidebar-collapsed #sidebarToggle i{transform:rotate(0deg)} /* Reset and handle via script or CSS consistently */
/* We will use CSS only for the rotation state to keep it smooth */
body:not(.sidebar-collapsed) #sidebarToggle i, html:not(.sidebar-collapsed) #sidebarToggle i { transform: rotate(0deg); }
body.sidebar-collapsed #sidebarToggle i, html.sidebar-collapsed #sidebarToggle i { transform: rotate(180deg); }

.sidebar{
  position:fixed;
  top:64px;
  left:0;
  height:calc(100vh - 64px);
  width:280px; /* increased width for more readable nav */
  padding:0;
  background:var(--card-bg);
  border-right:1px solid var(--border);
  overflow: hidden !important;
  box-shadow: 4px 0 24px rgba(0,0,0,0.02);
  border-radius:0;
  z-index:1020;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
  display:flex;
  flex-direction:column;
}

/* Custom Scrollbar for Nav Wrapper */
.sidebar .nav-wrapper::-webkit-scrollbar {
  width: 4px;
}
.sidebar .nav-wrapper::-webkit-scrollbar-track {
  background: transparent;
}
.sidebar .nav-wrapper::-webkit-scrollbar-thumb {
  background: var(--primary);
  border-radius: 10px;
}
.sidebar .nav-wrapper::-webkit-scrollbar-thumb:hover {
  background: var(--primary-hover);
}

[data-theme="dark"] .sidebar {
  box-shadow: 10px 0 30px rgba(0,0,0,0.2);
}

.sidebar .nav-wrapper {
  display: block;
  flex: 1;
  overflow-y: auto !important;
  overflow-x: hidden;
  height: 100%;
  padding: 0.75rem 0; /* Remove horizontal padding from wrapper */
  padding-bottom: 100px;
  scrollbar-width: thin;
  scrollbar-color: var(--primary) transparent;
}

.sidebar .profile {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 1rem;
  border-top: 1px solid var(--border);
  background: var(--card-bg);
  z-index: 10;
  white-space: nowrap;
  overflow: hidden;
}

.sidebar .profile .avatar{
  width:40px;
  height:40px;
  border-radius:10px;
  background: var(--primary-gradient);
  color: var(--black);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.sidebar .nav-link{
  color:var(--muted-3);
  font-weight:600;
  padding:10px 8px; /* Reduced from 12px to minimize empty space */
  border-radius:12px;
  margin-bottom:4px;
  margin-right: 8px; /* Added margin to create the gap on the right for non-active items */
  transition:all 0.2s ease;
  display:flex;
  align-items:center;
  white-space: nowrap; /* Prevent text wrapping during transition */
}
.sidebar .nav-link i, .sidebar .nav-link .bi {
  transition: color 0.2s ease;
  font-size: 1.15rem;
  width: 28px;
  height: 28px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  line-height: 1;
  margin: 0 !important;
}

.submenu-arrow {
  transition: transform 0.25s ease;
}

[aria-expanded="true"] .submenu-arrow {
  transform: rotate(180deg);
}

/* Ensure offcanvas chevrons rotate when their collapse is open
   - Targets triggers inside `.offcanvas` by aria-expanded, by `.open` class (JS),
     and by progressive :has() where supported. */
.offcanvas .nav-link .bi-chevron-down {
  transition: transform 0.25s ease;
  transform-origin: center;
}
.offcanvas .nav-link[aria-expanded="true"] .bi-chevron-down,
.offcanvas .nav-item.open .bi-chevron-down,
.offcanvas .nav-item:has(.collapse.show) .bi-chevron-down {
  transform: rotate(180deg);
}

/* Desktop chevron: use same transition and rotation behavior as mobile */
.sidebar .nav-link .bi-chevron-down,
.sidebar .nav-link .submenu-arrow {
  transition: transform 0.25s ease;
  transform-origin: center;
}
.sidebar .nav-link[aria-expanded="true"] .bi-chevron-down,
.sidebar .nav-item.open .bi-chevron-down,
.sidebar .nav-item:has(.collapse.show) .bi-chevron-down,
.sidebar .nav-link[aria-expanded="true"] .submenu-arrow,
.sidebar .nav-item.open .submenu-arrow,
.sidebar .nav-item:has(.collapse.show) .submenu-arrow {
  transform: rotate(180deg);
}

.sidebar .nav-link:hover{background:var(--primary-100);color:var(--primary);transform:translateX(4px)}
.sidebar .nav-link:hover i, .sidebar .nav-link:hover .bi { color: var(--primary); }
.sidebar .nav-link.active{
  background: var(--primary) !important;
  color: var(--black) !important;
  margin-right: 0 !important; /* Touch the edge of the sidebar */
  border-radius: 12px 0 0 12px;
  padding-left: 8px;
  padding-right: 8px; /* Restored consistency */
  font-weight: 700;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  transform: none;
}
.sidebar .nav-link.active i, .sidebar .nav-link.active .bi { color: var(--black) !important; }
.offcanvas-body .nav-link{padding:12px;border-radius:12px;color:var(--muted-3)}

.main-content{
  margin-left:280px;
  /* Standardized gap to match top margin, maximizing working space */
  padding: 1.7rem 1.2rem;
  transition:margin-left .3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-x: hidden; /* Prevent horizontal scroll flash */
  width: auto;
  contain: layout; /* Helps with layout boundaries during transition */
}
.main-content .row.g-3{row-gap:.9rem}

/* Global Neumorphic Dropzone (Unified with upload.html) */
.drag-zone {
    border: 2px dashed var(--primary);
    background-color: var(--input-bg);
    border-radius: 18px;
    padding: 30px 20px;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
    margin: 10px 0;
    position: relative;
}

.drag-zone:hover, .drag-zone.dragover {
    background-color: var(--primary-100);
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
}

.drag-zone .icon-box {
    color: var(--primary);
    margin-bottom: 12px;
}

.drag-zone .icon-box i {
    font-size: 2.5rem;
}

.drag-zone p {
    font-size: 0.9rem;
    color: var(--text);
    margin-bottom: 4px;
    font-weight: 600;
}

.drag-zone span {
    font-size: 0.75rem;
    color: var(--muted-2);
}

.progress-container {
    height: 8px;
    background-color: var(--border);
    border-radius: 10px;
    overflow: hidden;
    display: none;
    margin-top: 15px;
}

.progress-bar-fill {
    height: 100%;
    background: var(--primary-gradient);
    width: 0%;
    transition: width 0.3s ease;
}


/* Collapsed sidebar (desktop) */
  body.sidebar-collapsed .sidebar, html.sidebar-collapsed .sidebar { width:64px }
  body.sidebar-collapsed .main-content, html.sidebar-collapsed .main-content { margin-left:64px }
body.sidebar-collapsed .sidebar .nav-link, html.sidebar-collapsed .sidebar .nav-link {
  justify-content:center;
  padding: 0;
  width: 44px;
  height: 44px;
  margin: 4px auto;
  transform: none;
  position: relative; /* Add this for chevron positioning */
  border-radius: 12px !important; /* Force uniform rounding when collapsed */
}

/* In narrow mode, remove the left padding that was added for the group indicator */
body.sidebar-collapsed .sidebar:not(:hover) .nav-item,
body.sidebar-collapsed .sidebar:not(:hover) .nav-group {
  padding-left: 0 !important;
}

/* Force consistent icon and text alignment for all nav-links, especially those with nested spans */
.sidebar .nav-link > span:first-child {
  display: inline-flex;
  align-items: center;
  flex: 1;
}

/* In narrow mode (not hovered), force the internal span to center its icon */
body.sidebar-collapsed .sidebar:not(:hover) .nav-link > span:first-child {
  justify-content: center !important;
}

/* Ensure sub-links inside collapse containers maintain alignment */
.sidebar .collapse .nav-link {
  padding-left: 8px !important;
}

/* Ensure icons inside collapsed sidebar are square and vertically centered */
body.sidebar-collapsed .sidebar .nav-link i, html.sidebar-collapsed .sidebar .nav-link i {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

body.sidebar-collapsed .sidebar .nav-link.active,
html.sidebar-collapsed .sidebar .nav-link.active {
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  width: 44px !important;
}

body.sidebar-collapsed .sidebar:hover .nav-link.active,
html.sidebar-collapsed .sidebar:hover .nav-link.active {
  margin-left: 0 !important;
  margin-right: 0 !important;
  border-radius: 12px 0 0 12px !important;
  padding-left: 8px !important;
  width: auto !important; /* Restore auto width when hovered/expanded */
}

body.sidebar-collapsed .sidebar .submenu-arrow, html.sidebar-collapsed .sidebar .submenu-arrow {
  position: absolute;
  bottom: 8px;
  right: 8px;
  font-size: 0.65rem;
  width: auto !important;
  opacity: 0.6;
  margin: 0 !important;
  transition: transform 0.25s ease, opacity 0.2s ease;
  display: none !important;
}
body.sidebar-collapsed .sidebar .nav-link .nav-text, html.sidebar-collapsed .sidebar .nav-link .nav-text { display:none }
body.sidebar-collapsed .sidebar:not(:hover) .submenu-list,
html.sidebar-collapsed .sidebar:not(:hover) .submenu-list,
body.sidebar-collapsed .sidebar:not(:hover) .collapse,
html.sidebar-collapsed .sidebar:not(:hover) .collapse,
body.sidebar-collapsed .sidebar:not(:hover) .collapsing,
html.sidebar-collapsed .sidebar:not(:hover) .collapsing {
  display: none !important;
}
body.sidebar-collapsed .sidebar .profile, html.sidebar-collapsed .sidebar .profile { justify-content: center; padding: 1rem 0; }
body.sidebar-collapsed .sidebar .profile-text, html.sidebar-collapsed .sidebar .profile-text { display:none }
body.sidebar-collapsed .sidebar .avatar, html.sidebar-collapsed .sidebar .avatar { margin-right:0; border-radius: 12px; }
body.sidebar-collapsed .navbar-brand .logo-img, html.sidebar-collapsed .navbar-brand .logo-img { margin-left: auto; margin-right: auto; display: block; }

/* Hover-expand collapsed sidebar: on large screens, expand sidebar while hovered */
@media (min-width: 768px) {
  body.sidebar-collapsed .sidebar, html.sidebar-collapsed .sidebar {
    transition: width 0.25s cubic-bezier(0.4,0,0.2,1);
  }

  /* Expand on hover */
  body.sidebar-collapsed .sidebar:hover, html.sidebar-collapsed .sidebar:hover {
    width:280px;
    box-shadow: 4px 0 30px rgba(0,0,0,0.06);
  }

  /* Shift main content while sidebar hovered */
  body.sidebar-collapsed .sidebar:hover ~ main .main-content, html.sidebar-collapsed .sidebar:hover ~ main .main-content {
    margin-left:280px;
    transition: margin-left 0.25s cubic-bezier(0.4,0,0.2,1);
  }

  /* When expanded on hover, show full nav text and match normal sidebar exactly */
  body.sidebar-collapsed .sidebar:hover .nav-link,
  html.sidebar-collapsed .sidebar:hover .nav-link {
    justify-content: flex-start;
    padding: 10px 8px !important;
    width: 100% !important; /* Force full width expansion */
    margin-left: 0 !important;
    margin-right: 8px !important;
    margin-bottom: 4px;
    display: flex !important;
  }

  body.sidebar-collapsed .sidebar:hover .nav-link.active,
  html.sidebar-collapsed .sidebar:hover .nav-link.active {
    margin-right: 0 !important; /* Touch the edge when active */
    border-radius: 12px 0 0 12px !important;
    padding-left: 8px !important;
  }
  body.sidebar-collapsed .sidebar:hover .submenu-arrow, html.sidebar-collapsed .sidebar:hover .submenu-arrow { display: inline-block !important; }
  /* When collapsed sidebar is hovered (auto-expand) make the chevron match normal size
     and flow inline with content instead of the small absolute-positioned chevron. */
  body.sidebar-collapsed .sidebar:hover .submenu-arrow, html.sidebar-collapsed .sidebar:hover .submenu-arrow {
    position: static !important;
    font-size: 1.15rem !important; /* same as main nav icons */
    opacity: 1 !important;
    margin-left: 0.5rem !important;
    right: auto !important;
    bottom: auto !important;
    transform-origin: center;
    width: 28px !important;
    height: 28px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }
  body.sidebar-collapsed .sidebar:hover .submenu-list,
  html.sidebar-collapsed .sidebar:hover .submenu-list,
  body.sidebar-collapsed .sidebar:hover .collapse,
  html.sidebar-collapsed .sidebar:hover .collapse,
  body.sidebar-collapsed .sidebar:hover .collapsing,
  html.sidebar-collapsed .sidebar:hover .collapsing {
    margin-left: 0 !important;
    padding-left: 0 !important;
  }
  body.sidebar-collapsed .sidebar:hover .nav-text, html.sidebar-collapsed .sidebar:hover .nav-text { display: inline-block; }
  body.sidebar-collapsed .sidebar:hover .profile-text, html.sidebar-collapsed .sidebar:hover .profile-text { display:block; }
  body.sidebar-collapsed .sidebar:hover .profile, html.sidebar-collapsed .sidebar:hover .profile { justify-content: flex-start; padding: 1rem; }
  body.sidebar-collapsed .sidebar:hover .avatar, html.sidebar-collapsed .sidebar:hover .avatar { margin-right: 0.75rem; }
}

/* Submenu list styling */
.sidebar .submenu-list {
  padding-left: 0;
  margin-top: 2px;
}

.sidebar .submenu-list .nav-link {
  padding: 10px 8px; /* Reduced to match main nav links */
  font-weight: 600;
  border-radius: 12px;
  color: var(--muted-3);
  margin-bottom: 4px;
  margin-right: 8px; /* Maintain gap for inactive sub-links */
  min-width: 0; /* Allow flex children to shrink */
}

.sidebar .submenu-list .nav-link > span:first-child {
  min-width: 0;
  flex: 1;
  display: inline-flex;
  align-items: center;
  overflow: hidden;
}

.sidebar .nav-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar .submenu-list .nav-link:hover {
  background: var(--primary-100);
  transform: translateX(4px);
  color: var(--primary);
}

.sidebar .submenu-list .nav-link.active {
  background: var(--primary) !important;
  color: var(--black) !important;
  border-radius: 12px 0 0 12px;
  margin-right: 0 !important; /* Touch the edge */
  padding-left: 8px;
  padding-right: 8px;
  font-weight: 700;
  box-shadow: var(--accent-glow);
}

.sidebar .nav-link.active i, .sidebar .submenu-list .nav-link.active .bi {
  color: var(--black) !important;
}

/* Permanent Icon Colors with higher specificity */
.sidebar .nav-link i.bi-house, .offcanvas .nav-link i.bi-house { color: #64748b !important; }
.sidebar .nav-link i.bi-file-earmark-text, .offcanvas .nav-link i.bi-file-earmark-text { color: #3b82f6 !important; }
.sidebar .nav-link i.bi-list-ul, .offcanvas .nav-link i.bi-list-ul { color: #94a3b8 !important; }
.sidebar .nav-link i.bi-hourglass-split, .offcanvas .nav-link i.bi-hourglass-split { color: #f59e0b !important; }
.sidebar .nav-link i.bi-person-badge, .offcanvas .nav-link i.bi-person-badge { color: #3b82f6 !important; }
.sidebar .nav-link i.bi-check2-square, .offcanvas .nav-link i.bi-check2-square { color: #22c55e !important; }
.sidebar .nav-link i.bi-box-seam, .offcanvas .nav-link i.bi-box-seam { color: #b86cff !important; }
.sidebar .nav-link i.bi-archive, .offcanvas .nav-link i.bi-archive { color: #a8a29e !important; }
.sidebar .nav-link i.bi-cart, .offcanvas .nav-link i.bi-cart { color: #10b981 !important; }
.sidebar .nav-link i.bi-people, .offcanvas .nav-link i.bi-people { color: #06b6d4 !important; }
.sidebar .nav-link i.bi-box, .offcanvas .nav-link i.bi-box { color: #6366f1 !important; }
.sidebar .nav-link i.bi-truck, .offcanvas .nav-link i.bi-truck { color: #f97316 !important; }
.sidebar .nav-link i.bi-shield-lock, .offcanvas .nav-link i.bi-shield-lock { color: #ef4444 !important; }
.sidebar .nav-link i.bi-gear, .offcanvas .nav-link i.bi-gear { color: #4b5563 !important; }

/* Active state - Keep icons dark when active for contrast */
.sidebar .nav-link.active i {
    color: var(--black) !important;
}

/* Slightly dim on hover if not active */
.sidebar .nav-link:hover:not(.active) i {
    filter: brightness(0.8);
}

/* Notification count badges positioned to the right */
.count-badge {
    margin-left: 0.5rem; /* Space between text and badge */
    color: white;
    min-width: 26px;
    width: auto;
    height: 18px;
    padding: 0 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    font-size: 11px !important; /* Fixed pixel size for absolute consistency */
    font-weight: 800 !important;
    line-height: 1;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    flex-shrink: 0;
    font-family: 'Inter', sans-serif !important;
}

.sidebar .nav-link.d-flex {
    width: 100%;
}

.sidebar .nav-link.d-flex > span:first-child {
    flex: 1;
    display: inline-flex;
    align-items: center;
    min-width: 0;
}


/* Color coded badges based on order progression */
.badge-en-attente {
    background: #f59e0b; /* Amber */
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
}

.badge-mes-bons {
    background: #3b82f6; /* Blue */
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

.badge-prete {
    background: #b86cff; /* Purple */
    box-shadow: 0 2px 8px rgba(184, 108, 255, 0.3);
}

.badge-validation {
    background: #22c55e; /* Green */
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.3);
}


.nav-link:hover .count-badge {
    transform: scale(1.1);
}

.sidebar .submenu-list { border-left: none !important; }

/* Group indicator: draw a left border that spans the whole group when submenu is expanded
   - Targets a wrapping element with class `nav-group` (common pattern)
   - Works when the group has an explicit `.open`/`.active-group` class or when
     Bootstrap's `.collapse.show` is present. Uses `:has()` as progressive enhancement.
   - Falls back to being hidden when sidebar is collapsed. */
.sidebar .nav-group, .sidebar .nav-item { position: relative; padding-left: 8px; }
.sidebar .nav-group::before, .sidebar .nav-item::before {
  content: "";
  position: absolute;
  left: 0; /* Move indicator to the far left of the item */
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 8px;
  background: transparent;
  opacity: 0;
  transition: all 200ms ease;
  pointer-events: none;
}

/* When the group is open/expanded show the border.
   Include selectors for `.open` and `.active-group` (JS-friendly),
   and use :has() as progressive enhancement where supported. */
.sidebar .nav-group.open::before,
.sidebar .nav-group.active-group::before,
.sidebar .nav-group:has(.collapse.show)::before,
.sidebar .nav-item.open::before,
.sidebar .nav-item.active-group::before,
.sidebar .nav-item:has(.collapse.show)::before {
  background: var(--primary);
  box-shadow: 0 4px 12px color-mix(in oklch, var(--primary), 80% transparent);
  opacity: 1;
}

/* Hide the indicator when the sidebar is collapsed, but show when hovered (auto-expand) */
body.sidebar-collapsed .sidebar .nav-group::before,
html.sidebar-collapsed .sidebar .nav-group::before,
body.sidebar-collapsed .sidebar .nav-item::before,
html.sidebar-collapsed .sidebar .nav-item::before { display: none; }

/* When collapsed but hovered (auto-expand), show the indicator so groups are visible */
body.sidebar-collapsed .sidebar:hover .nav-group::before,
html.sidebar-collapsed .sidebar:hover .nav-group::before,
body.sidebar-collapsed .sidebar:hover .nav-item::before,
html.sidebar-collapsed .sidebar:hover .nav-item::before { display: block; }

@media (max-width:767.98px){.sidebar{display:none}.main-content{margin-left:0;padding:1rem}.search-input{width:160px}.search-input:focus{width: 200px}}

[data-theme="dark"] .nav-icon-box{background:var(--card-bg);border-color:var(--border)}

/* Dark-mode component overrides */
[data-theme="dark"] .text-muted{color:var(--muted) !important}
[data-theme="dark"] .dropdown-menu, [data-theme="dark"] .offcanvas, [data-theme="dark"] .dropdown-menu.show{background:var(--card-bg);color:var(--text);border:1px solid var(--border);box-shadow:var(--card-shadow); border-radius: 12px; }
[data-theme="dark"] .sidebar .nav-link.active { color: #000; }
[data-theme="dark"] .sidebar .nav-link.active .bi { color: #000 !important; }
[data-theme="dark"] .dropdown-item{color:var(--text); border-radius: 8px; margin: 0 4px; width: calc(100% - 8px); }
[data-theme="dark"] .dropdown-item:hover, [data-theme="dark"] .dropdown-item:focus{background:var(--primary-100);color:var(--primary)}
[data-theme="dark"] .dropdown-menu .dropdown-divider{border-color:var(--border)}
[data-theme="dark"] .btn-light{background:var(--card-bg);color:var(--text);border-color:var(--border)}

.offcanvas-header {
    height: 64px;
    padding: 0 1.5rem;
}
.offcanvas-header img {
    height: 42px;
    width: auto;
}

/* Make mobile offcanvas use the same color system as the sidebar */
.offcanvas {
  background: var(--card-bg) !important;
  color: var(--card-text) !important;
  border-right: 1px solid var(--border);
}
.offcanvas .offcanvas-body {
  background: transparent;
  color: inherit;
  padding: 1rem 1rem 2rem 1rem;
}
.offcanvas .nav-link { color: var(--muted-3); }
.offcanvas .nav-link.active { background: var(--primary); color: var(--black); box-shadow: 0 4px 8px rgba(0,0,0,0.1); }

/* Group indicator inside offcanvas (mobile) — mirrors desktop sidebar behavior */
.offcanvas .nav-item, .offcanvas .nav-group { position: relative; }
.offcanvas .nav-item::before, .offcanvas .nav-group::before {
  content: "";
  position: absolute;
  left: 8px; /* keep indicator near edge */
  top: 8px;
  bottom: 8px;
  width: 4px;
  border-radius: 8px;
  background: transparent;
  opacity: 0;
  transition: all 180ms ease;
  pointer-events: none;
  z-index: 0; /* keep it behind link content */
}
.offcanvas .nav-item.open::before,
.offcanvas .nav-item:has(.collapse.show)::before,
.offcanvas .nav-group.open::before,
.offcanvas .nav-group:has(.collapse.show)::before {
  background: var(--primary);
  box-shadow: 0 4px 12px color-mix(in oklch, var(--primary), 80% transparent);
  opacity: 1;
}

/* Ensure submenu lists are flush in offcanvas too */
.offcanvas .submenu-list { padding-left: 0; margin-left: 0; }
.offcanvas .nav-link { padding-left: 2.4rem; position: relative; z-index: 1; }
.offcanvas .submenu-list .nav-link { padding-left: 2.4rem; }

/* Hide admin/profile details in the mobile offcanvas to keep it minimal */
.offcanvas .profile { display: none !important; }

/* Temporarily hide notification bell icons site-wide (use d-none in markup later if desired) */
/*  .notif-bell { display: none !important; } */

[data-theme="dark"] .form-control, [data-theme="dark"] .search-input{background:var(--input-bg);color:var(--text);border-color:var(--input-border)}
[data-theme="dark"] .btn-close {
    filter: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
    background-color: var(--card-bg); /* Ensure circular background if styling is skipped elsewhere */
}

/* DataTables Dark Mode overrides */
[data-theme="dark"] .table {
  color: var(--text);
  border-color: var(--border) !important;
}

[data-theme="dark"] .table > :not(caption) > * > * {
  background-color: var(--card-bg) !important;
  color: var(--text) !important;
  border-bottom-color: var(--border) !important;
}

[data-theme="dark"] .table-hover tbody tr:hover td {
  background-color: var(--primary-100) !important;
  color: var(--primary) !important;
}

[data-theme="dark"] .list-group-item {
  background-color: var(--card-bg) !important;
  color: var(--card-text) !important;
  border-color: var(--border) !important;
}

[data-theme="dark"] .dataTables_wrapper .dataTables_length,
[data-theme="dark"] .dataTables_wrapper .dataTables_filter,
[data-theme="dark"] .dataTables_wrapper .dataTables_info,
[data-theme="dark"] .dataTables_wrapper .dataTables_paginate {
  color: var(--muted) !important;
}

[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .page-link {
  background-color: var(--card-bg) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .page-item.active .page-link {
  background: #FFD559 !important;
  color: #000 !important;
  border-color: #FFD559 !important;
}

[data-theme="dark"] .dataTables_wrapper .dataTables_filter input {
  background-color: var(--input-bg) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

[data-theme="dark"] .dataTables_wrapper .dataTables_length select {
  background-color: var(--input-bg) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

/* Buttons Theme */
.btn-primary {
    background: var(--primary-gradient) !important;
    border: none !important;
    color: var(--black) !important;
    font-weight: 700 !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: all 0.3s ease !important;
}

.btn-primary:hover, .btn-primary:active, .btn-primary:focus {
    background: var(--primary-gradient-hover) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    color: var(--black) !important;
}

.btn-light {
    background: var(--card-bg) !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
}

.btn-light:hover {
    background: var(--input-bg) !important;
    border-color: var(--primary) !important;
}

.btn-secondary {
    background: var(--secondary) !important;
    border: none !important;
    color: var(--white) !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
}

.btn-secondary:hover {
    background: var(--secondary-hover) !important;
    transform: translateY(-2px);
}

[data-theme="dark"] .btn-secondary {
    background: var(--secondary) !important;
    color: var(--text) !important;
}

/* Input Group & Icon Styling */
.input-group {
    background: var(--input-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 0 0.75rem;
    transition: all 0.2s ease;
}

.input-group:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-100);
}

.input-group .form-control, .input-group .form-select {
    border: none !important;
    background: transparent !important;
    padding-left: 0.5rem;
    box-shadow: none !important;
    height: 48px; /* Standardize height */
    color: var(--text);
}

.input-group .form-select {
    padding-right: 2rem;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
}

.input-group-text {
    background: transparent !important;
    border: none !important;
    color: var(--primary);
    padding-right: 0;
}

[data-theme="dark"] .input-group {
    background: var(--input-bg);
}

[data-theme="dark"] ::placeholder {
    color: var(--muted) !important;
    opacity: 0.6 !important;
}

[data-theme="dark"] .form-control::placeholder,
[data-theme="dark"] .search-input::placeholder {
    color: var(--muted) !important;
    opacity: 0.6 !important;
}

[data-theme="dark"] select option {
    background-color: var(--card-bg);
    color: var(--text);
}

/* Modal Customizations */
.modal-content {
    border-radius: 24px !important;
    border: none;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.modal-header .btn-close {
    background-color: var(--card-bg);
    padding: 0.8rem;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.modal-header .btn-close:hover {
    background-color: var(--danger) !important;
    filter: brightness(1) invert(1); /* Makes the icon dark on the bright background */
    transform: rotate(90deg);
}

[data-theme="dark"] .modal-header .btn-close:hover {
    filter: none; /* Icon is already white in dark mode via background-image, so it will be white on Red background */
}

/* Drag & Drop Zone */
.drag-zone {
    border: 2px dashed var(--primary);
    background-color: var(--primary-100);
    border-radius: 20px;
    padding: 3rem 1.5rem;
    text-align: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    margin: 1.5rem 0;
    position: relative;
    overflow: hidden;
}

.drag-zone::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: var(--primary);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 0;
}

.drag-zone:hover, .drag-zone.dragover {
    background-color: var(--primary-100);
    border-style: solid;
    transform: translateY(-4px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.drag-zone * {
    position: relative;
    z-index: 1;
}

.drag-zone .icon-box {
    font-size: 3.5rem;
    color: var(--primary);
    margin-bottom: 1rem;
    filter: drop-shadow(0 4px 8px var(--primary-300));
}

.drag-zone p {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
    color: var(--text);
}

.drag-zone span {
    font-size: 0.9rem;
    color: var(--muted);
}

/* Progress bar for imports */
.progress-container {
    height: 10px;
    background: var(--border);
    border-radius: 10px;
    margin: 1.5rem 0;
    overflow: hidden;
    display: none;
}

.progress-bar-fill {
    height: 100%;
    background: var(--primary-gradient);
    width: 0%;
    transition: width 0.3s ease;
}

/* Modal Dark Mode overrides */
[data-theme="dark"] .modal-content {
    background-color: var(--card-bg);
    color: var(--text);
    border: 1px solid var(--border);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5) !important;
}

[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer {
    border-color: var(--border) !important;
    background-color: transparent !important;
}

[data-theme="dark"] .bg-light {
    background-color: var(--input-bg) !important;
    color: var(--text) !important;
}

[data-theme="dark"] .drag-zone {
    background-color: var(--primary-100);
    border-color: var(--primary);
}

[data-theme="dark"] .drag-zone:hover, [data-theme="dark"] .drag-zone.dragover {
    background-color: var(--primary-200);
}

[data-theme="dark"] .progress-container {
    background: var(--input-bg);
}

/* Force Header persist in Dark Mode */
[data-theme="dark"] .table-thead-yellow th,
[data-theme="dark"] #products-table thead th,
[data-theme="dark"] #companies-table thead th,
[data-theme="dark"] #clients-table thead th,
[data-theme="dark"] #orders-table thead th,
[data-theme="dark"] #users-table thead th,
[data-theme="dark"] .table-thead-yellow th i {
  background: transparent !important;
  color: var(--text) !important;
}