/* ==========================================================================
   PERFEX CRM MODERN DESIGN SYSTEM & UI TRANSFORMATION (custom.css)
   A modern, clean, Linear/Stripe-inspired UI for Perfex CRM.
   Pure CSS - Zero PHP / backend changes - Zero modifications to saas_core.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. ROOT DESIGN TOKENS & CSS VARIABLES
   -------------------------------------------------------------------------- */
:root {
  /* Official Yana Africa Brand Palette (Base: #1F1A56) */
  --crm-primary: #1F1A56;
  --crm-primary-hover: #2B2476;
  --crm-primary-active: #181444;
  --crm-primary-light: rgba(31, 26, 86, 0.08);
  --crm-primary-glow: rgba(31, 26, 86, 0.28);
  --crm-primary-gradient: linear-gradient(135deg, #1F1A56 0%, #3730A3 100%);
  --crm-primary-gradient-hover: linear-gradient(135deg, #181444 0%, #2B2476 100%);

  /* Neutral Surface Palette */
  --crm-bg-canvas: #f8fafc;
  --crm-bg-surface: #ffffff;
  --crm-bg-subtle: #f1f5f9;
  --crm-bg-muted: #e2e8f0;

  /* Typography Colors */
  --crm-text-heading: #0f172a;
  --crm-text-body: #334155;
  --crm-text-muted: #64748b;
  --crm-text-subtle: #94a3b8;

  /* Borders & Dividers */
  --crm-border: #e2e8f0;
  --crm-border-subtle: #f1f5f9;
  --crm-border-strong: #cbd5e1;

  /* Status Colors */
  --crm-success: #10b981;
  --crm-success-light: rgba(16, 185, 129, 0.12);
  --crm-success-text: #047857;

  --crm-warning: #f59e0b;
  --crm-warning-light: rgba(245, 158, 11, 0.12);
  --crm-warning-text: #b45309;

  --crm-danger: #ef4444;
  --crm-danger-light: rgba(239, 68, 68, 0.12);
  --crm-danger-text: #b91c1c;

  --crm-info: #0ea5e9;
  --crm-info-light: rgba(14, 165, 233, 0.12);
  --crm-info-text: #0369a1;

  /* Yana Primary Sidebar Palette (Exact #1F1A56 from yana.africa) */
  --crm-sidebar-bg: #1F1A56;
  --crm-sidebar-surface: #27216A;
  --crm-sidebar-border: rgba(255, 255, 255, 0.12);
  --crm-sidebar-text: #E0DCF8;
  --crm-sidebar-text-hover: #FFFFFF;
  --crm-sidebar-item-hover: rgba(255, 255, 255, 0.12);
  --crm-sidebar-item-active: rgba(255, 255, 255, 0.22);

  /* Shadows */
  --crm-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.04);
  --crm-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.06), 0 1px 2px 0 rgba(0, 0, 0, 0.04);
  --crm-shadow-md: 0 4px 14px -2px rgba(0, 0, 0, 0.06), 0 2px 6px -1px rgba(0, 0, 0, 0.03);
  --crm-shadow-lg: 0 10px 25px -3px rgba(0, 0, 0, 0.08), 0 4px 10px -2px rgba(0, 0, 0, 0.04);
  --crm-shadow-xl: 0 20px 35px -5px rgba(0, 0, 0, 0.1), 0 8px 16px -4px rgba(0, 0, 0, 0.05);

  /* Radii */
  --crm-radius-xs: 4px;
  --crm-radius-sm: 6px;
  --crm-radius-md: 10px;
  --crm-radius-lg: 14px;
  --crm-radius-xl: 18px;
  --crm-radius-pill: 9999px;

  /* Typography Font Stack */
  --crm-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* --------------------------------------------------------------------------
   2. GLOBAL TYPOGRAPHY, SMOOTHING & FOUNDATION
   -------------------------------------------------------------------------- */
html, body {
  font-family: var(--crm-font) !important;
  background: var(--crm-bg-canvas) !important;
  color: var(--crm-text-body) !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility;
  font-size: 13.5px !important;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--crm-font);
  color: var(--crm-text-heading);
  font-weight: 600;
  letter-spacing: -0.015em;
}

h1, .h1 { font-size: 24px; }
h2, .h2 { font-size: 20px; }
h3, .h3 { font-size: 17px; }
h4, .h4 { font-size: 15px; }
h5, .h5 { font-size: 13.5px; }

a {
  color: var(--crm-primary);
  text-decoration: none;
  transition: color 0.15s ease;
}

a:hover, a:focus {
  color: var(--crm-primary-hover);
  text-decoration: none;
}

::selection {
  background: rgba(31, 26, 86, 0.2);
  color: var(--crm-primary-active);
}

/* --------------------------------------------------------------------------
   3. APP WRAPPER & MAIN CONTENT CANVAS
   -------------------------------------------------------------------------- */
#wrapper {
  background: var(--crm-bg-canvas) !important;
  min-height: 100vh !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.content {
  padding: 24px 30px 40px !important;
  background: transparent !important;
}

@media (max-width: 768px) {
  .content {
    padding: 16px 14px 30px !important;
  }
}

/* --------------------------------------------------------------------------
   4. SIDEBAR NAVIGATION (#menu, aside#menu, #side-menu)
   -------------------------------------------------------------------------- */
body aside#menu,
body #menu,
body .sidebar {
  background: var(--crm-sidebar-bg) !important;
  border-right: 1px solid var(--crm-sidebar-border) !important;
  box-shadow: 2px 0 12px rgba(0, 0, 0, 0.15) !important;
  width: 235px !important;
  padding: 0 !important;
  overflow: hidden !important;
}

#side-menu,
.admin #side-menu {
  background: transparent !important;
  height: 100vh !important;
  max-height: 100vh !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 10px 8px 40px 10px !important;
  margin: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent !important;
}

/* Sidebar Branding / Logo Container - Clean Seamless Flow without Duplicate Lines */
#logo,
#menu #logo,
body aside#menu #logo,
.admin #logo,
body #side-menu li:first-child,
body #menu ul li:first-child,
#side-menu li.logo,
#menu .logo,
.sidebar .logo-wrapper,
#logo a,
#logo a.logo {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
  outline: none !important;
}

body #side-menu > li:first-child {
  padding: 8px 6px 12px !important;
  margin-bottom: 6px !important;
  border: none !important;
  border-bottom: none !important;
}

#logo {
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  border-bottom: none !important;
  height: 52px !important;
  display: flex !important;
  align-items: center !important;
}

#logo a,
#logo a.logo {
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  border-bottom: none !important;
  display: inline-flex !important;
  align-items: center !important;
}

.sidebar li a.logo-text {
  font-size: 19px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   Sidebar Category Section Headings (CUSTOMERS, SALES AND MARKETING, etc.)
   -------------------------------------------------------------------------- */
body #side-menu li[class*="-label"],
body #side-menu li.nav-header {
  margin-top: 18px !important;
  margin-bottom: 4px !important;
  padding: 0 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding-top: 14px !important;
  list-style: none !important;
  pointer-events: none !important; /* Non-clickable section divider */
  user-select: none !important;
}

/* First category group right below the SaaS section */
body #side-menu > li:first-child + li[class*="-label"],
body #side-menu > li.menu-item-saas_company + li[class*="-label"],
body #side-menu > li.menu-item-customers-label {
  margin-top: 14px !important;
  border-top: none !important;
  padding-top: 6px !important;
}

/* Group Header Anchor / Container - neutral and transparent */
body #side-menu li[class*="-label"] > a,
body #side-menu li.nav-header > a {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  cursor: default !important;
  padding: 4px 12px !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  transform: none !important;
  pointer-events: none !important;
}

/* Hide empty icons in section group labels */
body #side-menu li[class*="-label"] > a i.menu-icon,
body #side-menu li.nav-header > a i.menu-icon {
  display: none !important;
  width: 0 !important;
  margin: 0 !important;
}

/* Group Header Text Styling (Overrides inline style and Bootstrap .text-muted) */
body #side-menu li[class*="-label"] .sub-menu-text,
body #side-menu li[class*="-label"] .menu-text,
body #side-menu li[class*="-label"] span.text-muted,
body #side-menu li[class*="-label"] a,
body #side-menu li[class*="-label"] span,
body #side-menu li.nav-header span {
  color: #B4AEE8 !important;
  -webkit-text-fill-color: #B4AEE8 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  opacity: 1 !important;
  line-height: 1.3 !important;
}

/* Prevent any hover effects on category section headings */
body #side-menu li[class*="-label"]:hover > a,
body #side-menu li[class*="-label"] > a:hover,
body #side-menu li[class*="-label"] > a:focus,
body #side-menu li[class*="-label"].active > a {
  background: transparent !important;
  color: #B4AEE8 !important;
  -webkit-text-fill-color: #B4AEE8 !important;
  transform: none !important;
  box-shadow: none !important;
  border: none !important;
}

/* Explicitly guarantee that all actual navigation links (single or collapsible) are interactive */
body #side-menu > li:not([class*="-label"]) > a,
body #side-menu li:not([class*="-label"]) > a {
  pointer-events: auto !important;
  cursor: pointer !important;
}

/* Main Menu Items */
body #side-menu > li > a,
body .sidebar .nav > li > a {
  color: var(--crm-sidebar-text) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  padding: 9px 13px !important;
  margin: 3px 0 !important;
  border-radius: var(--crm-radius-md) !important;
  display: flex !important;
  align-items: center !important;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
}

/* Sidebar Icons */
body #side-menu li a i.menu-icon,
body .sidebar li a i.menu-icon {
  width: 20px !important;
  font-size: 16px !important;
  margin-right: 12px !important;
  color: #E0DCF8 !important;
  opacity: 0.9 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: transform 0.18s ease, opacity 0.18s ease !important;
}

/* Menu Hover */
body #side-menu > li > a:hover,
body #side-menu > li > a:focus,
body .sidebar .nav > li > a:hover,
body .sidebar .nav > li > a:focus {
  color: #ffffff !important;
  background: var(--crm-sidebar-item-hover) !important;
  transform: translateX(2px) !important;
}

body #side-menu > li > a:hover i.menu-icon,
body .sidebar .nav > li > a:hover i.menu-icon {
  opacity: 1 !important;
  color: #ffffff !important;
}

/* Active Top-Level Menu Item */
body #side-menu > li.active > a,
body .sidebar .nav > li.active > a {
  background: rgba(255, 255, 255, 0.22) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2) !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
}

body #side-menu > li.active > a i.menu-icon,
body .sidebar .nav > li.active > a i.menu-icon {
  opacity: 1 !important;
  color: #ffffff !important;
}

/* Submenu container (nav-second-level) - Completely transparent & seamless, no colored box */
.admin #side-menu li .nav-second-level,
body #side-menu li .nav-second-level,
.sidebar li .nav-second-level,
body #setup-menu li .nav-second-level,
.admin #setup-menu li .nav-second-level {
  background: transparent !important;
  background-color: transparent !important;
  border-radius: 0 !important;
  margin: 2px 0 4px 0 !important;
  padding: 0 !important;
  border: none !important;
  border-left: none !important;
  border-left: 0 !important;
  box-shadow: none !important;
}

.admin #side-menu li .nav-second-level li,
body #side-menu li .nav-second-level li,
.sidebar li .nav-second-level li,
body #setup-menu li .nav-second-level li,
.admin #setup-menu li .nav-second-level li {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  border-left: none !important;
  border-left: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 1px 0 !important;
}

.admin #side-menu li .nav-second-level li a,
body #side-menu li .nav-second-level li a,
.sidebar li .nav-second-level li a,
body #setup-menu li .nav-second-level li a,
.admin #setup-menu li .nav-second-level li a {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  border-left: none !important;
  border-left: 0 !important;
  box-shadow: none !important;
  color: #E0DCF8 !important;
  font-size: 13.5px !important;
  font-weight: 400 !important;
  padding: 8px 14px 8px 24px !important;
  margin: 1px 0 !important;
  border-radius: var(--crm-radius-md) !important;
  display: flex !important;
  align-items: center !important;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Submenu Icons */
.admin #side-menu li .nav-second-level li a i.menu-icon,
body #side-menu li .nav-second-level li a i.menu-icon,
.sidebar li .nav-second-level li a i.menu-icon,
body #setup-menu li .nav-second-level li a i.menu-icon,
.admin #setup-menu li .nav-second-level li a i.menu-icon {
  width: 18px !important;
  font-size: 13.5px !important;
  margin-right: 10px !important;
  color: #E0DCF8 !important;
  opacity: 0.85 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.18s ease !important;
}

.admin #side-menu li .nav-second-level li a:hover i.menu-icon,
body #side-menu li .nav-second-level li a:hover i.menu-icon,
.sidebar li .nav-second-level li a:hover i.menu-icon,
.admin #side-menu li .nav-second-level li.active a i.menu-icon,
body #side-menu li .nav-second-level li.active a i.menu-icon,
.sidebar li .nav-second-level li.active a i.menu-icon {
  color: #ffffff !important;
  opacity: 1 !important;
}

.admin #side-menu li .nav-second-level li a:hover,
body #side-menu li .nav-second-level li a:hover,
.sidebar li .nav-second-level li a:hover,
body #setup-menu li .nav-second-level li a:hover,
.admin #setup-menu li .nav-second-level li a:hover {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.15) !important;
  border: none !important;
  border-left: none !important;
  border-left: 0 !important;
}

/* Active Submenu Item - Normal pill layout matching parent active items, NO left border */
.admin #side-menu li .nav-second-level li.active a,
body #side-menu li .nav-second-level li.active a,
.sidebar li .nav-second-level li.active a,
body #setup-menu li .nav-second-level li.active a,
.admin #setup-menu li .nav-second-level li.active a {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.22) !important;
  font-weight: 600 !important;
  border: none !important;
  border-left: none !important;
  border-left: 0 !important;
  padding: 8px 14px 8px 24px !important;
  margin: 1px 0 !important;
  border-radius: var(--crm-radius-md) !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center !important;
}

/* Floating submenu when sidebar is collapsed / mini */
body.hide-sidebar #side-menu > li > .nav-second-level,
body.page-small #side-menu > li > .nav-second-level,
body.hide-sidebar .sidebar .nav-second-level {
  background: #1F1A56 !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: var(--crm-radius-md) !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35) !important;
  padding: 8px !important;
}

/* Sidebar Badges */
body #side-menu .badge,
body .sidebar .badge {
  background: rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  padding: 3px 7px !important;
  border-radius: var(--crm-radius-pill) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

body #side-menu li.active .badge,
body .sidebar li.active .badge {
  background: rgba(255, 255, 255, 0.25) !important;
}

/* Sidebar Arrow Dropdown Indicator - White color & Proper orientation */
.sidebar .arrow,
#side-menu .arrow,
body #menu .arrow,
body aside#menu #side-menu .arrow,
body #setup-menu-wrapper .arrow,
html body #side-menu .arrow,
html body aside#menu #side-menu li a .arrow,
html body aside#menu #side-menu li a span.arrow {
  margin-left: auto !important;
  float: none !important;
  font-size: 11px !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  opacity: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: transform 0.2s ease, opacity 0.2s ease, color 0.2s ease !important;
}

body aside#menu #side-menu .fa.arrow:before,
body #setup-menu-wrapper .fa.arrow:before,
.sidebar .fa.arrow:before,
#side-menu .fa.arrow:before,
html body aside#menu #side-menu .arrow:before,
html body aside#menu #side-menu .fa.arrow:before,
html body aside#menu #side-menu li a span.arrow:before,
html body aside#menu #side-menu li a span.fa.arrow:before {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  opacity: 1 !important;
}

/* Hover state on menu item */
.sidebar li > a:hover .arrow,
#side-menu li > a:hover .arrow,
html body aside#menu #side-menu li a:hover .arrow,
html body aside#menu #side-menu li a:hover .arrow:before {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  opacity: 1 !important;
}

/* When parent menu is active / open -> Point DOWN cleanly (\f078) in white */
.sidebar li.active > a > .arrow,
#side-menu li.active > a > .arrow,
body aside#menu #side-menu .active > a > .fa.arrow,
body #setup-menu-wrapper .active > a > .fa.arrow,
html body aside#menu #side-menu li.active > a > .arrow,
html body aside#menu #side-menu li.active > a > span.arrow {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  opacity: 1 !important;
  transform: none !important;
}

body aside#menu #side-menu .active > a > .fa.arrow:before,
body #setup-menu-wrapper .active > a > .fa.arrow:before,
.sidebar li.active > a > .fa.arrow:before,
#side-menu li.active > a > .fa.arrow:before,
html body aside#menu #side-menu li.active > a > .arrow:before,
html body aside#menu #side-menu li.active > a > span.arrow:before,
html body aside#menu #side-menu li.active > a > span.fa.arrow:before {
  content: "\f078" !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  opacity: 1 !important;
}

/* Setup / Customizer Menu in Sidebar - Yana Africa Dark Brand Theme */
#setup-menu-wrapper,
body #setup-menu-wrapper,
.admin #setup-menu-wrapper {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  bottom: 0 !important;
  width: 235px !important;
  height: 100vh !important;
  max-height: 100vh !important;
  z-index: 1050 !important;
  background: var(--crm-sidebar-bg) !important;
  background-color: var(--crm-sidebar-bg) !important;
  border-right: 1px solid var(--crm-sidebar-border) !important;
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.35) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

#setup-menu,
body #setup-menu,
.admin #setup-menu {
  background: var(--crm-sidebar-bg) !important;
  background-color: var(--crm-sidebar-bg) !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 0 40px 0 !important;
}

#setup-menu > li:first-child,
.admin #setup-menu > li:first-child {
  background: rgba(255, 255, 255, 0.06) !important;
  border-bottom: 1px solid var(--crm-sidebar-border) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  padding: 0 14px !important;
  margin: 0 !important;
  margin-top: 0 !important;
  height: 46px !important;
  min-height: 46px !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  position: relative !important;
}

#setup-menu .close-customizer {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 6px !important;
  background: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: all 0.18s ease !important;
  box-sizing: border-box !important;
}

#setup-menu .close-customizer:hover {
  background: rgba(255, 255, 255, 0.22) !important;
  color: #ffffff !important;
}

#setup-menu .close-customizer i,
body .close-customizer .fa-close:before {
  background: transparent !important;
  background-color: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  font-size: 13px !important;
  line-height: 1 !important;
  color: #ffffff !important;
  display: inline-block !important;
}

#setup-menu .customizer-heading {
  position: static !important;
  top: auto !important;
  right: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 14.5px !important;
  letter-spacing: 0.3px !important;
  line-height: 1 !important;
}

#setup-menu > li:not(:first-child) > a,
.admin #setup-menu > li:not(:first-child) > a,
body #setup-menu > li:not(:first-child) > a,
body.admin #setup-menu li[class^="menu"]:not(:first-child) > a {
  color: var(--crm-sidebar-text) !important;
  -webkit-text-fill-color: var(--crm-sidebar-text) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  padding: 10px 14px !important;
  margin: 3px 8px !important;
  border-radius: var(--crm-radius-md) !important;
  display: flex !important;
  align-items: center !important;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
}

#setup-menu > li > a i.menu-icon,
.admin #setup-menu > li > a i.menu-icon {
  width: 20px !important;
  font-size: 15px !important;
  margin-right: 12px !important;
  color: #C8C2F2 !important;
  opacity: 0.9 !important;
  text-align: center !important;
}

#setup-menu > li > a .menu-text {
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
}

#setup-menu > li > a .arrow,
#setup-menu > li > a .fa.arrow {
  color: #ffffff !important;
  opacity: 0.85 !important;
  margin-left: auto !important;
}

#setup-menu > li > a:hover,
#setup-menu > li > a:focus,
.admin #setup-menu > li > a:hover,
.admin #setup-menu > li > a:focus,
body #setup-menu > li:not(.active) > a:hover {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: var(--crm-sidebar-item-hover) !important;
  transform: translateX(3px) !important;
}

#setup-menu > li > a:hover i.menu-icon,
.admin #setup-menu > li > a:hover i.menu-icon {
  color: #ffffff !important;
  opacity: 1 !important;
}

#setup-menu > li.active > a,
.admin #setup-menu > li.active > a,
body #setup-menu > li.active > a {
  background: rgba(255, 255, 255, 0.22) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2) !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
}

#setup-menu > li.active > a i.menu-icon,
.admin #setup-menu > li.active > a i.menu-icon {
  color: #ffffff !important;
  opacity: 1 !important;
}

/* Setup menu sub-levels */
#setup-menu .nav-second-level,
.admin #setup-menu .nav-second-level {
  background: transparent !important;
  background-color: transparent !important;
  padding: 2px 0 !important;
  margin: 2px 0 4px 0 !important;
  border: none !important;
}

#setup-menu .nav-second-level li,
.admin #setup-menu .nav-second-level li {
  background: transparent !important;
  background-color: transparent !important;
  padding: 0 !important;
  margin: 1px 0 !important;
}

#setup-menu .nav-second-level li a,
.admin #setup-menu .nav-second-level li a {
  background: transparent !important;
  background-color: transparent !important;
  color: #C8C2F2 !important;
  -webkit-text-fill-color: #C8C2F2 !important;
  font-size: 13px !important;
  padding: 8px 14px 8px 36px !important;
  margin: 2px 8px !important;
  border-radius: var(--crm-radius-md) !important;
  display: flex !important;
  align-items: center !important;
  transition: all 0.18s ease !important;
}

#setup-menu .nav-second-level li a:hover,
.admin #setup-menu .nav-second-level li a:hover,
body #setup-menu .nav-second-level li a:hover {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: rgba(255, 255, 255, 0.15) !important;
  transform: translateX(3px) !important;
}

#setup-menu .nav-second-level li.active a,
.admin #setup-menu .nav-second-level li.active a,
body #setup-menu li .nav-second-level li.active a {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: rgba(255, 255, 255, 0.22) !important;
  font-weight: 600 !important;
}

#setup-menu-wrapper::-webkit-scrollbar {
  width: 5px !important;
  background-color: transparent !important;
}

#setup-menu-wrapper::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.2) !important;
  border-radius: 4px !important;
}

/* --------------------------------------------------------------------------
   5. TOP NAVIGATION HEADER (#header)
   -------------------------------------------------------------------------- */
#header {
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  height: 64px !important;
  border-bottom: 1px solid var(--crm-border) !important;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.03) !important;
  position: relative !important;
  z-index: 99 !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 20px 0 16px !important;
}

body:not(.hide-sidebar) #header {
  margin-left: 235px !important;
}

/* Hide-menu toggle icon */
#header .hide-menu {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 38px !important;
  width: 38px !important;
  margin: 0 10px 0 0 !important;
  cursor: pointer !important;
  border-radius: var(--crm-radius-md) !important;
  color: var(--crm-text-body) !important;
  transition: all 0.18s ease !important;
}

#header .hide-menu:hover {
  background: var(--crm-bg-subtle) !important;
  color: var(--crm-primary) !important;
}

/* Main Nav Container inside Header */
#header nav {
  flex: 1 1 auto !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
}

#header nav > .tw-flex {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

#header nav > .tw-flex > div:first-child {
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
  gap: 10px !important;
}

/* Top Search Bar & Magnifying Glass Center Alignment */
#top_search {
  display: inline-flex !important;
  align-items: center !important;
  position: relative !important;
  margin: 0 !important;
}

#header #search_input {
  margin: 0 !important;
  height: 38px !important;
  line-height: 38px !important;
  padding: 0 38px 0 16px !important;
  background: var(--crm-bg-subtle) !important;
  border: 1px solid var(--crm-border) !important;
  border-radius: var(--crm-radius-pill) !important;
  font-size: 13px !important;
  color: var(--crm-text-heading) !important;
  min-width: 260px !important;
  box-shadow: none !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#header #search_input:focus {
  background: #ffffff !important;
  border-color: var(--crm-primary) !important;
  box-shadow: 0 0 0 3px var(--crm-primary-light), 0 4px 12px rgba(0, 0, 0, 0.05) !important;
  min-width: 300px !important;
  outline: none !important;
}

#top_search_button {
  position: absolute !important;
  right: 6px !important;
  left: auto !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
  height: 28px !important;
  width: 28px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#top_search_button button {
  height: 28px !important;
  width: 28px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
}

#top_search_button button i {
  font-size: 15px !important;
  line-height: 1 !important;
  color: var(--crm-primary) !important;
}

/* Navbar Flex Lists (Left and Right) */
#header .navbar-nav {
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  gap: 4px !important;
}

#header .navbar-nav > li {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  position: relative !important;
}

#header .navbar-nav > li > a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  padding: 0 6px !important;
  margin: 0 !important;
  border-radius: var(--crm-radius-md) !important;
  color: var(--crm-text-body) !important;
  text-decoration: none !important;
  transition: all 0.18s ease !important;
  position: relative !important;
}

#header .navbar-nav > li > a:hover,
#header .navbar-nav > li.open > a {
  background: var(--crm-bg-subtle) !important;
  color: var(--crm-text-heading) !important;
}

/* Quick Create Button (+) */
#header .navbar-nav .tw-rounded-full {
  width: 32px !important;
  height: 32px !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #2563eb !important;
  color: #ffffff !important;
  box-shadow: 0 1px 3px rgba(37, 99, 235, 0.3) !important;
  transition: background 0.18s ease !important;
}

#header .navbar-nav .tw-rounded-full:hover {
  background: #1d4ed8 !important;
}

#header .navbar-nav .tw-rounded-full i {
  color: #ffffff !important;
  font-size: 14px !important;
  line-height: 1 !important;
}

/* Standalone Header Icons (Newsfeed & Todo) */
#header .header-newsfeed > a,
#header .header-todo > a {
  width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: var(--crm-radius-md) !important;
}

/* User Profile Avatar - Neutralize Margin-Top & Center */
#header .header-user-profile > a {
  padding: 0 4px !important;
  height: 38px !important;
  min-height: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
}

#header .header-user-profile img.staff-profile-image-small,
#header .staff-profile-image-small {
  margin: 0 !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  display: block !important;
  vertical-align: middle !important;
}

/* Timer and Notification Buttons - Neutralize Negative Margin & Uniform Box Styling */
#header .header-timers > a,
#header .header-notifications > a {
  padding: 0 !important;
  height: 38px !important;
  min-height: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  position: relative !important;
}

#header .header-timers a > span:first-child,
#header .header-notifications a > span:first-child,
#header .header-timers .tw-rounded-md,
#header .header-notifications [class*="tw-rounded-md"] {
  margin: 0 !important;
  width: 36px !important;
  height: 36px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 8px !important;
  border: 1px solid var(--crm-border) !important;
  background: #ffffff !important;
  transition: all 0.18s ease !important;
}

#header .header-timers a:hover > span:first-child,
#header .header-notifications a:hover > span:first-child {
  border-color: var(--crm-primary-light) !important;
  background: var(--crm-bg-subtle) !important;
}

/* Header SVGs Uniform Stroke, Size, and Color */
#header svg,
.navbar-nav svg,
.top-timers svg,
.notifications-icon svg,
#header .header-timers svg,
#header .header-notifications svg {
  display: inline-block !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  stroke: #1F1A56 !important;
  stroke-width: 1.8px !important;
  color: #1F1A56 !important;
  vertical-align: middle !important;
  visibility: visible !important;
  opacity: 1 !important;
  margin: 0 !important;
}

/* Badge Indicators for Todos, Timers, Notifications */
#header .navbar-nav .icon-started-timers,
#header .navbar-nav .icon-notifications,
#header .navbar-nav .nav-total-todos {
  position: absolute !important;
  top: -2px !important;
  right: -2px !important;
  min-width: 18px !important;
  height: 18px !important;
  padding: 0 4px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  line-height: 18px !important;
  text-align: center !important;
  border-radius: var(--crm-radius-pill) !important;
  border: 2px solid #ffffff !important;
  z-index: 10 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Neutralize any lingering Tailwind negative/positive margins inside Header */
#header [class*="-tw-mt-"],
#header [class*="tw-mt-"] {
  margin-top: 0 !important;
}

/* Dropdown Menus from Top Header */
.navbar-nav > li > .dropdown-menu {
  background: #ffffff !important;
  border: 1px solid var(--crm-border) !important;
  border-radius: var(--crm-radius-lg) !important;
  box-shadow: var(--crm-shadow-lg) !important;
  padding: 8px !important;
  margin-top: 8px !important;
}

.navbar-nav > li > .dropdown-menu > li > a {
  color: var(--crm-text-body) !important;
  padding: 8px 14px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  border-radius: var(--crm-radius-sm) !important;
  transition: all 0.15s ease !important;
}

.navbar-nav > li > .dropdown-menu > li > a:hover {
  background: var(--crm-bg-subtle) !important;
  color: var(--crm-text-heading) !important;
}

.navbar-nav > li > .dropdown-menu.notifications {
  width: 360px !important;
  border-radius: var(--crm-radius-lg) !important;
  box-shadow: var(--crm-shadow-xl) !important;
}

/* --------------------------------------------------------------------------
   6. PANELS, CARDS & DASHBOARD WIDGETS (.panel_s, .panel-body)
   -------------------------------------------------------------------------- */
.panel_s {
  background: var(--crm-bg-surface) !important;
  border: 1px solid var(--crm-border) !important;
  border-radius: var(--crm-radius-lg) !important;
  box-shadow: var(--crm-shadow-sm) !important;
  margin-bottom: 24px !important;
  transition: box-shadow 0.2s ease, border-color 0.2s ease !important;
  overflow: visible !important;
}

.panel_s:hover {
  box-shadow: var(--crm-shadow-md) !important;
  border-color: var(--crm-border-strong) !important;
}

.panel_s > .panel-body,
.dashboard .panel_s > .panel-body,
.dashboard .panel-body,
.finance-summary .panel-body {
  padding: 20px 24px !important;
  background: transparent !important;
  border-radius: inherit !important;
}

/* Eliminate negative top margins that cause text and icons to be cut off at the top */
.finance-summary .-tw-mt-2,
.finance-summary .\-tw-mt-2,
.finance-summary [class*="-tw-mt-2"],
.home-summary .-tw-mt-2,
.home-summary .\-tw-mt-2,
.home-summary [class*="-tw-mt-2"],
.panel-body .-tw-mt-2,
.panel-body .\-tw-mt-2,
.panel-body [class*="-tw-mt-2"],
.panel_s .-tw-mt-2,
.panel_s .\-tw-mt-2,
.panel_s [class*="-tw-mt-2"] {
  margin-top: 4px !important;
}

.home-summary p.tw-inline-flex,
.finance-summary p.tw-inline-flex {
  align-items: center !important;
  line-height: 1.4 !important;
  padding-top: 2px !important;
}

.panel_s,
.panel-body,
.finance-summary,
.home-summary {
  overflow: visible !important;
}

.panel_s > .panel-heading {
  background: #ffffff !important;
  border-bottom: 1px solid var(--crm-border-subtle) !important;
  padding: 16px 24px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--crm-text-heading) !important;
  border-top-left-radius: var(--crm-radius-lg) !important;
  border-top-right-radius: var(--crm-radius-lg) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

/* Prevent double/multiple borders on nested dashboard panels & stat widgets */
.panel_s .panel_s,
.panel_s .top_stats_wrapper,
.panel_s > .panel-body > .panel_s,
.widget .panel_s,
.widget .panel_s .panel_s {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Column wrappers around stats - NO BORDERS OR SHADOWS */
[class*="quick-stats-"],
.quick-stats-invoices,
.quick-stats-leads,
.quick-stats-projects,
.quick-stats-tasks,
.quick-stats-income,
.quick-stats-expenses,
.quick-stats-assets,
.quick-stats-attendance,
.quick-stats-selfservice,
.widget-dragger {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* Dashboard Quick Stats Card (Single Clean Card Border) */
.top_stats_wrapper {
  background: var(--crm-bg-surface) !important;
  border: 1px solid var(--crm-border) !important;
  border-radius: var(--crm-radius-lg) !important;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.04) !important;
  padding: 16px 18px !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
}

.top_stats_wrapper:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 14px -2px rgba(0, 0, 0, 0.08) !important;
  border-color: var(--crm-border-strong) !important;
}

/* Widget Drag Handle - Left-Aligned with Balanced Left and Right Margins */
.widget-dragger {
  position: absolute !important;
  top: 1px !important;
  left: 10px !important;
  right: auto !important;
  color: #94a3b8 !important;
  font-size: 14px !important;
  cursor: grab !important;
  z-index: 5 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 16px !important;
  height: 24px !important;
  border-radius: 4px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  opacity: 0.6 !important;
  transition: opacity 0.2s ease, color 0.2s ease, background-color 0.2s ease !important;
}

/* Generous right margin between drag handle and title text */
.widget-dragger + .row h4,
.widget-dragger + .row .col-md-12 h4,
.widget-dragger + .row .tw-font-semibold,
.widget > .row:first-of-type h4,
.widget > .row:first-of-type .tw-font-semibold,
.panel-body > .widget-dragger + *,
.panel-body > .widget-dragger + .row,
.panel-body > .widget-dragger + p {
  padding-left: 38px !important;
}

.widget:hover .widget-dragger,
.panel_s:hover .widget-dragger {
  opacity: 1 !important;
}

.widget-dragger:hover {
  color: var(--crm-primary) !important;
  background: rgba(31, 26, 86, 0.08) !important;
  cursor: grab !important;
}

.widget-dragger:active {
  cursor: grabbing !important;
}

[dir="rtl"] .widget-dragger {
  left: auto !important;
  right: 10px !important;
}

[dir="rtl"] .widget-dragger + .row h4,
[dir="rtl"] .widget-dragger + .row .col-md-12 h4,
[dir="rtl"] .widget-dragger + .row .tw-font-semibold,
[dir="rtl"] .widget > .row:first-of-type h4,
[dir="rtl"] .panel-body > .widget-dragger + *,
[dir="rtl"] .panel-body > .widget-dragger + .row,
[dir="rtl"] .panel-body > .widget-dragger + p {
  padding-left: 0 !important;
  padding-right: 38px !important;
}

/* Calendar Widget Specific Drag Handle (Integrated inside header) */
.finance-col-header .widget-dragger {
  position: static !important;
  width: 22px !important;
  height: 32px !important;
  border-radius: 6px !important;
  margin-right: 4px !important;
  flex-shrink: 0 !important;
  opacity: 0.85 !important;
  color: #475569 !important;
  font-size: 15px !important;
  cursor: grab !important;
  transition: all 0.15s ease !important;
}

.finance-col-header .widget-dragger > i {
  font-size: 15px !important;
  line-height: 1 !important;
  color: inherit !important;
}

.finance-col-header:hover .widget-dragger,
.finance-col-header .widget-dragger:hover {
  background: #f1f5f9 !important;
  color: #0f172a !important;
  opacity: 1 !important;
}

.finance-col-header .widget-dragger:active {
  cursor: grabbing !important;
  background: #e2e8f0 !important;
  color: #0f172a !important;
}

[dir="rtl"] .finance-col-header .widget-dragger {
  margin-right: 0 !important;
  margin-left: 4px !important;
}

/* Stat Numbers & Metric Typography */
.top_stats_wrapper .bold,
.quick-stats-invoices .bold,
.text-has-action.total_leads,
.widget-dragger .bold {
  font-size: 22px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: var(--crm-text-heading) !important;
}

/* Metric Subtext & Progress bars */
.top_stats_wrapper .progress,
.panel_s .progress {
  height: 6px !important;
  border-radius: var(--crm-radius-pill) !important;
  background-color: var(--crm-bg-subtle) !important;
  box-shadow: none !important;
  margin-top: 10px !important;
  margin-bottom: 6px !important;
  overflow: hidden !important;
}

.progress-bar-primary {
  background: var(--crm-primary-gradient) !important;
}
.progress-bar-success {
  background: linear-gradient(135deg, #10b981 0%, #34d399 100%) !important;
}
.progress-bar-warning {
  background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%) !important;
}
.progress-bar-danger {
  background: linear-gradient(135deg, #ef4444 0%, #f87171 100%) !important;
}
.progress-bar-info {
  background: linear-gradient(135deg, #0ea5e9 0%, #38bdf8 100%) !important;
}

/* --------------------------------------------------------------------------
   7. DATATABLES & MODERN DATA GRIDS
   -------------------------------------------------------------------------- */
.dataTables_wrapper {
  padding-top: 6px !important;
}

table.dataTable,
table.table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  width: 100% !important;
  margin-top: 12px !important;
  margin-bottom: 16px !important;
  border-radius: var(--crm-radius-md) !important;
  overflow: hidden !important;
  border: 1px solid var(--crm-border) !important;
}

/* Table Header */
table.dataTable thead th,
table.table thead th {
  background: var(--crm-bg-canvas) !important;
  color: var(--crm-text-muted) !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  padding: 12px 16px !important;
  border-top: none !important;
  border-bottom: 1px solid var(--crm-border) !important;
  vertical-align: middle !important;
}

/* Table Body Rows */
table.dataTable tbody td,
table.table tbody td {
  padding: 13px 16px !important;
  font-size: 13.5px !important;
  color: var(--crm-text-body) !important;
  border-top: 1px solid var(--crm-border-subtle) !important;
  border-bottom: none !important;
  vertical-align: middle !important;
  transition: background-color 0.12s ease !important;
}

table.dataTable tbody tr:hover td,
table.table tbody tr:hover td {
  background-color: #f8fafc !important;
}

table.dataTable tbody tr:last-child td,
table.table tbody tr:last-child td {
  border-bottom: none !important;
}

/* Table Checkbox Column */
table.dataTable th:first-child,
table.dataTable td:first-child {
  padding-left: 18px !important;
}

/* DataTables Toolbar Controls (Length Selector, Export, Reload, and Filter) */
div.dataTables_wrapper .dataTables_length,
div.dataTables_wrapper .dt-buttons {
  display: inline-flex !important;
  align-items: center !important;
  vertical-align: middle !important;
  margin-bottom: 12px !important;
}

div.dataTables_wrapper .dt-buttons {
  margin-left: 8px !important;
  gap: 6px !important;
}

/* 1. Length Selector Dropdown ("25" selector) */
div.dataTables_wrapper .dataTables_length label {
  margin-bottom: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
}

div.dataTables_wrapper .dataTables_length .bootstrap-select,
div.dataTables_wrapper div.dataTables_length div.bootstrap-select {
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

div.dataTables_wrapper .dataTables_length .bootstrap-select > button.dropdown-toggle,
div.dataTables_wrapper .dataTables_length .bootstrap-select > button.btn-default,
div.dataTables_wrapper .dataTables_length select {
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  line-height: 32px !important;
  padding: 0 10px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--crm-text-heading) !important;
  background-color: #ffffff !important;
  border: 1px solid var(--crm-border) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.18s ease !important;
}

div.dataTables_wrapper .dataTables_length .bootstrap-select > button.dropdown-toggle:hover,
div.dataTables_wrapper .dataTables_length .bootstrap-select.open > button.dropdown-toggle {
  border-color: var(--crm-border-strong) !important;
  background-color: var(--crm-bg-subtle) !important;
}

/* 2. Table Action Buttons ("Export", Print, etc.) */
div.dataTables_wrapper .dt-buttons .btn,
div.dataTables_wrapper .dt-buttons.btn-group .btn,
div.dataTables_wrapper .btn-default-dt-options,
div.dataTables_wrapper .dt-button {
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  line-height: 32px !important;
  padding: 0 14px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--crm-text-heading) !important;
  background: #ffffff !important;
  border: 1px solid var(--crm-border) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  float: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.18s ease !important;
  margin: 0 !important;
}

div.dataTables_wrapper .dt-buttons .btn:hover,
div.dataTables_wrapper .dt-buttons.btn-group .btn:hover,
div.dataTables_wrapper .btn-default-dt-options:hover,
div.dataTables_wrapper .dt-button:hover {
  background: var(--crm-bg-subtle) !important;
  color: var(--crm-text-heading) !important;
  border-color: var(--crm-border-strong) !important;
  transform: none !important;
}

/* 3. Reload Icon Button */
div.dataTables_wrapper .dt-buttons .btn-dt-reload,
div.dataTables_wrapper .btn-default-dt-options.btn-dt-reload {
  width: 34px !important;
  min-width: 34px !important;
  max-width: 34px !important;
  padding: 0 !important;
}

div.dataTables_wrapper .dt-buttons .btn-dt-reload i,
div.dataTables_wrapper .btn-default-dt-options.btn-dt-reload i {
  font-size: 13px !important;
  line-height: 1 !important;
  color: var(--crm-text-body) !important;
  transition: transform 0.25s ease !important;
}

div.dataTables_wrapper .dt-buttons .btn-dt-reload:hover i,
div.dataTables_wrapper .btn-default-dt-options.btn-dt-reload:hover i {
  transform: rotate(180deg) !important;
  color: var(--crm-primary) !important;
}

/* 4. Search Filter Box - Unified 34px Height & Seamless Input Group */
div.dataTables_wrapper .dataTables_filter {
  margin-bottom: 12px !important;
}

div.dataTables_wrapper .dataTables_filter label {
  margin-bottom: 0 !important;
  font-weight: normal !important;
}

div.dataTables_wrapper .dataTables_filter .input-group {
  display: inline-flex !important;
  align-items: center !important;
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  border: 1px solid var(--crm-border) !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  overflow: hidden !important;
  box-shadow: none !important;
  transition: border-color 0.18s ease, box-shadow 0.18s ease !important;
}

div.dataTables_wrapper .dataTables_filter .input-group:focus-within {
  border-color: var(--crm-primary) !important;
  box-shadow: 0 0 0 3px var(--crm-primary-light) !important;
}

div.dataTables_wrapper .dataTables_filter .input-group-addon {
  height: 32px !important;
  line-height: 32px !important;
  padding: 0 0 0 10px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--crm-text-muted) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

div.dataTables_wrapper .dataTables_filter .input-group-addon i {
  font-size: 13px !important;
  color: var(--crm-text-muted) !important;
}

div.dataTables_wrapper .dataTables_filter input.form-control,
div.dataTables_wrapper .dataTables_filter input[type="search"] {
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  line-height: 32px !important;
  padding: 0 12px 0 8px !important;
  font-size: 13px !important;
  color: var(--crm-text-heading) !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  width: 180px !important;
  margin: 0 !important;
}

div.dataTables_wrapper .dataTables_filter input:focus {
  box-shadow: none !important;
  border: none !important;
  outline: none !important;
}

/* DataTables Pagination */
.dataTables_paginate .pagination,
.pagination {
  margin: 12px 0 4px !important;
  display: inline-flex !important;
  border-radius: var(--crm-radius-md) !important;
  gap: 4px !important;
}

.pagination > li > a,
.pagination > li > span {
  color: var(--crm-text-body) !important;
  background: #ffffff !important;
  border: 1px solid var(--crm-border) !important;
  border-radius: var(--crm-radius-md) !important;
  padding: 6px 12px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  transition: all 0.15s ease !important;
  margin: 0 !important;
}

.pagination > li > a:hover,
.pagination > li > span:hover {
  background: var(--crm-bg-subtle) !important;
  color: var(--crm-text-heading) !important;
  border-color: var(--crm-border-strong) !important;
}

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover {
  background: var(--crm-primary-gradient) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  box-shadow: 0 2px 8px var(--crm-primary-glow) !important;
  font-weight: 600 !important;
}

.pagination > .disabled > a,
.pagination > .disabled > span {
  opacity: 0.45 !important;
  background: #ffffff !important;
  border-color: var(--crm-border-subtle) !important;
}

/* DataTables Info Text */
.dataTables_info {
  color: var(--crm-text-muted) !important;
  font-size: 12.5px !important;
  padding-top: 16px !important;
}

/* --------------------------------------------------------------------------
   8. MODERN STATUS BADGES & PILLS (.label, .badge)
   -------------------------------------------------------------------------- */
.label, .badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 600 !important;
  font-size: 11.5px !important;
  line-height: 1 !important;
  padding: 4px 10px !important;
  border-radius: var(--crm-radius-pill) !important;
  text-transform: capitalize !important;
  letter-spacing: 0.01em !important;
  border: 1px solid transparent !important;
}

/* Status Variations */
.label-default {
  background: var(--crm-bg-subtle) !important;
  color: var(--crm-text-muted) !important;
  border-color: var(--crm-border) !important;
}

.label-success,
.label.bg-success {
  background: var(--crm-success-light) !important;
  color: var(--crm-success-text) !important;
  border-color: rgba(16, 185, 129, 0.25) !important;
}

.label-warning,
.label.bg-warning {
  background: var(--crm-warning-light) !important;
  color: var(--crm-warning-text) !important;
  border-color: rgba(245, 158, 11, 0.25) !important;
}

.label-danger,
.label.bg-danger {
  background: var(--crm-danger-light) !important;
  color: var(--crm-danger-text) !important;
  border-color: rgba(239, 68, 68, 0.25) !important;
}

.label-info,
.label.bg-info {
  background: var(--crm-info-light) !important;
  color: var(--crm-info-text) !important;
  border-color: rgba(14, 165, 233, 0.25) !important;
}

.label-primary,
.label.bg-primary {
  background: var(--crm-primary-light) !important;
  color: var(--crm-primary) !important;
  border-color: rgba(31, 26, 86, 0.25) !important;
}

/* --------------------------------------------------------------------------
   9. BUTTONS (.btn)
   -------------------------------------------------------------------------- */
.btn {
  font-family: var(--crm-font) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 16px !important;
  border-radius: var(--crm-radius-md) !important;
  border: 1px solid transparent !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: var(--crm-shadow-xs) !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
}

.btn:active {
  transform: translateY(1px) !important;
}

/* Primary Button */
.btn-primary,
.btn-info {
  background: var(--crm-primary-gradient) !important;
  color: #ffffff !important;
  border: 1px solid transparent !important;
  box-shadow: 0 2px 6px var(--crm-primary-glow) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-info:hover,
.btn-info:focus {
  background: var(--crm-primary-gradient-hover) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px var(--crm-primary-glow) !important;
  transform: translateY(-1px) !important;
}

/* Default / Secondary Button */
.btn-default {
  background: #ffffff !important;
  color: var(--crm-text-body) !important;
  border: 1px solid var(--crm-border) !important;
}

.btn-default:hover,
.btn-default:focus {
  background: var(--crm-bg-subtle) !important;
  color: var(--crm-text-heading) !important;
  border-color: var(--crm-border-strong) !important;
  transform: translateY(-1px) !important;
}

/* Success Button */
.btn-success {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  color: #ffffff !important;
  border: 1px solid transparent !important;
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.25) !important;
}

.btn-success:hover,
.btn-success:focus {
  background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.35) !important;
  transform: translateY(-1px) !important;
}

/* Danger Button */
.btn-danger {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
  color: #ffffff !important;
  border: 1px solid transparent !important;
  box-shadow: 0 2px 6px rgba(239, 68, 68, 0.25) !important;
}

.btn-danger:hover,
.btn-danger:focus {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.35) !important;
  transform: translateY(-1px) !important;
}

/* Small & Extra Small Buttons */
.btn-sm, .btn-group-sm > .btn {
  height: 30px !important;
  min-height: 30px !important;
  padding: 4px 10px !important;
  font-size: 12.5px !important;
  border-radius: var(--crm-radius-sm) !important;
}

.btn-xs, .btn-group-xs > .btn {
  height: 26px !important;
  min-height: 26px !important;
  padding: 2px 8px !important;
  font-size: 11.5px !important;
  border-radius: var(--crm-radius-xs) !important;
}

/* Button Icon Spacing */
.btn i {
  font-size: 13px !important;
}

/* --------------------------------------------------------------------------
   10. FORM INPUTS, CONTROLS & VALIDATION (.form-control, select, textarea)
   -------------------------------------------------------------------------- */
.form-control,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
select.form-control,
textarea.form-control {
  background-color: #ffffff !important;
  border: 1px solid var(--crm-border) !important;
  border-radius: var(--crm-radius-md) !important;
  color: var(--crm-text-heading) !important;
  font-size: 13.5px !important;
  box-shadow: none !important;
  outline: none !important;
  box-sizing: border-box !important;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease !important;
}

/* Standardized 38px Height for Single-line Inputs & Selects */
.form-control:not(textarea),
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
select.form-control {
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  padding: 6px 12px !important;
  line-height: 1.42857143 !important;
}

/* Dedicated Normalization for Date & Time Inputs (Fixes WebKit padding & height inflation) */
input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="month"],
input[type="week"] {
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  padding: 5px 12px !important;
  line-height: 24px !important;
}

input[type="date"]::-webkit-datetime-edit,
input[type="datetime-local"]::-webkit-datetime-edit,
input[type="time"]::-webkit-datetime-edit,
input[type="month"]::-webkit-datetime-edit,
input[type="week"]::-webkit-datetime-edit {
  padding: 0 !important;
  line-height: 1.4 !important;
}

input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator,
input[type="week"]::-webkit-calendar-picker-indicator {
  cursor: pointer !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 15px !important;
  opacity: 0.65 !important;
  transition: opacity 0.15s ease !important;
}

input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover,
input[type="time"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1 !important;
}

/* Textareas retain natural multi-line height */
textarea.form-control {
  height: auto !important;
  min-height: 80px !important;
  padding: 8px 12px !important;
  line-height: 1.5 !important;
}

/* Small Form Controls (.input-sm, compact table inputs) */
.form-control.input-sm,
input.input-sm,
select.input-sm,
.input-group-sm > .form-control,
.input-group-sm > .input-group-addon,
.input-group-sm > .input-group-btn > .btn {
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  padding: 4px 10px !important;
  font-size: 13px !important;
  border-radius: 8px !important;
  line-height: 24px !important;
}

.form-control:focus,
input:focus,
select:focus,
textarea:focus {
  background-color: #ffffff !important;
  border-color: var(--crm-primary) !important;
  box-shadow: 0 0 0 3px var(--crm-primary-light) !important;
  outline: none !important;
}

.form-control::placeholder,
input::placeholder,
textarea::placeholder {
  color: var(--crm-text-subtle) !important;
  opacity: 0.85 !important;
}

.control-label {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--crm-text-heading) !important;
  margin-bottom: 6px !important;
}

/* Form Validation Errors & Inline Help Text */
.has-error .form-control,
.has-error select,
.has-error textarea,
.has-error .bootstrap-select > .dropdown-toggle {
  border-color: var(--crm-danger) !important;
  background-color: #fffbfa !important;
  box-shadow: 0 0 0 3px var(--crm-danger-light) !important;
}

.has-error .help-block,
.has-error p.text-danger,
label.error {
  color: var(--crm-danger-text) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  margin-top: 5px !important;
  display: block !important;
}

/* Ensure required field asterisks (*) and inline danger text in labels stay strictly inline */
label .text-danger,
label span.text-danger,
label .req,
label small.req,
.control-label .text-danger,
.control-label span.text-danger,
.control-label .req,
.control-label small.req {
  display: inline !important;
  margin: 0 0 0 3px !important;
  padding: 0 !important;
  font-size: inherit !important;
  line-height: inherit !important;
  color: var(--crm-danger) !important;
  vertical-align: baseline !important;
}

/* Input Groups (Clean Single Border) */
.input-group,
.form-group .input-group {
  border: none !important;
  box-shadow: none !important;
}

.input-group .form-control {
  border-radius: 0 !important;
  box-shadow: none !important;
  border: 1px solid var(--crm-border) !important;
}

.input-group .form-control:first-child,
.input-group-addon:first-child {
  border-top-left-radius: var(--crm-radius-md) !important;
  border-bottom-left-radius: var(--crm-radius-md) !important;
}

.input-group .form-control:last-child,
.input-group-addon:last-child {
  border-top-right-radius: var(--crm-radius-md) !important;
  border-bottom-right-radius: var(--crm-radius-md) !important;
}

.input-group-addon {
  background: var(--crm-bg-canvas) !important;
  border: 1px solid var(--crm-border) !important;
  box-shadow: none !important;
  color: var(--crm-text-muted) !important;
  font-size: 13px !important;
  padding: 8px 12px !important;
}

.input-group > .input-group-addon + .form-control {
  border-left: 0 !important;
}

.input-group > .form-control + .input-group-addon {
  border-left: 0 !important;
}

/* Bootstrap Selectpicker (Eliminate Outer Container Border) */
div.bootstrap-select,
div.bootstrap-select.form-control,
.select-placeholder .bootstrap-select,
.bootstrap-select.btn-group {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;
}

/* Single Clean Border on the Select Button */
div.bootstrap-select > button.dropdown-toggle,
div.bootstrap-select > button.btn-default,
.bootstrap-select > .dropdown-toggle {
  background-color: #ffffff !important;
  border: 1px solid var(--crm-border) !important;
  border-radius: var(--crm-radius-md) !important;
  padding: 8px 12px !important;
  font-size: 13.5px !important;
  color: var(--crm-text-heading) !important;
  box-shadow: none !important;
  outline: none !important;
  width: 100% !important;
  height: auto !important;
  min-height: 38px !important;
}

/* Compact / Small Select Buttons (.input-sm, .dataTables_length) */
div.bootstrap-select.input-sm > button.dropdown-toggle,
div.dataTables_length div.bootstrap-select > button.dropdown-toggle,
div.dataTables_wrapper div.bootstrap-select > button.dropdown-toggle,
div.dataTables_length div.bootstrap-select > button.btn-default {
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  line-height: 32px !important;
  padding: 0 10px !important;
  font-size: 13px !important;
  border-radius: 8px !important;
}

div.bootstrap-select.open > button.dropdown-toggle,
div.bootstrap-select > button.dropdown-toggle:focus,
.bootstrap-select > .dropdown-toggle:focus,
.bootstrap-select.open > .dropdown-toggle {
  border-color: var(--crm-primary) !important;
  box-shadow: 0 0 0 3px var(--crm-primary-light) !important;
  outline: none !important;
}

/* When inside input-group */
.input-group > div.bootstrap-select {
  border: none !important;
  box-shadow: none !important;
}

.input-group > div.bootstrap-select:not(:first-child) > button.dropdown-toggle {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-left: 0 !important;
}

/* Outer Dropdown Menu Card (Only the direct child container) */
div.bootstrap-select > .dropdown-menu,
.bootstrap-select > .dropdown-menu {
  border: 1px solid var(--crm-border) !important;
  border-radius: var(--crm-radius-lg) !important;
  box-shadow: var(--crm-shadow-lg) !important;
  padding: 6px !important;
  background: #ffffff !important;
}

/* Inner List Containers - Absolutely No Duplicate Borders or Inset Shadows */
.bootstrap-select .dropdown-menu.inner,
.bootstrap-select .dropdown-menu .inner,
.bootstrap-select ul.dropdown-menu.inner,
.bootstrap-select ul.inner,
.bootstrap-select div.inner,
.bootstrap-select .inner {
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  outline: none !important;
}

.bootstrap-select .dropdown-menu li {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  margin: 1px 0 !important;
}

.bootstrap-select .dropdown-menu li a {
  border: none !important;
  box-shadow: none !important;
  border-radius: var(--crm-radius-sm) !important;
  padding: 7px 12px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--crm-text-body) !important;
  transition: all 0.15s ease !important;
}

.bootstrap-select .dropdown-menu li a:hover,
.bootstrap-select .dropdown-menu li a:focus {
  background: var(--crm-bg-subtle) !important;
  color: var(--crm-text-heading) !important;
}

.bootstrap-select .dropdown-menu li.selected a,
.bootstrap-select .dropdown-menu li.active a {
  background: var(--crm-primary-light) !important;
  color: var(--crm-primary) !important;
  font-weight: 600 !important;
}

/* --------------------------------------------------------------------------
   11. KANBAN BOARDS & PIPELINES (#kan-ban, .kan-ban-col)
   -------------------------------------------------------------------------- */
.kan-ban-wrapper {
  padding-bottom: 20px !important;
}

.kan-ban-col {
  background: var(--crm-bg-subtle) !important;
  border: 1px solid var(--crm-border) !important;
  border-radius: var(--crm-radius-lg) !important;
  padding: 12px !important;
  margin-right: 14px !important;
  box-shadow: var(--crm-shadow-xs) !important;
}

.kan-ban-col .panel-heading-bg {
  background: transparent !important;
  border-bottom: 1px solid var(--crm-border) !important;
  padding: 8px 4px 12px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--crm-text-heading) !important;
}

.kan-ban-content {
  background: transparent !important;
  padding: 4px 0 !important;
}

.kan-ban-body .panel_s {
  background: #ffffff !important;
  border: 1px solid var(--crm-border) !important;
  border-radius: var(--crm-radius-md) !important;
  box-shadow: var(--crm-shadow-sm) !important;
  margin-bottom: 10px !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease !important;
}

.kan-ban-body .panel_s:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--crm-shadow-md) !important;
  border-color: var(--crm-border-strong) !important;
}

#kan-ban .panel-body {
  padding: 14px 16px !important;
}

/* --------------------------------------------------------------------------
   12. INVOICE, ESTIMATE & PROPOSAL PREVIEWS (.invoice-project, etc.)
   -------------------------------------------------------------------------- */
.invoice-top,
.proposal-top,
.estimate-top {
  border-bottom: 1px solid var(--crm-border-subtle) !important;
  padding-bottom: 20px !important;
  margin-bottom: 24px !important;
}

.invoice-preview-card,
.estimate-preview-card,
.proposal-preview-card {
  background: #ffffff !important;
  border: 1px solid var(--crm-border) !important;
  border-radius: var(--crm-radius-lg) !important;
  box-shadow: var(--crm-shadow-md) !important;
  padding: 30px !important;
}

/* --------------------------------------------------------------------------
   13. MODALS & POPUPS (.modal-content, .modal-header)
   -------------------------------------------------------------------------- */
.modal-backdrop {
  background-color: #120F35 !important;
  opacity: 0.55 !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}

.modal-content {
  border: 1px solid var(--crm-border) !important;
  border-radius: var(--crm-radius-xl) !important;
  box-shadow: var(--crm-shadow-xl) !important;
  overflow: hidden !important;
}

.modal-header {
  background: #ffffff !important;
  border-bottom: 1px solid var(--crm-border-subtle) !important;
  padding: 18px 24px !important;
  position: relative !important;
}

.modal-header:before,
.modal-header:after,
.modal-footer:before,
.modal-footer:after {
  display: none !important;
}

.modal-title {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--crm-text-heading) !important;
}

/* Universal Modal Close Button (Fix white on white across all modals) */
body .modal-header .close,
body .modal-header button.close,
body .modal-content .close,
body .modal-content button.close,
body .modal-dialog button.close,
body .modal-dialog button.close[data-dismiss="modal"],
body .modal-dialog a.close[data-dismiss="modal"] {
  color: #64748b !important;
  opacity: 0.75 !important;
  text-shadow: none !important;
  font-size: 26px !important;
  font-weight: 300 !important;
  line-height: 1 !important;
  transition: all 0.15s ease-in-out !important;
  outline: none !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  z-index: 1050 !important;
  cursor: pointer !important;
  margin-top: -2px !important;
}

body .modal-header .close:hover,
body .modal-header .close:focus,
body .modal-header button.close:hover,
body .modal-header button.close:focus,
body .modal-content .close:hover,
body .modal-content .close:focus,
body .modal-content button.close:hover,
body .modal-content button.close:focus,
body .modal-dialog button.close:hover,
body .modal-dialog button.close:focus,
body .modal-dialog button.close[data-dismiss="modal"]:hover,
body .modal-dialog button.close[data-dismiss="modal"]:focus {
  color: #0f172a !important;
  opacity: 1 !important;
  text-decoration: none !important;
  outline: none !important;
}

body .modal-header .close span,
body .modal-header button.close span,
body .modal-content .close span,
body .modal-content button.close span,
body .modal-dialog button.close span,
body .modal-dialog button.close[data-dismiss="modal"] span {
  color: inherit !important;
  text-shadow: none !important;
  font-size: inherit !important;
  line-height: inherit !important;
  position: static !important;
  display: inline-block !important;
}

body .modal-header .close i,
body .modal-header button.close i,
body .modal-content .close i,
body .modal-content button.close i,
body .modal-dialog button.close i {
  color: inherit !important;
  font-size: 16px !important;
  line-height: inherit !important;
}

.modal-body {
  padding: 24px !important;
}

.modal-footer {
  background: var(--crm-bg-canvas) !important;
  border-top: 1px solid var(--crm-border-subtle) !important;
  padding: 14px 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
}

/* --------------------------------------------------------------------------
   14. TABS & NAVS (.nav-tabs, .nav-pills)
   -------------------------------------------------------------------------- */
.nav-tabs {
  border-bottom: 1px solid var(--crm-border) !important;
  margin-bottom: 20px !important;
  gap: 4px !important;
}

.nav-tabs > li > a {
  color: var(--crm-text-muted) !important;
  font-weight: 500 !important;
  font-size: 13.5px !important;
  border: 1px solid transparent !important;
  border-bottom: 2px solid transparent !important;
  border-radius: var(--crm-radius-md) var(--crm-radius-md) 0 0 !important;
  padding: 10px 16px !important;
  margin-right: 0 !important;
  transition: all 0.18s ease !important;
  background: transparent !important;
}

.nav-tabs > li > a:hover {
  color: var(--crm-text-heading) !important;
  background: var(--crm-bg-subtle) !important;
  border-color: transparent !important;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  color: var(--crm-primary) !important;
  background: #ffffff !important;
  border-color: transparent !important;
  border-bottom: 2px solid var(--crm-primary) !important;
  font-weight: 600 !important;
}

/* Nav Pills Modern Capsule */
.nav-pills > li > a {
  border-radius: var(--crm-radius-pill) !important;
  padding: 7px 16px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--crm-text-muted) !important;
}

.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
  background: var(--crm-primary-gradient) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px var(--crm-primary-glow) !important;
}

/* --------------------------------------------------------------------------
   15. ALERTS & CALLOUTS (.alert)
   -------------------------------------------------------------------------- */
.alert {
  border-radius: var(--crm-radius-lg) !important;
  padding: 14px 18px !important;
  font-size: 13.5px !important;
  border: 1px solid !important;
  box-shadow: var(--crm-shadow-xs) !important;
}

.alert-success {
  background-color: var(--crm-success-light) !important;
  border-color: rgba(16, 185, 129, 0.3) !important;
  color: var(--crm-success-text) !important;
}

.alert-info {
  background-color: var(--crm-info-light) !important;
  border-color: rgba(14, 165, 233, 0.3) !important;
  color: var(--crm-info-text) !important;
}

.alert-warning {
  background-color: var(--crm-warning-light) !important;
  border-color: rgba(245, 158, 11, 0.3) !important;
  color: var(--crm-warning-text) !important;
}

.alert-danger {
  background-color: var(--crm-danger-light) !important;
  border-color: rgba(239, 68, 68, 0.3) !important;
  color: var(--crm-danger-text) !important;
}

/* --------------------------------------------------------------------------
   16. AVATARS & PROFILE IMAGES
   -------------------------------------------------------------------------- */
.staff-profile-image-small,
.client-profile-image-small,
.staff-profile-xs-image,
.staff-profile-image-xs {
  border-radius: var(--crm-radius-pill) !important;
  box-shadow: 0 0 0 2px #ffffff, 0 1px 3px rgba(0, 0, 0, 0.1) !important;
  object-fit: cover !important;
}

/* --------------------------------------------------------------------------
   17. AUTHENTICATION & LOGIN SCREENS
   -------------------------------------------------------------------------- */
body.login_admin,
body.customers_login {
  background: radial-gradient(circle at 50% 0%, #2B2476 0%, #120F35 100%) !important;
  min-height: 100vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.authentication-form {
  background: #ffffff !important;
  border: 1px solid var(--crm-border) !important;
  border-radius: var(--crm-radius-xl) !important;
  box-shadow: var(--crm-shadow-xl) !important;
  padding: 36px 32px !important;
  max-width: 440px !important;
  width: 100% !important;
}

.authentication-form h1 {
  font-size: 22px !important;
  font-weight: 700 !important;
  margin-bottom: 24px !important;
  text-align: center !important;
  color: var(--crm-text-heading) !important;
}

.authentication-form .btn-primary {
  width: 100% !important;
  padding: 10px 16px !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  margin-top: 10px !important;
}

/* --------------------------------------------------------------------------
   17b. AUTHENTICATION & LOGIN PAGES (Client & Staff Portals)
   All left hero text, titles, subtitles, and feature cards in white
   -------------------------------------------------------------------------- */
.crm-left,
.adm-left {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Titles and Headings on Dark Login Backgrounds */
.crm-left h1,
.crm-left h2,
.crm-left h3,
.crm-left h4,
.crm-left h5,
.crm-left h6,
.adm-left h1,
.adm-left h2,
.adm-left h3,
.adm-left h4,
.adm-left h5,
.adm-left h6,
.crm-left .crm-title,
.adm-left .adm-title-main,
h1.crm-title,
h1.adm-title-main {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

.crm-left .crm-title,
h1.crm-title {
  font-size: 38px !important;
  line-height: 1.2 !important;
  font-weight: 300 !important;
}

.crm-left .crm-title .highlight {
  font-weight: 700 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

.crm-left .title-underline,
.adm-left .adm-title-underline {
  width: 44px !important;
  height: 4px !important;
  background-color: #38bdf8 !important;
  border-radius: 2px !important;
  margin-bottom: 24px !important;
}

.crm-left .crm-description,
.crm-left p.crm-description,
.adm-left .adm-description,
.adm-left p.adm-description {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  opacity: 0.9 !important;
  font-size: 14.5px !important;
  line-height: 1.65 !important;
}

/* Feature Cards on Left Hero */
.crm-left .feature-box,
.adm-left .adm-feature-box {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 12px !important;
  padding: 13px 15px !important;
}

.crm-left .feature-box .icon-box,
.adm-left .adm-feature-box .icon-box {
  background: rgba(56, 189, 248, 0.18) !important;
  border: 1px solid rgba(56, 189, 248, 0.3) !important;
  color: #38bdf8 !important;
}

.crm-left .feature-content h4,
.crm-left .feature-box h4,
.adm-left .adm-feature-content h4,
.adm-left .adm-feature-box h4 {
  margin: 0 0 4px 0 !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  line-height: 1.3 !important;
}

.crm-left .feature-content p,
.crm-left .feature-box p,
.adm-left .adm-feature-content p,
.adm-left .adm-feature-box p {
  margin: 0 !important;
  font-size: 11.5px !important;
  line-height: 1.45 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  opacity: 0.85 !important;
}

/* Bottom Highlight Cards */
.crm-left .organization-box,
.adm-left .adm-quote-box {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 12px !important;
}

.adm-left .adm-quote-box {
  border-left: 3px solid #38bdf8 !important;
}

.crm-left .organization-box .org-icon,
.adm-left .adm-quote-box .quote-icon {
  background: rgba(56, 189, 248, 0.18) !important;
  color: #38bdf8 !important;
}

.crm-left .org-content h4 {
  margin: 0 0 4px 0 !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

.crm-left .org-content p,
.adm-left .adm-quote-box .quote-text {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  opacity: 0.9 !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
}

.adm-left .adm-quote-box .quote-link {
  color: #38bdf8 !important;
  -webkit-text-fill-color: #38bdf8 !important;
  font-weight: 600 !important;
}

.adm-left .adm-tagline {
  color: #38bdf8 !important;
  -webkit-text-fill-color: #38bdf8 !important;
  font-weight: 600 !important;
}

.adm-left .adm-title,
.adm-left p.adm-title {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  opacity: 0.9 !important;
}

/* Yana Africa Brand (#1F1A56) for Login Controls */
.btn-login,
.adm-btn-login,
button[type="submit"].btn-login,
button[type="submit"].adm-btn-login {
  background: #1F1A56 !important;
  border-color: #1F1A56 !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 14px rgba(31, 26, 86, 0.25) !important;
}

.btn-login:hover,
.adm-btn-login:hover {
  background: #2a2375 !important;
  border-color: #2a2375 !important;
  box-shadow: 0 6px 18px rgba(31, 26, 86, 0.35) !important;
}

.lock-badge-inner,
.adm-lock-inner {
  background: rgba(31, 26, 86, 0.08) !important;
  color: #1F1A56 !important;
}

.lock-badge-outer,
.adm-lock-outer {
  border-color: rgba(31, 26, 86, 0.15) !important;
}

.form-control:focus,
.adm-form-control:focus {
  border-color: #1F1A56 !important;
  box-shadow: 0 0 0 3px rgba(31, 26, 86, 0.12) !important;
}

.forgot-link,
.adm-forgot-link,
.register-text a,
.bottom-text a {
  color: #1F1A56 !important;
  font-weight: 600 !important;
}

/* Password Row & Toggle Button Height Synchronization (46px locked) */
.login-card .form-control,
.adm-login-card .adm-form-control,
.login-card input[type="text"],
.login-card input[type="email"],
.login-card input[type="password"],
.adm-login-card input[type="text"],
.adm-login-card input[type="email"],
.adm-login-card input[type="password"] {
  height: 46px !important;
  min-height: 46px !important;
  max-height: 46px !important;
  line-height: 44px !important;
  padding: 0 40px 0 14px !important;
  box-sizing: border-box !important;
  border-radius: 8px !important;
  margin: 0 !important;
}

.password-row,
.adm-password-row {
  display: flex !important;
  align-items: stretch !important;
  gap: 8px !important;
  width: 100% !important;
}

.password-row .input-icon-wrapper,
.adm-password-row .adm-input-wrapper {
  flex: 1 !important;
  height: 46px !important;
}

.btn-toggle-pass,
.adm-btn-toggle,
.adm-btn-toggle-pass {
  width: 46px !important;
  min-width: 46px !important;
  max-width: 46px !important;
  height: 46px !important;
  min-height: 46px !important;
  max-height: 46px !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 15px !important;
  color: #64748b !important;
  cursor: pointer !important;
  line-height: 1 !important;
}

.btn-toggle-pass:hover,
.adm-btn-toggle:hover,
.adm-btn-toggle-pass:hover {
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
  color: #1F1A56 !important;
}

/* --------------------------------------------------------------------------
   18. CUSTOM SCROLLBARS
   -------------------------------------------------------------------------- */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--crm-border-strong);
  border-radius: var(--crm-radius-pill);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--crm-text-subtle);
}

#side-menu::-webkit-scrollbar,
.admin #side-menu::-webkit-scrollbar,
body #menu ul::-webkit-scrollbar,
aside#menu::-webkit-scrollbar,
#menu::-webkit-scrollbar {
  width: 5px !important;
}

#side-menu::-webkit-scrollbar-track,
.admin #side-menu::-webkit-scrollbar-track,
body #menu ul::-webkit-scrollbar-track,
aside#menu::-webkit-scrollbar-track,
#menu::-webkit-scrollbar-track {
  background: transparent !important;
}

#side-menu::-webkit-scrollbar-thumb,
.admin #side-menu::-webkit-scrollbar-thumb,
body #menu ul::-webkit-scrollbar-thumb,
aside#menu::-webkit-scrollbar-thumb,
#menu::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2) !important;
  border-radius: var(--crm-radius-pill) !important;
}

#side-menu::-webkit-scrollbar-thumb:hover,
.admin #side-menu::-webkit-scrollbar-thumb:hover,
body #menu ul::-webkit-scrollbar-thumb:hover,
aside#menu::-webkit-scrollbar-thumb:hover,
#menu::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.35) !important;
}

/* --------------------------------------------------------------------------
   19. MOBILE & RESPONSIVE POLISH
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  #header {
    margin-left: 0 !important;
    padding: 0 14px !important;
  }
  
  #wrapper {
    margin-left: 0 !important;
  }
  
  .mobile-navbar {
    border-radius: 0 0 var(--crm-radius-lg) var(--crm-radius-lg) !important;
    box-shadow: var(--crm-shadow-lg) !important;
    border-bottom: 1px solid var(--crm-border) !important;
  }
  
  .dataTables_filter input {
    min-width: 140px !important;
  }
}

/* ==========================================================================
   20. SAAS CORE STYLE KPI STATS CARDS (Matching Support Tickets)
   ========================================================================== */
.saas-kpi-card {
  position: relative !important;
  overflow: hidden !important;
  background: #ffffff !important;
  border-radius: 14px !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.04) !important;
  padding: 16px 18px !important;
  display: block !important;
  text-decoration: none !important;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
  min-height: 96px !important;
  box-sizing: border-box !important;
}

.saas-kpi-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px -4px rgba(0, 0, 0, 0.08), 0 4px 8px -2px rgba(0, 0, 0, 0.04) !important;
  text-decoration: none !important;
}

/* Corner decorative quarter-circle blob */
.saas-kpi-blob {
  position: absolute !important;
  right: -14px !important;
  top: -14px !important;
  width: 64px !important;
  height: 64px !important;
  border-bottom-left-radius: 9999px !important;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

.saas-kpi-card:hover .saas-kpi-blob {
  transform: scale(1.15) !important;
}

/* Content container */
.saas-kpi-content {
  position: relative !important;
  z-index: 2 !important;
}

/* Label row on top */
.saas-kpi-label {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  margin-bottom: 6px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  letter-spacing: -0.01em !important;
}

.saas-kpi-label svg {
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0 !important;
}

/* Metric value on bottom */
.saas-kpi-value {
  font-size: 26px !important;
  font-weight: 700 !important;
  color: #1e293b !important;
  -webkit-text-fill-color: #1e293b !important;
  letter-spacing: -0.02em !important;
  line-height: 1.2 !important;
  display: flex !important;
  align-items: baseline !important;
  gap: 4px !important;
}

.saas-kpi-value small {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #94a3b8 !important;
  -webkit-text-fill-color: #94a3b8 !important;
}

.saas-kpi-subtext {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: #94a3b8 !important;
  -webkit-text-fill-color: #94a3b8 !important;
  margin-top: 4px !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}

/* Status-specific color schemes */
/* Blue */
.saas-kpi-blue { border-color: #dbeafe !important; }
.saas-kpi-blue .saas-kpi-blob { background-color: #eff6ff !important; }
.saas-kpi-blue .saas-kpi-label { color: #2563eb !important; -webkit-text-fill-color: #2563eb !important; }

/* Amber */
.saas-kpi-amber { border-color: #fef3c7 !important; }
.saas-kpi-amber .saas-kpi-blob { background-color: #fffbeb !important; }
.saas-kpi-amber .saas-kpi-label { color: #d97706 !important; -webkit-text-fill-color: #d97706 !important; }

/* Emerald */
.saas-kpi-emerald { border-color: #d1fae5 !important; }
.saas-kpi-emerald .saas-kpi-blob { background-color: #ecfdf5 !important; }
.saas-kpi-emerald .saas-kpi-label { color: #059669 !important; -webkit-text-fill-color: #059669 !important; }

/* Rose */
.saas-kpi-rose { border-color: #ffe4e6 !important; }
.saas-kpi-rose .saas-kpi-blob { background-color: #fff1f2 !important; }
.saas-kpi-rose .saas-kpi-label { color: #e11d48 !important; -webkit-text-fill-color: #e11d48 !important; }

/* Orange */
.saas-kpi-orange { border-color: #ffedd5 !important; }
.saas-kpi-orange .saas-kpi-blob { background-color: #fff7ed !important; }
.saas-kpi-orange .saas-kpi-label { color: #ea580c !important; -webkit-text-fill-color: #ea580c !important; }

/* Slate / Neutral */
.saas-kpi-slate { border-color: #e2e8f0 !important; }
.saas-kpi-slate .saas-kpi-blob { background-color: #f8fafc !important; }
.saas-kpi-slate .saas-kpi-label { color: #64748b !important; -webkit-text-fill-color: #64748b !important; }

/* Brand / Indigo */
.saas-kpi-brand { border-color: #e0e7ff !important; }
.saas-kpi-brand .saas-kpi-blob { background-color: #eef2ff !important; }
.saas-kpi-brand .saas-kpi-label { color: #1F1A56 !important; -webkit-text-fill-color: #1F1A56 !important; }

/* Action KPI Card Variant (e.g. Self Services) */
.saas-kpi-card.saas-kpi-action-card,
.quick-stats-selfservice .saas-kpi-card {
  display: flex !important;
  align-items: center !important;
  min-height: 86px !important;
  padding: 16px 20px !important;
  box-sizing: border-box !important;
}

.saas-kpi-action-card .saas-kpi-content,
.quick-stats-selfservice .saas-kpi-card .saas-kpi-content {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  gap: 15px !important;
}

.saas-kpi-action-card .saas-kpi-action-icon,
.quick-stats-selfservice .saas-kpi-action-icon {
  background: #eff6ff !important;
  color: #2563eb !important;
  width: 46px !important;
  height: 46px !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  box-shadow: 0 1px 2px rgba(37, 99, 235, 0.08) !important;
  font-size: 18px !important;
  transition: all 0.2s ease !important;
}

.saas-kpi-action-card:hover .saas-kpi-action-icon,
.quick-stats-selfservice .saas-kpi-card:hover .saas-kpi-action-icon {
  background: #2563eb !important;
  color: #ffffff !important;
}

.saas-kpi-action-card .saas-kpi-action-info,
.quick-stats-selfservice .saas-kpi-action-info {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  flex-grow: 1 !important;
}

.saas-kpi-action-card .saas-kpi-action-title,
.quick-stats-selfservice .saas-kpi-action-title {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #1e293b !important;
  -webkit-text-fill-color: #1e293b !important;
  letter-spacing: 0.01em !important;
  line-height: 1.25 !important;
  margin: 0 !important;
}

.saas-kpi-action-card .saas-kpi-action-desc,
.quick-stats-selfservice .saas-kpi-action-desc {
  font-size: 12px !important;
  color: #64748b !important;
  -webkit-text-fill-color: #64748b !important;
  font-weight: 500 !important;
  margin-top: 3px !important;
  line-height: 1.2 !important;
}

.saas-kpi-action-card .saas-kpi-action-arrow,
.quick-stats-selfservice .saas-kpi-action-arrow {
  margin-left: auto !important;
  color: #94a3b8 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  background: #f8fafc !important;
  flex-shrink: 0 !important;
  transition: all 0.2s ease !important;
}

.saas-kpi-action-card:hover .saas-kpi-action-arrow,
.quick-stats-selfservice .saas-kpi-card:hover .saas-kpi-action-arrow {
  background: #eff6ff !important;
  color: #2563eb !important;
  transform: translateX(3px) !important;
}

/* ==========================================================================
   21. FINANCE OVERVIEW WIDGET MODERNIZATION (SaaS Core Style)
   ========================================================================== */
.finance-summary .panel_s {
  background: #ffffff !important;
  border-radius: 16px !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.04) !important;
  overflow: hidden !important;
}

.finance-summary .panel-body {
  padding: 24px !important;
}

/* Column Header */
.finance-col-header {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 20px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid #f1f5f9 !important;
}

.finance-header-icon {
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.finance-header-icon svg {
  width: 20px !important;
  height: 20px !important;
}

.finance-icon-blue { background: #eff6ff !important; color: #2563eb !important; }
.finance-icon-amber { background: #fffbeb !important; color: #d97706 !important; }
.finance-icon-emerald { background: #ecfdf5 !important; color: #059669 !important; }

.finance-col-title {
  margin: 0 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #1e293b !important;
  -webkit-text-fill-color: #1e293b !important;
  letter-spacing: -0.01em !important;
}

/* Stat row item */
.finance-stat-item {
  margin-bottom: 14px !important;
}

.finance-stat-item:last-child {
  margin-bottom: 0 !important;
}

.finance-stat-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 6px !important;
}

.finance-stat-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  text-decoration: none !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  transition: opacity 0.15s ease !important;
}

.finance-stat-link:hover {
  text-decoration: none !important;
  opacity: 0.8 !important;
}

.finance-stat-count {
  font-weight: 700 !important;
  font-size: 13.5px !important;
  min-width: 18px !important;
  display: inline-block !important;
}

.finance-stat-count.is-zero {
  color: #94a3b8 !important;
  -webkit-text-fill-color: #94a3b8 !important;
}

.finance-stat-count.is-active {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

.finance-stat-name {
  color: #334155 !important;
  -webkit-text-fill-color: #334155 !important;
}

.finance-stat-percent {
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
}

/* Modern slim progress bar */
.finance-progress-track {
  width: 100% !important;
  height: 5px !important;
  background-color: #f1f5f9 !important;
  border-radius: 9999px !important;
  overflow: hidden !important;
  box-shadow: none !important;
  margin-bottom: 0 !important;
}

.finance-progress-bar {
  height: 100% !important;
  border-radius: 9999px !important;
  box-shadow: none !important;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.finance-progress-bar.progress-bar-default { background-color: #94a3b8 !important; }
.finance-progress-bar.progress-bar-info { background-color: #3b82f6 !important; }
.finance-progress-bar.progress-bar-warning { background-color: #f59e0b !important; }
.finance-progress-bar.progress-bar-danger { background-color: #f43f5e !important; }
.finance-progress-bar.progress-bar-success { background-color: #10b981 !important; }

/* Text colors for percent & links */
.finance-stat-link.text-default,
.finance-stat-link.text-muted,
.finance-stat-percent.text-default,
.finance-stat-percent.text-muted { color: #64748b !important; -webkit-text-fill-color: #64748b !important; }

.finance-stat-link.text-info,
.finance-stat-percent.text-info { color: #2563eb !important; -webkit-text-fill-color: #2563eb !important; }

.finance-stat-link.text-warning,
.finance-stat-percent.text-warning { color: #d97706 !important; -webkit-text-fill-color: #d97706 !important; }

.finance-stat-link.text-danger,
.finance-stat-percent.text-danger { color: #e11d48 !important; -webkit-text-fill-color: #e11d48 !important; }

.finance-stat-link.text-success,
.finance-stat-percent.text-success { color: #059669 !important; -webkit-text-fill-color: #059669 !important; }

/* Subtle column separator on desktop */
@media (min-width: 992px) {
  .finance-summary .home-summary > [class*="col-"]:not(:last-child) {
    border-right: 1px solid #f1f5f9 !important;
    padding-right: 24px !important;
  }
  .finance-summary .home-summary > [class*="col-"]:not(:first-child) {
    padding-left: 24px !important;
  }
}

/* Divider above summary cards */
.finance-summary hr {
  margin: 28px 0 20px 0 !important;
  border: 0 !important;
  border-top: 1px solid #e2e8f0 !important;
}

/* ==========================================================================
   22. DASHBOARD WIDGETS & DESIGN SYSTEM UNIFICATION
   ========================================================================== */

/* Universal SaaS Card Container for Dashboard Panels */
.dashboard .widget .panel_s,
.dashboard .panel_s.user-data,
.dashboard .panel_s.todo-panel,
.dashboard .panel_s.projects-activity,
.dashboard .panel_s.events,
.dashboard .panel_s.contracts-expiring {
  background: #ffffff !important;
  border-radius: 16px !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.04) !important;
  padding: 24px !important;
  margin-bottom: 20px !important;
  overflow: hidden !important;
}

.dashboard .widget .panel-body,
.dashboard .panel_s .panel-body {
  padding: 0 !important;
  background: transparent !important;
}

/* Horizontal Tabs Modernization in Dashboard */
.dashboard .horizontal-tabs {
  margin-bottom: 20px !important;
}

.dashboard .nav-tabs-horizontal {
  border-bottom: 1px solid #e2e8f0 !important;
  display: flex !important;
  gap: 8px !important;
  background: transparent !important;
}

.dashboard .nav-tabs-horizontal > li > a {
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #64748b !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  padding: 10px 14px !important;
  transition: all 0.15s ease !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.dashboard .nav-tabs-horizontal > li > a:hover {
  color: #1e293b !important;
  border-bottom-color: #cbd5e1 !important;
  background: transparent !important;
}

.dashboard .nav-tabs-horizontal > li.active > a,
.dashboard .nav-tabs-horizontal > li.active > a:focus,
.dashboard .nav-tabs-horizontal > li.active > a:hover {
  color: #2563eb !important;
  border: none !important;
  border-bottom: 2px solid #2563eb !important;
  background: transparent !important;
  font-weight: 600 !important;
}

.dashboard .nav-tabs-horizontal .badge {
  background: #eff6ff !important;
  color: #2563eb !important;
  border: 1px solid #dbeafe !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 2px 7px !important;
  border-radius: 9999px !important;
}

/* Activity Feed Modernization */
.dashboard .activity-feed {
  padding: 4px 0 4px 16px !important;
  position: relative !important;
}

.dashboard .activity-feed:before {
  content: "" !important;
  position: absolute !important;
  left: 6px !important;
  top: 10px !important;
  bottom: 10px !important;
  width: 2px !important;
  background: #e2e8f0 !important;
  border-radius: 1px !important;
}

.dashboard .activity-feed .feed-item {
  position: relative !important;
  padding-left: 20px !important;
  padding-bottom: 16px !important;
  margin-bottom: 0 !important;
  border-left: none !important;
}

.dashboard .activity-feed .feed-item:before {
  content: "" !important;
  position: absolute !important;
  left: -14px !important;
  top: 4px !important;
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  border: 2.5px solid #3b82f6 !important;
  box-shadow: 0 0 0 2px #eff6ff !important;
}

.dashboard .activity-feed .feed-item .date {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: #94a3b8 !important;
  margin-bottom: 2px !important;
}

.dashboard .activity-feed .feed-item .text {
  font-size: 13px !important;
  color: #334155 !important;
  line-height: 1.5 !important;
}

.dashboard .activity-feed .feed-item .text a {
  color: #2563eb !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

/* Modern Todos in Dashboard */
.dashboard .todo.todos-sortable li {
  background: #f8fafc !important;
  border: 1px solid #f1f5f9 !important;
  border-radius: 10px !important;
  padding: 10px 14px !important;
  margin-bottom: 8px !important;
  transition: all 0.15s ease !important;
}

.dashboard .todo.todos-sortable li:hover {
  background: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
}

.dashboard .todo .todo-description {
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: #1e293b !important;
  margin-bottom: 4px !important;
}

.dashboard .todo .todo-date {
  font-size: 11.5px !important;
  color: #94a3b8 !important;
  display: block !important;
}

/* Datatables inside dashboard widgets */
.dashboard .table.dt-table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  width: 100% !important;
}

.dashboard .table.dt-table thead th {
  background: #f8fafc !important;
  color: #64748b !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
  border-bottom: 1px solid #e2e8f0 !important;
  padding: 10px 12px !important;
}

.dashboard .table.dt-table tbody td {
  border-bottom: 1px solid #f1f5f9 !important;
  padding: 12px !important;
  font-size: 13px !important;
  color: #334155 !important;
  vertical-align: middle !important;
}

/* Widget Header Utility Colors */
.finance-icon-rose { background: #fff1f2 !important; color: #e11d48 !important; }
.finance-icon-purple { background: #faf5ff !important; color: #8b5cf6 !important; }
.finance-icon-brand { background: #f5f3ff !important; color: #6366f1 !important; }

/* Dashboard User Data View All Action Pill */
.dashboard .user-data .tab-pane > a.mbot20,
.dashboard .user-data .tab-pane > a.inline-block {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: #2563eb !important;
  background: #eff6ff !important;
  border: 1px solid #dbeafe !important;
  border-radius: 8px !important;
  padding: 6px 14px !important;
  margin-bottom: 16px !important;
  text-decoration: none !important;
  transition: all 0.15s ease !important;
  width: auto !important;
}

.dashboard .user-data .tab-pane > a.mbot20:hover,
.dashboard .user-data .tab-pane > a.inline-block:hover {
  background: #dbeafe !important;
  color: #1d4ed8 !important;
  text-decoration: none !important;
}

/* Dashboard Action Buttons & Dropdowns Consistency */
.dashboard .finance-col-header .btn-default {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  color: #475569 !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  border-radius: 8px !important;
  padding: 5px 12px !important;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03) !important;
  transition: all 0.15s ease !important;
}

.dashboard .finance-col-header .btn-default:hover,
.dashboard .finance-col-header .btn-default:focus {
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
  color: #1e293b !important;
}

.dashboard .finance-col-header .btn-primary {
  background: #2563eb !important;
  border: 1px solid #2563eb !important;
  color: #ffffff !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  border-radius: 8px !important;
  padding: 5px 12px !important;
  box-shadow: 0 1px 2px 0 rgba(37, 99, 235, 0.2) !important;
  transition: all 0.15s ease !important;
}

.dashboard .finance-col-header .btn-primary:hover,
.dashboard .finance-col-header .btn-primary:focus {
  background: #1d4ed8 !important;
  border-color: #1d4ed8 !important;
  color: #ffffff !important;
}






/* ==========================================================================
   23. CALENDAR MODERNIZATION & SAAS DESIGN SYSTEM
   ========================================================================== */

/* Calendar Root & CSS Variables */
.fc {
  --fc-border-color: #f1f5f9;
  --fc-button-text-color: #334155;
  --fc-button-bg-color: #ffffff;
  --fc-button-border-color: #e2e8f0;
  --fc-button-hover-bg-color: #f8fafc;
  --fc-button-hover-border-color: #cbd5e1;
  --fc-button-active-bg-color: #2563eb;
  --fc-button-active-border-color: #2563eb;
  --fc-event-bg-color: #2563eb;
  --fc-event-border-color: #2563eb;
  --fc-event-text-color: #ffffff;
  --fc-today-bg-color: #f0f7ff;
  --fc-now-indicator-color: #ef4444;
  --fc-neutral-bg-color: #f8fafc;
  --fc-neutral-text-color: #64748b;
  --fc-list-event-hover-bg-color: #f8fafc;
  --fc-page-bg-color: #ffffff;
  font-family: inherit !important;
}

/* FullCalendar Toolbar */
.fc .fc-header-toolbar.fc-toolbar {
  margin-bottom: 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}

.fc .fc-toolbar-title {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  letter-spacing: -0.02em !important;
  font-family: inherit !important;
}

.fc .fc-toolbar-chunk {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 !important;
}

/* FullCalendar Buttons */
.fc .fc-button,
.fc .fc-button-primary {
  background-color: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  color: #334155 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 6px 14px !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.04) !important;
  text-transform: capitalize !important;
  transition: all 0.15s ease !important;
  outline: none !important;
  line-height: 1.5 !important;
  height: auto !important;
}

.fc .fc-button:hover,
.fc .fc-button-primary:hover {
  background-color: #f8fafc !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.06) !important;
}

.fc .fc-button:focus,
.fc .fc-button-primary:focus {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
}

/* Active Button (e.g. Current View: Month / Week / Day) */
.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary:not(:disabled):active,
.fc .fc-button.fc-button-active {
  background-color: #2563eb !important;
  border-color: #2563eb !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 3px 0 rgba(37, 99, 235, 0.3) !important;
}

.fc .fc-button-primary:not(:disabled).fc-button-active:hover {
  background-color: #1d4ed8 !important;
  border-color: #1d4ed8 !important;
  color: #ffffff !important;
}

/* Disabled Button */
.fc .fc-button:disabled,
.fc .fc-button-primary:disabled {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
  background-color: #ffffff !important;
  color: #94a3b8 !important;
  border-color: #e2e8f0 !important;
  box-shadow: none !important;
}

/* Button Groups */
.fc .fc-button-group {
  display: inline-flex !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.04) !important;
}

.fc .fc-button-group > .fc-button {
  border-radius: 0 !important;
  margin-left: -1px !important;
  box-shadow: none !important;
}

.fc .fc-button-group > .fc-button:first-child {
  border-top-left-radius: 8px !important;
  border-bottom-left-radius: 8px !important;
  margin-left: 0 !important;
}

.fc .fc-button-group > .fc-button:last-child {
  border-top-right-radius: 8px !important;
  border-bottom-right-radius: 8px !important;
}

/* Prev / Next Icon Buttons */
.fc .fc-prev-button,
.fc .fc-next-button {
  padding: 6px 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.fc .fc-icon {
  font-size: 1.1em !important;
  line-height: 1 !important;
}

/* Calendar Grid & Frame */
.fc-theme-standard .fc-scrollgrid {
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}

.fc-theme-standard td,
.fc-theme-standard th {
  border-color: #f1f5f9 !important;
}

/* Weekday Column Headers */
.fc .fc-col-header-cell {
  background: #f8fafc !important;
  border-bottom: 1px solid #e2e8f0 !important;
  padding: 10px 0 !important;
}

.fc .fc-col-header-cell-cushion {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #64748b !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  text-decoration: none !important;
  display: inline-block !important;
}

/* Day Cells */
.fc .fc-daygrid-day-frame {
  min-height: 90px !important;
  transition: background-color 0.15s ease !important;
}

.fc .fc-daygrid-day:hover .fc-daygrid-day-frame {
  background-color: #fafbfc !important;
}

.fc .fc-daygrid-day-top {
  padding: 6px 8px !important;
  display: flex !important;
  flex-direction: row !important;
  justify-content: flex-end !important;
}

.fc .fc-daygrid-day-number {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #475569 !important;
  text-decoration: none !important;
  padding: 2px 6px !important;
  border-radius: 6px !important;
  transition: all 0.15s ease !important;
}

/* Today Cell Highlight */
.fc .fc-day-today {
  background-color: #f0f7ff !important;
}

.fc .fc-day-today .fc-daygrid-day-frame {
  background-color: transparent !important;
}

.fc .fc-day-today .fc-daygrid-day-number {
  background-color: #2563eb !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  border-radius: 9999px !important;
  width: 24px !important;
  height: 24px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  box-shadow: 0 1px 3px rgba(37, 99, 235, 0.3) !important;
}

/* Other Month Days */
.fc .fc-day-other {
  background-color: #fafbfc !important;
}

.fc .fc-day-other .fc-daygrid-day-number {
  color: #cbd5e1 !important;
}

/* Event Pills & Badges */
.fc .fc-event {
  border-radius: 6px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease !important;
}

.fc .fc-event:hover {
  text-decoration: none !important;
}

/* Block & All-Day Event Pills (Solid Color Fill) */
.fc .fc-daygrid-block-event,
.fc .fc-timegrid-event {
  padding: 3px 8px !important;
  margin: 2px 4px !important;
  border: none !important;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.08) !important;
}

.fc .fc-daygrid-block-event:hover,
.fc .fc-timegrid-event:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.14) !important;
  filter: brightness(1.05) !important;
}

.fc .fc-daygrid-block-event .fc-event-main,
.fc .fc-timegrid-event .fc-event-main {
  color: #ffffff !important;
  font-weight: 600 !important;
}

.fc .fc-daygrid-block-event .fc-event-title,
.fc .fc-timegrid-event .fc-event-title {
  color: #ffffff !important;
  font-weight: 600 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.fc .fc-daygrid-block-event .fc-event-time,
.fc .fc-timegrid-event .fc-event-time {
  color: rgba(255, 255, 255, 0.95) !important;
  font-weight: 600 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25) !important;
  margin-right: 5px !important;
}

/* Timed / Dot Events (Transformed into Modern Badge Pills) */
.fc .fc-daygrid-dot-event {
  display: flex !important;
  align-items: center !important;
  padding: 3px 8px 3px 6px !important;
  margin: 2px 4px !important;
  background-color: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-left-width: 3.5px !important;
  border-left-style: solid !important;
  border-left-color: #94a3b8;
  border-radius: 6px !important;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.04) !important;
  transition: all 0.15s ease-in-out !important;
}

.fc .fc-daygrid-dot-event:hover {
  background-color: #f8fafc !important;
  border-color: #cbd5e1 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.04) !important;
}

.fc .fc-daygrid-dot-event .fc-daygrid-event-dot {
  width: 0 !important;
  height: 0 !important;
  border-width: 4.5px !important;
  border-style: solid !important;
  border-radius: 9999px !important;
  margin: 0 7px 0 1px !important;
  flex-shrink: 0 !important;
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.95), 0 1px 2px rgba(0, 0, 0, 0.12) !important;
}

.fc .fc-daygrid-dot-event .fc-event-time {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #475569 !important;
  margin-right: 5px !important;
  white-space: nowrap !important;
  letter-spacing: -0.01em !important;
}

.fc .fc-daygrid-dot-event .fc-event-title {
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: #0f172a !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.fc .fc-daygrid-dot-event:hover .fc-event-title {
  color: #0f172a !important;
}

/* Calendar Status-Aware Accent Borders */
.fc .fc-daygrid-dot-event.calendar-invoice-overdue,
.fc .fc-daygrid-dot-event.calendar-invoice-status-4 {
  border-left-color: #ef4444 !important;
}
.fc .fc-daygrid-dot-event.calendar-invoice-partially,
.fc .fc-daygrid-dot-event.calendar-invoice-status-3 {
  border-left-color: #0284c7 !important;
}
.fc .fc-daygrid-dot-event.calendar-invoice-paid,
.fc .fc-daygrid-dot-event.calendar-invoice-status-2 {
  border-left-color: #10b981 !important;
}
.fc .fc-daygrid-dot-event.calendar-invoice-unpaid,
.fc .fc-daygrid-dot-event.calendar-invoice-status-1 {
  border-left-color: #f59e0b !important;
}
.fc .fc-daygrid-dot-event.calendar-invoice-draft,
.fc .fc-daygrid-dot-event.calendar-invoice-status-6 {
  border-left-color: #94a3b8 !important;
}

.fc .fc-daygrid-dot-event.calendar-event-estimate {
  border-left-color: #0284c7 !important;
}
.fc .fc-daygrid-dot-event.calendar-estimate-expired,
.fc .fc-daygrid-dot-event.calendar-estimate-status-5 {
  border-left-color: #ef4444 !important;
}
.fc .fc-daygrid-dot-event.calendar-estimate-draft,
.fc .fc-daygrid-dot-event.calendar-estimate-status-1 {
  border-left-color: #94a3b8 !important;
}

.fc .fc-daygrid-dot-event.calendar-event-proposal {
  border-left-color: #8b5cf6 !important;
}
.fc .fc-daygrid-dot-event.calendar-event-contract {
  border-left-color: #6366f1 !important;
}
.fc .fc-daygrid-dot-event.calendar-event-project {
  border-left-color: #10b981 !important;
}
.fc .fc-daygrid-dot-event.calendar-event-reminder {
  border-left-color: #ec4899 !important;
}

/* Calendar Legend Indicator in Filters Drawer */
.calendar-legend-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 9999px;
  margin-right: 6px;
  vertical-align: middle;
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.9), 0 1px 2px rgba(0, 0, 0, 0.15);
  flex-shrink: 0;
}

/* More Popover (+ more link) */
.fc .fc-daygrid-more-link {
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: #2563eb !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  text-decoration: none !important;
  transition: background 0.15s ease !important;
}

.fc .fc-daygrid-more-link:hover {
  background-color: #eff6ff !important;
  text-decoration: none !important;
}

.fc .fc-more-popover {
  border-radius: 12px !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05) !important;
  background: #ffffff !important;
  overflow: hidden !important;
}

.fc .fc-more-popover .fc-popover-header {
  background: #f8fafc !important;
  border-bottom: 1px solid #e2e8f0 !important;
  padding: 8px 14px !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  color: #1e293b !important;
}

.fc .fc-more-popover .fc-popover-body {
  padding: 8px !important;
}

/* TimeGrid View */
.fc .fc-timegrid-slot {
  height: 28px !important;
}

.fc .fc-timegrid-slot-minor {
  border-top-style: dotted !important;
  border-top-color: #f1f5f9 !important;
}

.fc .fc-timegrid-slot-label-cushion {
  font-size: 11px !important;
  font-weight: 500 !important;
  color: #94a3b8 !important;
  text-transform: uppercase !important;
}

.fc .fc-timegrid-now-indicator-line {
  border-color: #ef4444 !important;
  border-width: 2px !important;
}

.fc .fc-timegrid-now-indicator-arrow {
  border-color: #ef4444 !important;
}

/* List View */
.fc .fc-list {
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}

.fc .fc-list-day-cushion {
  background-color: #f8fafc !important;
  padding: 10px 14px !important;
}

.fc .fc-list-day-text {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #1e293b !important;
}

.fc .fc-list-day-side-text {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: #64748b !important;
}

.fc .fc-list-event:hover td {
  background-color: #f8fafc !important;
}

.fc .fc-list-event-dot {
  width: 10px !important;
  height: 10px !important;
  border-width: 5px !important;
  border-style: solid !important;
  border-radius: 50% !important;
  margin-right: 8px !important;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.95), 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

.fc .fc-list-event-title a {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #0f172a !important;
  text-decoration: none !important;
  transition: color 0.15s ease !important;
}

.fc .fc-list-event:hover .fc-list-event-title a {
  color: #2563eb !important;
}

.fc .fc-list-event-time {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #475569 !important;
}

/* Calendar Filters Card */
#calendar_filters {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;
  padding: 20px 24px !important;
  margin-bottom: 20px !important;
}

#calendar_filters .checkbox {
  margin-top: 8px !important;
  margin-bottom: 8px !important;
}

#calendar_filters .checkbox label {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #334155 !important;
  cursor: pointer !important;
}

#calendar_filters hr {
  display: none !important;
}

#calendar_filters .btn-default {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: #64748b !important;
  padding: 6px 14px !important;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.04) !important;
  transition: all 0.15s ease !important;
}

#calendar_filters .btn-default:hover {
  background: #f1f5f9 !important;
  color: #1e293b !important;
  border-color: #cbd5e1 !important;
}

#calendar_filters .btn-success {
  background: #2563eb !important;
  border: 1px solid #2563eb !important;
  border-radius: 8px !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: #ffffff !important;
  padding: 6px 18px !important;
  box-shadow: 0 1px 2px 0 rgba(37, 99, 235, 0.25) !important;
  transition: all 0.15s ease !important;
}

#calendar_filters .btn-success:hover {
  background: #1d4ed8 !important;
  border-color: #1d4ed8 !important;
}

/* Event Color Picker in Modal */
.calendar-cpicker.cpicker {
  width: 26px !important;
  height: 26px !important;
  border-radius: 50% !important;
  display: inline-block !important;
  margin: 3px 5px !important;
  cursor: pointer !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.calendar-cpicker.cpicker:hover {
  transform: scale(1.15) !important;
}

.calendar-cpicker.cpicker-big {
  transform: scale(1.2) !important;
  box-shadow: 0 0 0 3px #ffffff, 0 0 0 5px #2563eb !important;
}

/* ==========================================================================
   24. DATATABLES HEADER SORTING ICONS ALIGNMENT & MODERN CHEVRONS
   ========================================================================== */

/* 1. Ensure Sortable Headers Always Have Safe Right Padding for Icons */
table.dataTable thead th.sorting,
table.dataTable thead th.sorting_asc,
table.dataTable thead th.sorting_desc,
.dashboard .table.dt-table thead th.sorting,
.dashboard .table.dt-table thead th.sorting_asc,
.dashboard .table.dt-table thead th.sorting_desc {
  padding-right: 36px !important;
  position: relative !important;
  cursor: pointer !important;
  user-select: none !important;
  transition: background-color 0.15s ease, color 0.15s ease !important;
}

[dir="rtl"] table.dataTable thead th.sorting,
[dir="rtl"] table.dataTable thead th.sorting_asc,
[dir="rtl"] table.dataTable thead th.sorting_desc,
[dir="rtl"] .dashboard .table.dt-table thead th.sorting,
[dir="rtl"] .dashboard .table.dt-table thead th.sorting_asc,
[dir="rtl"] .dashboard .table.dt-table thead th.sorting_desc {
  padding-right: 14px !important;
  padding-left: 36px !important;
}

/* 2. Vertically Centered & Proportioned Sort Indicator */
table.dataTable thead th.sorting:after,
table.dataTable thead th.sorting_asc:after,
table.dataTable thead th.sorting_desc:after,
.dashboard .table.dt-table thead th.sorting:after,
.dashboard .table.dt-table thead th.sorting_asc:after,
.dashboard .table.dt-table thead th.sorting_desc:after {
  position: absolute !important;
  top: 50% !important;
  bottom: auto !important;
  right: 10px !important;
  left: auto !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
  width: 20px !important;
  height: 20px !important;
  border-radius: 6px !important;
  background-position: center !important;
  background-size: 14px 14px !important;
  background-repeat: no-repeat !important;
  transition: all 0.15s ease !important;
}

[dir="rtl"] table.dataTable thead th.sorting:after,
[dir="rtl"] table.dataTable thead th.sorting_asc:after,
[dir="rtl"] table.dataTable thead th.sorting_desc:after {
  right: auto !important;
  left: 10px !important;
}

/* 3. Unsorted State: Subtle Chevron on Header Hover */
table.dataTable thead th.sorting:after,
.dashboard .table.dt-table thead th.sorting:after {
  opacity: 0 !important;
  background-color: transparent !important;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="%2394a3b8"><path fill-rule="evenodd" d="M10 3a.75.75 0 01.55.24l3.25 3.5a.75.75 0 11-1.1 1.02L10 4.852 7.3 7.76a.75.75 0 01-1.1-1.02l3.25-3.5A.75.75 0 0110 3zm-3.71 9.24a.75.75 0 011.06.02L10 15.168l2.65-2.908a.75.75 0 111.1 1.02l-3.25 3.5a.75.75 0 01-1.1 0l-3.25-3.5a.75.75 0 01.04-1.04z" clip-rule="evenodd" /></svg>') !important;
}

table.dataTable thead th.sorting:hover:after,
.dashboard .table.dt-table thead th.sorting:hover:after {
  opacity: 0.85 !important;
  background-color: #f1f5f9 !important;
}

/* 4. Active Ascending Sort: Royal Blue Up-Chevron with Soft Blue Pill */
table.dataTable thead th.sorting_asc:after,
.dashboard .table.dt-table thead th.sorting_asc:after {
  opacity: 1 !important;
  background-color: #eff6ff !important;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="%232563eb"><path fill-rule="evenodd" d="M14.77 12.79a.75.75 0 01-1.06-.02L10 8.832 6.29 12.77a.75.75 0 11-1.08-1.04l4.25-4.5a.75.75 0 011.08 0l4.25 4.5a.75.75 0 01-.02 1.06z" clip-rule="evenodd" /></svg>') !important;
}

/* 5. Active Descending Sort: Royal Blue Down-Chevron with Soft Blue Pill */
table.dataTable thead th.sorting_desc:after,
.dashboard .table.dt-table thead th.sorting_desc:after {
  opacity: 1 !important;
  background-color: #eff6ff !important;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="%232563eb"><path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd" /></svg>') !important;
}

/* 6. Active Column Header Text Highlighting */
table.dataTable thead th.sorting_asc,
table.dataTable thead th.sorting_desc,
.dashboard .table.dt-table thead th.sorting_asc,
.dashboard .table.dt-table thead th.sorting_desc {
  color: #0f172a !important;
  font-weight: 700 !important;
}

/* 7. Column Header Tooltip / Question Icon Alignment */
table.dataTable thead th i.fa-regular,
table.dataTable thead th i.fa-solid,
table.dataTable thead th i.fa {
  vertical-align: -1px !important;
  margin-right: 4px !important;
  color: #94a3b8 !important;
  transition: color 0.15s ease !important;
}

table.dataTable thead th:hover i.fa-regular,
table.dataTable thead th:hover i.fa-solid,
table.dataTable thead th:hover i.fa {
  color: #475569 !important;
}