/* ============================================================
   INFINITY CRM - Premium Design System v2.0 (Green-Turquoise port — 1777535490)
   Global UI/UX Override - Applied across ALL modules
   Reference: Inventory Dashboard Premium Style
   ============================================================ */

/* ----------------------------------------------------------
   1. CSS CUSTOM PROPERTIES (Design Tokens)
   ---------------------------------------------------------- */
:root {
  /* Color System */
  --premium-bg: #F1F5F9;
  --premium-card-bg: #F8FAFC;
  --premium-white: #FFFFFF;
  --premium-border: #E2E8F0;
  --premium-border-light: #F1F5F9;

  /* Brand Colors */
  --premium-blue: #14B8A6;
  --premium-blue-light: #2DD4BF;
  --premium-blue-50: #F0FDFA;
  --premium-blue-100: #CCFBF1;
  --premium-blue-700: #0F766E;
  --premium-green: #22C55E;
  --premium-green-50: #F0FDF4;
  --premium-green-100: #DCFCE7;
  --premium-green-700: #15803D;
  --premium-orange: #F59E0B;
  --premium-orange-50: #FFFBEB;
  --premium-orange-100: #FEF3C7;
  --premium-orange-700: #B45309;
  --premium-red: #EF4444;
  --premium-red-50: #FEF2F2;
  --premium-red-100: #FEE2E2;
  --premium-red-700: #B91C1C;
  --premium-purple: #8B5CF6;
  --premium-purple-50: #F5F3FF;
  --premium-purple-100: #D1FAE5;
  --premium-purple-700: #6D28D9;
  --premium-teal: #14B8A6;
  --premium-teal-50: #F0FDFA;
  --premium-indigo: #10B981;
  --premium-indigo-50: #ECFDF5;

  /* Text Colors */
  --premium-text: #0F172A;
  --premium-text-secondary: #334155;
  --premium-text-muted: #64748B;
  --premium-text-light: #94A3B8;

  /* Spacing */
  --premium-radius: 12px;
  --premium-radius-sm: 8px;
  --premium-radius-lg: 16px;
  --premium-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.02);
  --premium-shadow-md: 0 4px 6px -1px rgba(0,0,0,0.05), 0 2px 4px -2px rgba(0,0,0,0.03);
  --premium-shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.05), 0 4px 6px -4px rgba(0,0,0,0.03);
  --premium-transition: all 0.2s ease;
}

/* ----------------------------------------------------------
   2. GLOBAL BODY & BACKGROUND
   ---------------------------------------------------------- */
body {
  background-color: var(--premium-bg) !important;
  color: var(--premium-text) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#wrapper {
  background-color: var(--premium-bg) !important;
}

.content {
  padding: 20px 25px !important;
}

/* ----------------------------------------------------------
   3. TOP HEADER BAR
   ---------------------------------------------------------- */
#header {
  background: var(--premium-white) !important;
  border-bottom: 1px solid var(--premium-border) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
}

.navbar-nav > li > a {
  color: var(--premium-text-muted) !important;
  transition: var(--premium-transition);
}

.navbar-nav > li > a:hover,
.navbar-nav > li > a:focus {
  color: var(--premium-text) !important;
}

/* ----------------------------------------------------------
   4. SIDEBAR - Premium Dark Style
   ---------------------------------------------------------- */
#menu {
  background: linear-gradient(180deg, #022c22 0%, #064e3b 100%) !important;
  border-right: none !important;
  box-shadow: 2px 0 8px rgba(0,0,0,0.1);
}

#menu .sidebar-logo {
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  padding: 14px 18px !important;
}

#menu .child-menu li a,
#menu ul li a {
  color: #94A3B8 !important;
  padding: 9px 18px !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  transition: var(--premium-transition);
  border-radius: 6px;
  margin: 1px 8px;
}

#menu ul li a:hover,
#menu .child-menu li a:hover {
  color: #F1F5F9 !important;
  background: rgba(255,255,255,0.08) !important;
}

#menu ul li.active > a,
#menu .child-menu li.active > a {
  color: #FFFFFF !important;
  background: rgba(20,184,166,0.15) !important;
  border-left: 3px solid var(--premium-blue) !important;
}

#menu ul li a i,
#menu .child-menu li a i {
  width: 22px !important;
  text-align: center;
  margin-right: 8px;
  font-size: 15px;
  opacity: 0.7;
}

#menu ul li.active > a i,
#menu ul li a:hover i {
  opacity: 1;
}

#menu .sidebar-submenu {
  background: rgba(0,0,0,0.15) !important;
}

#menu .sidebar-submenu li a {
  padding-left: 48px !important;
  font-size: 13px !important;
}

/* Menu section headers */
#menu .menu-heading,
#menu .sidebar-heading {
  color: #475569 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  padding: 14px 20px 6px !important;
}

/* ----------------------------------------------------------
   5. PANELS / CARDS - Premium Design
   ---------------------------------------------------------- */
.panel,
.panel_s {
  background: var(--premium-white) !important;
  border: 1px solid var(--premium-border) !important;
  border-radius: var(--premium-radius) !important;
  box-shadow: var(--premium-shadow) !important;
  margin-bottom: 20px !important;
  overflow: hidden;
}

.panel-heading {
  background: var(--premium-card-bg) !important;
  border-bottom: 1px solid var(--premium-border) !important;
  padding: 14px 20px !important;
  border-radius: var(--premium-radius) var(--premium-radius) 0 0 !important;
}

.panel-title {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--premium-text) !important;
  letter-spacing: -0.01em;
}

.panel-body {
  padding: 20px !important;
  background: var(--premium-white) !important;
}

.panel-footer {
  background: var(--premium-card-bg) !important;
  border-top: 1px solid var(--premium-border) !important;
  padding: 12px 20px !important;
}

/* Panel hover effect */
.panel_s:hover,
.panel:hover {
  box-shadow: var(--premium-shadow-md) !important;
}

/* ----------------------------------------------------------
   6. PAGE HEADERS / TITLES
   ---------------------------------------------------------- */
.content > .row:first-child h4,
.content > .tw-font-semibold,
._page_heading h4,
.page-heading h4 {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--premium-text) !important;
  letter-spacing: -0.02em;
  margin-bottom: 4px !important;
}

/* Page subtitle */
.content > .row:first-child .text-muted,
._page_heading .text-muted {
  font-size: 13px !important;
  color: var(--premium-text-muted) !important;
}

/* ----------------------------------------------------------
   7. KPI / STAT CARDS - Premium Style
   ---------------------------------------------------------- */
/* Transform basic stat panels into premium KPI cards */
.panel_s .panel-body.padding-10,
.panel_s .panel-body[class*="padding"] {
  padding: 20px !important;
  text-align: center;
  position: relative;
}

.panel_s .panel-body.padding-10 h3,
.panel_s .panel-body[class*="padding"] h3 {
  font-size: 32px !important;
  font-weight: 800 !important;
  margin-bottom: 6px !important;
  letter-spacing: -0.02em;
}

.panel_s .panel-body.padding-10 span.bold,
.panel_s .panel-body[class*="padding"] span.bold {
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  font-weight: 600 !important;
}

/* Top Stats Widget - Premium */
.top-stats-overview .panel_s,
.widget .panel_s,
.col-md-3 > .panel_s:has(.padding-10) {
  border-radius: var(--premium-radius) !important;
  transition: var(--premium-transition);
  border: 1px solid var(--premium-border) !important;
}

.top-stats-overview .panel_s:hover,
.widget .panel_s:hover {
  transform: translateY(-2px);
  box-shadow: var(--premium-shadow-lg) !important;
}

/* Finance overview widget */
.finance-overview .panel_s,
.widget-finance .panel_s {
  border-left: 4px solid var(--premium-blue) !important;
}

/* ----------------------------------------------------------
   8. TABLES - Premium Upgrade
   ---------------------------------------------------------- */
.table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

.table > thead > tr > th {
  background: var(--premium-card-bg) !important;
  color: var(--premium-text-secondary) !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  padding: 12px 14px !important;
  border-bottom: 2px solid var(--premium-border) !important;
  white-space: nowrap;
}

.table > tbody > tr > td {
  padding: 12px 14px !important;
  color: var(--premium-text-secondary) !important;
  font-size: 13.5px !important;
  border-top: 1px solid var(--premium-border-light) !important;
  vertical-align: middle !important;
}

.table > tbody > tr:hover > td {
  background-color: #F8FAFC !important;
}

/* DataTables enhanced */
table.dataTable thead > tr > th {
  background: var(--premium-card-bg) !important;
  border-color: var(--premium-border) !important;
}

table.dataTable tbody td {
  border-color: var(--premium-border-light) !important;
}

table.dataTable tbody tr:hover td {
  background-color: var(--premium-blue-50) !important;
}

/* DataTable search */
.dataTables_filter input {
  border-radius: var(--premium-radius-sm) !important;
  border: 1px solid var(--premium-border) !important;
  padding: 6px 12px !important;
  font-size: 13px !important;
  transition: var(--premium-transition);
}

.dataTables_filter input:focus {
  border-color: var(--premium-blue) !important;
  box-shadow: 0 0 0 3px rgba(20,184,166,0.1) !important;
}

/* DataTable length selector */
.dataTables_length select {
  border-radius: var(--premium-radius-sm) !important;
  border: 1px solid var(--premium-border) !important;
  padding: 5px 10px !important;
}

/* Pagination */
.dataTables_paginate .pagination > li > a,
.dataTables_paginate .pagination > li > span,
.pagination > li > a,
.pagination > li > span {
  border: 1px solid var(--premium-border) !important;
  color: var(--premium-text-secondary) !important;
  padding: 6px 12px !important;
  margin: 0 2px !important;
  border-radius: var(--premium-radius-sm) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  transition: var(--premium-transition);
}

.dataTables_paginate .pagination > .active > a,
.dataTables_paginate .pagination > .active > span,
.pagination > .active > a,
.pagination > .active > span {
  background-color: var(--premium-blue) !important;
  border-color: var(--premium-blue) !important;
  color: #fff !important;
}

.dataTables_paginate .pagination > li > a:hover,
.pagination > li > a:hover {
  background-color: var(--premium-blue-50) !important;
  border-color: var(--premium-blue-light) !important;
  color: var(--premium-blue) !important;
}

/* DT buttons row */
.dt-buttons .btn {
  border-radius: var(--premium-radius-sm) !important;
}

/* ----------------------------------------------------------
   9. BUTTONS - Consistent Premium Style
   ---------------------------------------------------------- */
.btn {
  border-radius: var(--premium-radius-sm) !important;
  font-weight: 500 !important;
  font-size: 13.5px !important;
  padding: 7px 14px !important;
  transition: var(--premium-transition);
  letter-spacing: -0.01em;
}

.btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--premium-shadow) !important;
}

.btn:active {
  transform: translateY(0);
}

/* Primary buttons - Blue */
.btn-primary {
  background-color: var(--premium-blue) !important;
  border-color: var(--premium-blue) !important;
  color: #fff !important;
}

.btn-primary:hover {
  background-color: var(--premium-blue-700) !important;
  border-color: var(--premium-blue-700) !important;
  color: #fff !important;
}

/* Success buttons - Green */
.btn-success {
  background-color: var(--premium-green) !important;
  border-color: var(--premium-green) !important;
}

.btn-success:hover {
  background-color: var(--premium-green-700) !important;
  border-color: var(--premium-green-700) !important;
}

/* Warning buttons - Orange */
.btn-warning {
  background-color: var(--premium-orange) !important;
  border-color: var(--premium-orange) !important;
}

.btn-warning:hover {
  background-color: var(--premium-orange-700) !important;
  border-color: var(--premium-orange-700) !important;
}

/* Danger buttons - Red */
.btn-danger {
  background-color: var(--premium-red) !important;
  border-color: var(--premium-red) !important;
}

.btn-danger:hover {
  background-color: var(--premium-red-700) !important;
  border-color: var(--premium-red-700) !important;
}

/* Info buttons */
.btn-info {
  background-color: var(--premium-blue-light) !important;
  border-color: var(--premium-blue-light) !important;
}

.btn-info:hover {
  background-color: var(--premium-blue) !important;
  border-color: var(--premium-blue) !important;
}

/* Default / Secondary buttons */
.btn-default {
  background-color: var(--premium-white) !important;
  border: 1px solid var(--premium-border) !important;
  color: var(--premium-text-secondary) !important;
}

.btn-default:hover {
  background-color: var(--premium-card-bg) !important;
  border-color: #CBD5E1 !important;
  color: var(--premium-text) !important;
}

/* Button groups */
.btn-group > .btn {
  border-radius: 0 !important;
}

.btn-group > .btn:first-child {
  border-radius: var(--premium-radius-sm) 0 0 var(--premium-radius-sm) !important;
}

.btn-group > .btn:last-child {
  border-radius: 0 var(--premium-radius-sm) var(--premium-radius-sm) 0 !important;
}

.btn-group > .btn:only-child {
  border-radius: var(--premium-radius-sm) !important;
}

/* Small buttons */
.btn-sm, .btn-xs {
  padding: 4px 10px !important;
  font-size: 12px !important;
}

/* ----------------------------------------------------------
   10. FORMS - Premium Input Design
   ---------------------------------------------------------- */
.form-control,
input.form-control,
select.form-control,
textarea.form-control {
  border: 1px solid var(--premium-border) !important;
  border-radius: var(--premium-radius-sm) !important;
  padding: 8px 12px !important;
  font-size: 13.5px !important;
  color: var(--premium-text) !important;
  background-color: var(--premium-white) !important;
  transition: var(--premium-transition);
  height: auto !important;
  min-height: 36px;
}

.form-control:focus,
input.form-control:focus,
select.form-control:focus,
textarea.form-control:focus {
  border-color: var(--premium-blue) !important;
  box-shadow: 0 0 0 3px rgba(20,184,166,0.1) !important;
  outline: none !important;
}

/* Labels */
label,
.control-label {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--premium-text-secondary) !important;
  margin-bottom: 6px !important;
}

/* Form groups */
.form-group {
  margin-bottom: 18px !important;
}

/* Input groups */
.input-group-addon {
  background-color: var(--premium-card-bg) !important;
  border: 1px solid var(--premium-border) !important;
  color: var(--premium-text-muted) !important;
  border-radius: var(--premium-radius-sm) !important;
}

/* Select */
.bootstrap-select .btn {
  border: 1px solid var(--premium-border) !important;
  border-radius: var(--premium-radius-sm) !important;
  background: var(--premium-white) !important;
  color: var(--premium-text) !important;
}

/* Dropzone */
#dropzoneDragArea,
.dropzoneDragArea,
form.dropzone {
  border: 2px dashed var(--premium-border) !important;
  border-radius: var(--premium-radius) !important;
  background: var(--premium-card-bg) !important;
  padding: 30px !important;
  transition: var(--premium-transition);
}

#dropzoneDragArea:hover,
.dropzoneDragArea:hover,
form.dropzone:hover {
  border-color: var(--premium-blue-light) !important;
  background: var(--premium-blue-50) !important;
}

/* Readonly/disabled */
input[readonly],
input[disabled],
.form-control[disabled],
.form-control[readonly] {
  background-color: var(--premium-card-bg) !important;
  border-color: var(--premium-border-light) !important;
  color: var(--premium-text-muted) !important;
  cursor: not-allowed;
}

/* ----------------------------------------------------------
   11. STATUS BADGES - Premium Consistent Design
   ---------------------------------------------------------- */
.label,
.badge,
.infinity-status,
span.label {
  border-radius: 6px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  padding: 4px 10px !important;
  letter-spacing: 0.3px !important;
  display: inline-block !important;
  line-height: 1.4 !important;
}

/* Paid / Active / Available / Completed / Success */
.label-success,
.badge-success,
.infinity-status-available,
.label[style*="background-color: #84c529"],
.label[style*="background: #84c529"] {
  background-color: var(--premium-green-100) !important;
  color: var(--premium-green-700) !important;
}

/* Pending / Draft / In Transit / Warning */
.label-warning,
.badge-warning,
.infinity-status-in_transit,
.infinity-status-customs_clearance {
  background-color: var(--premium-orange-100) !important;
  color: var(--premium-orange-700) !important;
}

/* Overdue / Cancelled / Error / Danger */
.label-danger,
.badge-danger,
.infinity-status-rma {
  background-color: var(--premium-red-100) !important;
  color: var(--premium-red-700) !important;
}

/* Info / Primary */
.label-primary,
.badge-primary,
.label-info,
.badge-info,
.infinity-status-reserved {
  background-color: var(--premium-blue-100) !important;
  color: var(--premium-blue-700) !important;
}

/* Default / Neutral */
.label-default,
.badge-default,
.infinity-status-scrapped {
  background-color: #E2E8F0 !important;
  color: var(--premium-text-secondary) !important;
}

/* Purple accents */
.infinity-status-in_production,
.infinity-status-delivered {
  background-color: var(--premium-purple-100) !important;
  color: var(--premium-purple-700) !important;
}

/* Invoice status specific */
.invoice-status-1,
.label[class*="status-1"] {
  background-color: var(--premium-red-100) !important;
  color: var(--premium-red-700) !important;
}

.invoice-status-2,
.label[class*="status-2"] {
  background-color: var(--premium-green-100) !important;
  color: var(--premium-green-700) !important;
}

.invoice-status-3 {
  background-color: var(--premium-orange-100) !important;
  color: var(--premium-orange-700) !important;
}

.invoice-status-5,
.label[class*="status-5"] {
  background-color: #E2E8F0 !important;
  color: var(--premium-text-secondary) !important;
}

/* ----------------------------------------------------------
   12. ALERTS - Premium Design
   ---------------------------------------------------------- */
.alert {
  border-radius: var(--premium-radius) !important;
  border: 1px solid transparent !important;
  padding: 14px 18px !important;
  font-size: 13.5px !important;
}

.alert-success {
  background-color: var(--premium-green-50) !important;
  border-color: var(--premium-green-100) !important;
  color: var(--premium-green-700) !important;
}

.alert-info {
  background-color: var(--premium-blue-50) !important;
  border-color: var(--premium-blue-100) !important;
  color: var(--premium-blue-700) !important;
}

.alert-warning {
  background-color: var(--premium-orange-50) !important;
  border-color: var(--premium-orange-100) !important;
  color: var(--premium-orange-700) !important;
}

.alert-danger {
  background-color: var(--premium-red-50) !important;
  border-color: var(--premium-red-100) !important;
  color: var(--premium-red-700) !important;
}

/* ----------------------------------------------------------
   13. MODALS - Premium Style
   ---------------------------------------------------------- */
.modal-content {
  border-radius: var(--premium-radius-lg) !important;
  border: none !important;
  box-shadow: var(--premium-shadow-lg), 0 0 0 1px rgba(0,0,0,0.05) !important;
}

.modal-header {
  background: var(--premium-card-bg) !important;
  border-bottom: 1px solid var(--premium-border) !important;
  padding: 16px 24px !important;
}

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

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

.modal-footer {
  background: var(--premium-card-bg) !important;
  border-top: 1px solid var(--premium-border) !important;
  padding: 14px 24px !important;
}

.modal-backdrop {
  background-color: #0F172A !important;
}

.modal-backdrop.in {
  opacity: 0.4 !important;
}

/* ----------------------------------------------------------
   14. TABS - Premium Navigation
   ---------------------------------------------------------- */
.nav-tabs {
  border-bottom: 2px solid var(--premium-border) !important;
}

.nav-tabs > li > a {
  border: none !important;
  border-radius: 0 !important;
  color: var(--premium-text-muted) !important;
  font-weight: 500 !important;
  font-size: 13.5px !important;
  padding: 10px 18px !important;
  transition: var(--premium-transition);
  position: relative;
}

.nav-tabs > li > a:hover {
  background: transparent !important;
  color: var(--premium-blue) !important;
  border: none !important;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:focus,
.nav-tabs > li.active > a:hover {
  border: none !important;
  color: var(--premium-blue) !important;
  font-weight: 600 !important;
  background: transparent !important;
}

.nav-tabs > li.active > a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--premium-blue);
  border-radius: 2px 2px 0 0;
}

/* Tab badge */
.nav-tabs > li > a .badge {
  margin-left: 6px;
  font-size: 11px !important;
  padding: 2px 7px !important;
}

/* ----------------------------------------------------------
   15. DROPDOWNS - Premium
   ---------------------------------------------------------- */
.dropdown-menu {
  border-radius: var(--premium-radius) !important;
  border: 1px solid var(--premium-border) !important;
  box-shadow: var(--premium-shadow-lg) !important;
  padding: 6px !important;
  margin-top: 4px !important;
}

.dropdown-menu > li > a {
  padding: 8px 14px !important;
  font-size: 13.5px !important;
  color: var(--premium-text-secondary) !important;
  border-radius: 6px !important;
  transition: var(--premium-transition);
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
  background-color: var(--premium-blue-50) !important;
  color: var(--premium-blue) !important;
}

.dropdown-menu .divider {
  margin: 4px 0 !important;
  background-color: var(--premium-border-light) !important;
}

/* ----------------------------------------------------------
   16. PROGRESS BARS
   ---------------------------------------------------------- */
.progress {
  border-radius: 20px !important;
  height: 8px !important;
  background-color: var(--premium-border-light) !important;
  box-shadow: none !important;
  overflow: hidden;
}

.progress-bar {
  border-radius: 20px !important;
  box-shadow: none !important;
}

.progress-bar-success {
  background-color: var(--premium-green) !important;
}

.progress-bar-info {
  background-color: var(--premium-blue) !important;
}

.progress-bar-warning {
  background-color: var(--premium-orange) !important;
}

.progress-bar-danger {
  background-color: var(--premium-red) !important;
}

/* ----------------------------------------------------------
   17. TOOLTIPS & POPOVERS
   ---------------------------------------------------------- */
.tooltip-inner {
  border-radius: 6px !important;
  padding: 6px 12px !important;
  font-size: 12.5px !important;
  background-color: #064e3b !important;
}

.popover {
  border-radius: var(--premium-radius) !important;
  border: 1px solid var(--premium-border) !important;
  box-shadow: var(--premium-shadow-lg) !important;
}

.popover-title {
  background: var(--premium-card-bg) !important;
  border-bottom: 1px solid var(--premium-border) !important;
  border-radius: var(--premium-radius) var(--premium-radius) 0 0 !important;
  font-weight: 600 !important;
}

/* ----------------------------------------------------------
   18. WELL / SECTION BLOCKS
   ---------------------------------------------------------- */
.well {
  background: var(--premium-card-bg) !important;
  border: 1px solid var(--premium-border) !important;
  border-radius: var(--premium-radius) !important;
  box-shadow: none !important;
  padding: 16px 20px !important;
}

/* ----------------------------------------------------------
   19. LIST GROUPS
   ---------------------------------------------------------- */
.list-group-item {
  border-color: var(--premium-border-light) !important;
  padding: 12px 16px !important;
  color: var(--premium-text-secondary) !important;
  transition: var(--premium-transition);
}

.list-group-item:first-child {
  border-radius: var(--premium-radius) var(--premium-radius) 0 0 !important;
}

.list-group-item:last-child {
  border-radius: 0 0 var(--premium-radius) var(--premium-radius) !important;
}

.list-group-item:hover {
  background-color: var(--premium-card-bg) !important;
}

.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus {
  background-color: var(--premium-blue) !important;
  border-color: var(--premium-blue) !important;
}

/* ----------------------------------------------------------
   20. BREADCRUMBS
   ---------------------------------------------------------- */
.breadcrumb {
  background: transparent !important;
  padding: 8px 0 !important;
  margin-bottom: 15px !important;
  font-size: 13px !important;
}

.breadcrumb > li + li:before {
  color: var(--premium-text-light) !important;
}

.breadcrumb > .active {
  color: var(--premium-text-muted) !important;
}

/* ----------------------------------------------------------
   21. CHARTS CONTAINER
   ---------------------------------------------------------- */
.chart-container,
.chart-area,
[class*="chart"] .panel-body {
  padding: 16px !important;
}

/* ----------------------------------------------------------
   22. KANBAN BOARDS (Leads, etc.)
   ---------------------------------------------------------- */
.kan-ban-content-wrapper {
  background: var(--premium-bg) !important;
}

.kan-ban-col {
  background: var(--premium-white) !important;
  border-radius: var(--premium-radius) !important;
  border: 1px solid var(--premium-border) !important;
  box-shadow: var(--premium-shadow) !important;
}

.kan-ban-col .panel-heading {
  border-radius: var(--premium-radius) var(--premium-radius) 0 0 !important;
}

.kan-ban-col .kan-ban-content-wrapper .kan-ban-col-item {
  border-radius: var(--premium-radius-sm) !important;
  border: 1px solid var(--premium-border) !important;
  box-shadow: var(--premium-shadow) !important;
  margin: 8px !important;
  padding: 12px !important;
  background: var(--premium-white) !important;
  transition: var(--premium-transition);
}

.kan-ban-col .kan-ban-content-wrapper .kan-ban-col-item:hover {
  box-shadow: var(--premium-shadow-md) !important;
  transform: translateY(-1px);
}

/* ----------------------------------------------------------
   23. SETTINGS / SETUP PAGES
   ---------------------------------------------------------- */
.settings-group .panel_s,
.setup-group .panel_s {
  border-radius: var(--premium-radius) !important;
}

/* Toggle switches in settings */
.onoffswitch {
  min-width: 50px;
}

.onoffswitch-label {
  border-radius: 20px !important;
}

/* Settings section headings */
.settings-group h4,
.setup-group h4 {
  font-weight: 600 !important;
  color: var(--premium-text) !important;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--premium-border);
  margin-bottom: 16px !important;
}

/* ----------------------------------------------------------
   24. CLIENT PROFILE / DETAIL PAGES
   ---------------------------------------------------------- */
.client-profile-image,
.staff-profile-image {
  border-radius: 50% !important;
  border: 3px solid var(--premium-border) !important;
}

/* Profile info panels */
.client-info .panel_s,
.staff-info .panel_s {
  border-left: 4px solid var(--premium-blue) !important;
}

/* ----------------------------------------------------------
   25. SCROLLBAR - Premium Thin
   ---------------------------------------------------------- */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

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

::-webkit-scrollbar-thumb {
  background: #CBD5E1;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: #94A3B8;
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: #CBD5E1 transparent;
}

/* ----------------------------------------------------------
   26. NOTIFICATIONS DROPDOWN
   ---------------------------------------------------------- */
.dropdown-menu.notifications {
  width: 360px !important;
  border-radius: var(--premium-radius) !important;
}

.dropdown-menu.notifications li {
  padding: 10px 14px !important;
  border-bottom: 1px solid var(--premium-border-light) !important;
}

.dropdown-menu.notifications li:hover {
  background: var(--premium-card-bg) !important;
}

/* ----------------------------------------------------------
   27. INVOICE / ESTIMATE / PROPOSAL STYLING
   ---------------------------------------------------------- */
/* Invoice totals area */
.invoice-total .panel_s,
.invoice-html .panel_s {
  border-radius: var(--premium-radius) !important;
}

/* Invoice items table */
.items-table .table thead th {
  background: var(--premium-blue-50) !important;
  color: var(--premium-blue-700) !important;
}

/* Payment records */
.payment-table .table thead th {
  background: var(--premium-green-50) !important;
  color: var(--premium-green-700) !important;
}

/* ----------------------------------------------------------
   28. LEADS / PIPELINE
   ---------------------------------------------------------- */
.lead-info-heading {
  background: var(--premium-card-bg) !important;
  padding: 12px 16px !important;
  border-radius: var(--premium-radius-sm) !important;
  margin-bottom: 12px !important;
}

/* ----------------------------------------------------------
   29. PROJECT / TASK CARDS
   ---------------------------------------------------------- */
.task-card,
.project-card,
.ticket-card {
  border-radius: var(--premium-radius) !important;
  border: 1px solid var(--premium-border) !important;
  box-shadow: var(--premium-shadow) !important;
  transition: var(--premium-transition);
}

.task-card:hover,
.project-card:hover,
.ticket-card:hover {
  box-shadow: var(--premium-shadow-md) !important;
}

/* ----------------------------------------------------------
   30. TIMELINE
   ---------------------------------------------------------- */
.timeline {
  border-left: 2px solid var(--premium-border) !important;
}

.timeline-item {
  padding-left: 28px !important;
  margin-bottom: 20px !important;
  position: relative;
}

.timeline-item::before {
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  background: var(--premium-blue) !important;
  border: 2px solid var(--premium-white) !important;
  box-shadow: 0 0 0 2px var(--premium-blue) !important;
}

/* ----------------------------------------------------------
   31. EMPTY STATE
   ---------------------------------------------------------- */
.dataTables_empty,
.no-data-found,
.empty-state {
  color: var(--premium-text-muted) !important;
  font-style: normal !important;
  padding: 40px 20px !important;
  font-size: 14px !important;
}

/* ----------------------------------------------------------
   32. LOADING STATES
   ---------------------------------------------------------- */
.dt-table-loading.table,
.table-loading {
  opacity: 0.6;
}

/* ----------------------------------------------------------
   33. RESPONSIVE ADJUSTMENTS
   ---------------------------------------------------------- */
@media (max-width: 768px) {
  .content {
    padding: 12px 15px !important;
  }

  .panel-body {
    padding: 14px !important;
  }

  .table > thead > tr > th,
  .table > tbody > tr > td {
    padding: 10px !important;
    font-size: 12.5px !important;
  }

  .btn {
    font-size: 12.5px !important;
    padding: 6px 12px !important;
  }

  .panel_s .panel-body.padding-10 h3 {
    font-size: 24px !important;
  }

  .modal-content {
    border-radius: var(--premium-radius) !important;
    margin: 10px !important;
  }
}

@media (max-width: 480px) {
  .content {
    padding: 10px !important;
  }

  .panel_s .panel-body.padding-10 h3 {
    font-size: 20px !important;
  }
}

/* ----------------------------------------------------------
   34. QUICK ACTION BUTTON AREA (top-right)
   ---------------------------------------------------------- */
._buttons,
.btn-bottom-toolbar,
.page-action-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

._buttons .btn,
.page-action-buttons .btn {
  border-radius: var(--premium-radius-sm) !important;
}

/* Float quick actions to top right */
.content > .row:first-child .pull-right .btn,
.content > .row:first-child .text-right .btn {
  border-radius: var(--premium-radius-sm) !important;
  margin-left: 6px;
}

/* ----------------------------------------------------------
   35. FILTER BARS
   ---------------------------------------------------------- */
.row._filters,
.row.filters,
.filter-bar,
._buttons_top {
  background: var(--premium-white) !important;
  border: 1px solid var(--premium-border) !important;
  border-radius: var(--premium-radius) !important;
  padding: 14px 18px !important;
  margin-bottom: 16px !important;
}

._filters .form-control,
.filter-bar .form-control,
._buttons_top .form-control {
  border-radius: var(--premium-radius-sm) !important;
}

/* ----------------------------------------------------------
   36. TEXT UTILITIES - Color Overrides
   ---------------------------------------------------------- */
.text-success {
  color: var(--premium-green) !important;
}

.text-danger {
  color: var(--premium-red) !important;
}

.text-warning {
  color: var(--premium-orange) !important;
}

.text-info {
  color: var(--premium-blue-light) !important;
}

.text-primary {
  color: var(--premium-blue) !important;
}

.text-muted {
  color: var(--premium-text-muted) !important;
}

/* ----------------------------------------------------------
   37. HR / DIVIDERS
   ---------------------------------------------------------- */
hr {
  border-top: 1px solid var(--premium-border) !important;
}

.hr-panel-heading,
.hr-panel-separator {
  border-color: var(--premium-border-light) !important;
}

/* ----------------------------------------------------------
   38. FOOTER
   ---------------------------------------------------------- */
#footer {
  background: var(--premium-white) !important;
  border-top: 1px solid var(--premium-border) !important;
  padding: 12px 20px !important;
  color: var(--premium-text-muted) !important;
  font-size: 12.5px !important;
}

/* ----------------------------------------------------------
   39. CALENDAR
   ---------------------------------------------------------- */
.fc {
  border-radius: var(--premium-radius) !important;
  overflow: hidden;
}

.fc-header-toolbar {
  padding: 12px 16px !important;
}

.fc-day-header {
  padding: 8px !important;
  font-weight: 600 !important;
  color: var(--premium-text-secondary) !important;
}

.fc-event {
  border-radius: 4px !important;
  padding: 2px 6px !important;
  font-size: 12px !important;
}

/* ----------------------------------------------------------
   40. SPECIFIC MODULE TWEAKS
   ---------------------------------------------------------- */

/* Dashboard Finance Overview */
.finance-overview {
  background: var(--premium-white) !important;
  border-radius: var(--premium-radius) !important;
  border: 1px solid var(--premium-border) !important;
}

/* Accounting / Reports summary boxes */
.total-column h3,
.total-column h4 {
  font-weight: 700 !important;
}

/* Warranty / Service cards */
.warranty-card,
.service-card {
  border-radius: var(--premium-radius) !important;
  border-left: 4px solid var(--premium-purple) !important;
}

/* Knowledge Base */
.kb-article .panel_s {
  border-radius: var(--premium-radius) !important;
}

.kb-group-heading {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--premium-text) !important;
}

/* Multi-Currency icons */
.currency-flag {
  border-radius: 4px !important;
}

/* Report tables */
.report-table .table thead th {
  background: var(--premium-card-bg) !important;
}

/* ----------------------------------------------------------
   41. PRINT STYLES (Keep clean for printing)
   ---------------------------------------------------------- */
@media print {
  body {
    background: #fff !important;
  }

  .panel, .panel_s {
    box-shadow: none !important;
    border: 1px solid #ddd !important;
  }

  .btn {
    box-shadow: none !important;
  }

  #menu, #header, #footer {
    display: none !important;
  }
}

/* ----------------------------------------------------------
   42. ANIMATION UTILITIES
   ---------------------------------------------------------- */
.premium-fade-in {
  animation: premiumFadeIn 0.3s ease-out;
}

@keyframes premiumFadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Subtle card entrance */
.panel_s,
.panel {
  animation: premiumFadeIn 0.25s ease-out;
}

/* ----------------------------------------------------------
   43. SELECTION / HIGHLIGHT
   ---------------------------------------------------------- */
::selection {
  background: #0d9488;
  color: #ffffff;
  text-shadow: none;
}
::-moz-selection {
  background: #0d9488;
  color: #ffffff;
  text-shadow: none;
}
input::selection,
textarea::selection,
[contenteditable]::selection {
  background: #1565c0;
  color: #ffffff;
}
input::-moz-selection,
textarea::-moz-selection,
[contenteditable]::-moz-selection {
  background: #1565c0;
  color: #ffffff;
}

/* ----------------------------------------------------------
   44. CUSTOM SCROLLABLE AREAS
   ---------------------------------------------------------- */
.table-responsive {
  border-radius: var(--premium-radius-sm) !important;
}

/* ----------------------------------------------------------
   45. INTEGRATION WITH EXISTING TAILWIND
   ---------------------------------------------------------- */
/* Ensure Tailwind tw- prefixed utilities work alongside */
.tw-bg-white {
  background-color: var(--premium-white) !important;
}

/* ----------------------------------------------------------
   END OF PREMIUM DESIGN SYSTEM
   ---------------------------------------------------------- */

/* === Sidebar User Profile Fix === */
.sidebar > div:first-child,
.sidebar .dropdown {
    background: rgba(0,0,0,0.15) !important;
    padding: 14px 12px !important;
    margin-bottom: 6px;
    border-bottom: 1px solid rgba(255,255,255,0.12) !important;
}

.sidebar .dropdown .media-body,
.sidebar .dropdown .media-body *,
.sidebar .dropdown a,
.sidebar .dropdown span,
.sidebar .dropdown .tw-text-sm,
.sidebar .dropdown .tw-text-xs,
.sidebar .dropdown .tw-truncate,
.sidebar > div:first-child a,
.sidebar > div:first-child span {
    color: #FFFFFF !important;
    opacity: 1 !important;
}

.sidebar .dropdown .tw-text-neutral-500,
.sidebar .dropdown .text-muted,
.sidebar > div:first-child .tw-text-neutral-500 {
    color: rgba(224,231,255,0.6) !important;
}

.sidebar .dropdown img,
.sidebar .dropdown .staff-profile-image {
    border: 2px solid rgba(255,255,255,0.3) !important;
    border-radius: 50% !important;
}

/* Fix: Submit button toolbar must align right */
.btn-bottom-toolbar {
  justify-content: flex-end !important;
}


/* ============================================================
   SIDEBAR UI v3.1 — SAFE SCOPED VERSION (2026-04-15)
   All rules scoped strictly under #menu to avoid touching any
   .sidebar class that may appear inside dashboard widgets.
   ============================================================ */

/* Background polish */
#menu {
  background:
    radial-gradient(1200px 400px at -100px -100px, rgba(16,185,129,0.18), transparent 60%),
    radial-gradient(900px 400px at 120% 100%, rgba(14,165,233,0.12), transparent 55%),
    linear-gradient(180deg, #011a17 0%, #022c22 45%, #064e3b 100%) !important;
  border-right: 1px solid rgba(148,163,184,0.08) !important;
}

/* User profile card — scoped ONLY inside #menu */
#menu .sidebar > div:first-child,
#menu .sidebar .dropdown {
  background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02)) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 12px !important;
  margin: 10px !important;
  padding: 12px !important;
}
#menu .sidebar .dropdown img,
#menu .sidebar .staff-profile-image {
  border: 2px solid rgba(16,185,129,0.55) !important;
}

/* Menu items */
#menu ul li a,
#menu .child-menu li a {
  padding: 9px 12px !important;
  margin: 2px 10px !important;
  border-radius: 10px !important;
  font-size: 13.25px !important;
  font-weight: 500 !important;
  color: #CBD5E1 !important;
  transition: background .18s ease, color .18s ease !important;
  border-left: 0 !important;
}

/* Icon tiles */
#menu ul li a > i:first-child,
#menu .child-menu li a > i:first-child {
  width: 26px !important;
  height: 26px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 8px !important;
  background: rgba(255,255,255,0.04) !important;
  color: #93A4BC !important;
  font-size: 13px !important;
  margin-right: 8px !important;
  vertical-align: middle;
  transition: background .18s ease, color .18s ease !important;
}

/* Hover */
#menu ul li a:hover,
#menu .child-menu li a:hover {
  background: rgba(255,255,255,0.06) !important;
  color: #F8FAFC !important;
}
#menu ul li a:hover > i:first-child,
#menu .child-menu li a:hover > i:first-child {
  background: rgba(16,185,129,0.20) !important;
  color: #C7D2FE !important;
}

/* Active */
#menu ul li.active > a,
#menu .child-menu li.active > a {
  color: #FFFFFF !important;
  background: linear-gradient(90deg, rgba(20,184,166,0.22), rgba(16,185,129,0.08) 60%, transparent) !important;
  border-left: 0 !important;
}
#menu ul li.active > a > i:first-child,
#menu .child-menu li.active > a > i:first-child {
  background: linear-gradient(135deg, #14B8A6, #10B981) !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 10px rgba(20,184,166,0.35);
}

/* Submenu */
#menu .sidebar-submenu {
  background: rgba(2,6,23,0.35) !important;
  margin: 2px 14px 6px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255,255,255,0.04) !important;
}
#menu .sidebar-submenu li a {
  padding: 7px 14px 7px 42px !important;
  margin: 1px 6px !important;
  font-size: 12.75px !important;
}

/* Section headings */
#menu .menu-heading,
#menu .sidebar-heading {
  color: #64748B !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 1.6px !important;
  text-transform: uppercase !important;
  padding: 16px 20px 6px !important;
}

/* Setup badge */
#menu ul li a .badge,
#menu ul li a .label {
  background: linear-gradient(135deg, #F59E0B, #F97316) !important;
  color: #FFFFFF !important;
  border: none !important;
  font-weight: 700 !important;
  font-size: 10.5px !important;
  padding: 2px 7px !important;
  border-radius: 999px !important;
}

/* Scrollbar inside sidebar */
#menu::-webkit-scrollbar { width: 4px; }
#menu::-webkit-scrollbar-thumb { background: rgba(148,163,184,0.25); border-radius: 10px; }
#menu::-webkit-scrollbar-thumb:hover { background: rgba(16,185,129,0.55); }
/* END SIDEBAR UI v3.1 */

/* ============================================================
   GLOBAL UI v3.1 — COSMETIC-ONLY POLISH (2026-04-15)
   Rules touch ONLY: colors, backgrounds, shadows, border-radius,
   border-color, and hover states. No padding, margin, position,
   display or layout changes. No ::before/::after injected on
   shared elements. Dropdown/select fields are NOT touched.
   ============================================================ */

/* --- Page backdrop: very soft tint, no layout --- */
body {
  background:
    radial-gradient(800px 300px at 100% -50px, rgba(16,185,129,0.05), transparent 60%),
    radial-gradient(900px 400px at 0 100%, rgba(14,165,233,0.04), transparent 60%),
    #F1F5F9 !important;
}

/* --- Top header: tint only --- */
#header {
  background: linear-gradient(180deg, #FFFFFF 0%, #FBFCFE 100%) !important;
  box-shadow: 0 1px 0 rgba(15,23,42,0.04), 0 6px 18px -12px rgba(15,23,42,0.15) !important;
}

/* --- Panels: softer shadow + hover feedback (keeps same radius as v2) --- */
.panel, .panel_s {
  border-color: #E2E8F0 !important;
  box-shadow:
    0 1px 2px rgba(15,23,42,0.04),
    0 3px 10px -4px rgba(15,23,42,0.07) !important;
  transition: box-shadow .22s ease, border-color .22s ease !important;
}
.panel:hover, .panel_s:hover {
  box-shadow:
    0 1px 2px rgba(15,23,42,0.05),
    0 10px 24px -8px rgba(15,23,42,0.12) !important;
  border-color: #CBD5E1 !important;
}
.panel-heading {
  background: linear-gradient(180deg, #FBFDFF, #F8FAFC) !important;
}

/* --- Gradient-text big numbers on KPI tiles (visual only) --- */
.panel_s .panel-body h3,
.widget .panel_s h3,
.top-stats-overview .panel_s h3 {
  background: linear-gradient(180deg, #0F172A, #334155);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* --- Tables: color-only polish --- */
.table > thead > tr > th {
  background: linear-gradient(180deg, #F8FAFC, #F1F5F9) !important;
  color: #475569 !important;
  border-bottom-color: #E2E8F0 !important;
}
.table > tbody > tr:hover > td,
table.dataTable tbody tr:hover td {
  background: linear-gradient(90deg, #F0FDFA 0%, #F5F3FF 100%) !important;
}

/* --- Buttons: gradients (only backgrounds / shadows, no size changes) --- */
.btn-primary {
  background-image: linear-gradient(135deg, #14B8A6, #10B981) !important;
  border-color: transparent !important;
  box-shadow: 0 4px 12px -4px rgba(20,184,166,0.45) !important;
}
.btn-primary:hover {
  background-image: linear-gradient(135deg, #0D9488, #059669) !important;
  box-shadow: 0 8px 18px -4px rgba(5,150,105,0.55) !important;
}
.btn-success {
  background-image: linear-gradient(135deg, #22C55E, #16A34A) !important;
  border-color: transparent !important;
  box-shadow: 0 4px 12px -4px rgba(34,197,94,0.4) !important;
}
.btn-success:hover { box-shadow: 0 8px 18px -4px rgba(22,163,74,0.5) !important; }
.btn-danger {
  background-image: linear-gradient(135deg, #EF4444, #DC2626) !important;
  border-color: transparent !important;
  box-shadow: 0 4px 12px -4px rgba(239,68,68,0.4) !important;
}
.btn-warning {
  background-image: linear-gradient(135deg, #F59E0B, #F97316) !important;
  border-color: transparent !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 12px -4px rgba(249,115,22,0.4) !important;
}
.btn-info {
  background-image: linear-gradient(135deg, #0EA5E9, #06B6D4) !important;
  border-color: transparent !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 12px -4px rgba(14,165,233,0.4) !important;
}
.btn-default:hover {
  border-color: #C7D2FE !important;
  color: #4338CA !important;
}

/* --- Badges: fuller pill shape only --- */
.label, .badge, span.label, .infinity-status {
  border-radius: 999px !important;
}

/* --- Tabs: colour the underline gradient --- */
.nav-tabs > li > a:hover,
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:focus,
.nav-tabs > li.active > a:hover {
  color: #059669 !important;
}
.nav-tabs > li.active > a::after {
  background: linear-gradient(90deg, #14B8A6, #10B981) !important;
}

/* --- Modals: deeper shadow --- */
.modal-content {
  box-shadow:
    0 10px 25px -5px rgba(15,23,42,0.20),
    0 20px 60px -10px rgba(15,23,42,0.25) !important;
}
.modal-header {
  background: linear-gradient(180deg, #FBFDFF, #F8FAFC) !important;
}

/* --- Breadcrumbs: indigo links --- */
.breadcrumb > li a { color: #10B981 !important; }

/* --- Progress bars: gradient fills --- */
.progress-bar-success { background-image: linear-gradient(90deg, #22C55E, #16A34A) !important; }
.progress-bar-info    { background-image: linear-gradient(90deg, #0EA5E9, #10B981) !important; }
.progress-bar-warning { background-image: linear-gradient(90deg, #F59E0B, #F97316) !important; }
.progress-bar-danger  { background-image: linear-gradient(90deg, #EF4444, #DC2626) !important; }

/* --- Alerts: coloured left border (border-left already present in v2) --- */
.alert-success { border-left-color: #22C55E !important; }
.alert-info    { border-left-color: #0EA5E9 !important; }
.alert-warning { border-left-color: #F59E0B !important; }
.alert-danger  { border-left-color: #EF4444 !important; }

/* --- Kanban card hover (no layout change) --- */
.kan-ban-col .kan-ban-content-wrapper .kan-ban-col-item:hover {
  box-shadow: 0 8px 20px -6px rgba(15,23,42,0.15) !important;
}

/* --- Timeline dot indigo gradient --- */
.timeline-item::before {
  background: linear-gradient(135deg, #14B8A6, #10B981) !important;
}

/* --- Notification dropdown row hover --- */
.dropdown-menu.notifications li:hover {
  background: linear-gradient(90deg, #F0FDFA, #F5F3FF) !important;
}

/* --- Focus ring on text inputs (dropdowns deliberately excluded) --- */
input.form-control:focus,
textarea.form-control:focus {
  border-color: #10B981 !important;
  box-shadow: 0 0 0 4px rgba(16,185,129,0.12) !important;
}

/* END GLOBAL UI v3.1 */

/* ============================================================
   SIDEBAR UI v3.2 — PROPERLY SCOPED (fix for .sidebar == #menu)
   ============================================================ */

/* Richer background */
#menu {
  background:
    radial-gradient(1200px 400px at -100px -100px, rgba(16,185,129,0.18), transparent 60%),
    radial-gradient(900px 400px at 120% 100%, rgba(14,165,233,0.12), transparent 55%),
    linear-gradient(180deg, #011a17 0%, #022c22 45%, #064e3b 100%) !important;
  box-shadow: 1px 0 0 rgba(255,255,255,0.02), 8px 0 24px rgba(2,6,23,0.45) !important;
}

/* User profile card — scoped to #menu only (NOT .sidebar globally) */
#menu > div:first-child,
#menu .dropdown {
  background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02)) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 12px !important;
  margin: 10px !important;
  padding: 12px !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 6px 16px rgba(0,0,0,0.25) !important;
  transition: all .25s ease;
}
#menu > div:first-child:hover,
#menu .dropdown:hover {
  border-color: rgba(16,185,129,0.35) !important;
}
#menu .dropdown img,
#menu .staff-profile-image {
  border: 2px solid rgba(16,185,129,0.55) !important;
  box-shadow: 0 0 0 3px rgba(16,185,129,0.15) !important;
}

/* Active-state gradient pill (left glow bar) */
#menu ul li.active > a,
#menu .child-menu li.active > a {
  color: #FFFFFF !important;
  background: linear-gradient(90deg, rgba(20,184,166,0.22), rgba(16,185,129,0.08) 60%, transparent) !important;
  box-shadow: inset 3px 0 0 #10B981, 0 0 10px -2px rgba(16,185,129,0.35) !important;
}

/* Hover sheen + subtle translate */
#menu ul li a:hover,
#menu .child-menu li a:hover {
  background: rgba(255,255,255,0.07) !important;
}

/* Section-heading divider accent */
#menu .menu-heading,
#menu .sidebar-heading {
  border-bottom: 1px solid rgba(148,163,184,0.08);
}

/* Submenu polish */
#menu .sidebar-submenu li.active a {
  color: #C7D2FE !important;
  background: rgba(16,185,129,0.12) !important;
  border-radius: 8px !important;
}
/* END SIDEBAR UI v3.2 */

/* ============================================================
   DASHBOARD POLISH v3.2 — Top stats + Finance overview cards
   ============================================================ */

/* --- Top quick-stats tiles: colored accent bar + hover lift --- */
.top_stats_wrapper {
  position: relative;
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 14px !important;
  box-shadow: 0 1px 2px rgba(15,23,42,0.04), 0 4px 12px -6px rgba(15,23,42,0.08) !important;
  transition: box-shadow .22s ease, border-color .22s ease, transform .22s ease;
  overflow: hidden;
}
.top_stats_wrapper::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #14B8A6, #10B981);
}
.top_stats_wrapper:hover {
  box-shadow: 0 1px 2px rgba(15,23,42,0.05), 0 12px 26px -10px rgba(15,23,42,0.18) !important;
  border-color: #C7D2FE !important;
  transform: translateY(-2px);
}

/* Color-coded accent per card */
.quick-stats-invoices .top_stats_wrapper::before {
  background: linear-gradient(90deg, #EF4444, #F97316) !important;
}
.quick-stats-invoices .top_stats_wrapper svg { color: #EF4444 !important; }

.quick-stats-leads .top_stats_wrapper::before {
  background: linear-gradient(90deg, #22C55E, #10B981) !important;
}
.quick-stats-leads .top_stats_wrapper svg { color: #10B981 !important; }

.quick-stats-projects .top_stats_wrapper::before {
  background: linear-gradient(90deg, #0D9488, #0F766E) !important;
}
.quick-stats-projects .top_stats_wrapper svg { color: #0D9488 !important; }

.quick-stats-tasks .top_stats_wrapper::before {
  background: linear-gradient(90deg, #0EA5E9, #10B981) !important;
}
.quick-stats-tasks .top_stats_wrapper svg { color: #0EA5E9 !important; }

/* Count text bolder */
.top_stats_wrapper .tw-font-semibold {
  font-size: 15px !important;
  color: #0F172A !important;
  letter-spacing: -0.02em;
}

/* Mini progress bar thicker + rounded */
.top_stats_wrapper .progress.progress-bar-mini,
.progress.progress-bar-mini {
  height: 6px !important;
  border-radius: 999px !important;
  background: #F1F5F9 !important;
  overflow: hidden;
}
.top_stats_wrapper .progress .progress-bar {
  border-radius: 999px !important;
}

/* --- Finance overview: invoice/proforma/quotation columns --- */
#finance-overview-content .text-center.mbot15,
#finance-overview-content h4 {
  font-weight: 700 !important;
  color: #0F172A !important;
  letter-spacing: -0.01em;
}

/* Progress rows inside overview: thicker rounded bars */
#finance-overview-content .progress {
  height: 8px !important;
  border-radius: 999px !important;
  background: #F1F5F9 !important;
}
#finance-overview-content .progress-bar {
  border-radius: 999px !important;
}

/* --- Outstanding/Past-Due/Paid cards --- */
dl.tw-grid .tw-border.tw-border-solid.tw-border-neutral-300\/80 {
  background: linear-gradient(180deg, #FFFFFF, #FBFDFF) !important;
  border-color: #E2E8F0 !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 2px rgba(15,23,42,0.03), 0 3px 8px -4px rgba(15,23,42,0.06) !important;
  transition: box-shadow .22s ease, transform .22s ease, border-color .22s ease;
  position: relative;
  overflow: hidden;
}
dl.tw-grid .tw-border.tw-border-solid.tw-border-neutral-300\/80:hover {
  box-shadow: 0 2px 4px rgba(15,23,42,0.04), 0 10px 20px -6px rgba(15,23,42,0.15) !important;
  transform: translateY(-1px);
}
dl.tw-grid .tw-border.tw-border-solid.tw-border-neutral-300\/80::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: #CBD5E1;
}
dl.tw-grid > div:nth-child(1)::before { background: linear-gradient(180deg, #F59E0B, #F97316) !important; }
dl.tw-grid > div:nth-child(2)::before { background: linear-gradient(180deg, #64748B, #475569) !important; }
dl.tw-grid > div:nth-child(3)::before { background: linear-gradient(180deg, #22C55E, #16A34A) !important; }

/* Bigger money numbers */
dl.tw-grid .tw-font-semibold {
  font-size: 20px !important;
  letter-spacing: -0.02em;
  color: #0F172A !important;
}
dl.tw-grid .tw-font-medium {
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
}

/* --- Dashboard tab bar (My Tasks / Projects / Reminders) --- */
.tab-content ~ .nav-tabs,
.panel_s .nav-tabs {
  background: linear-gradient(180deg, #FBFDFF, #F8FAFC);
  border-radius: 10px 10px 0 0;
  padding: 4px 8px 0 8px;
}

/* --- Branch filter pill row (All / Kuwait / India / Qatar) --- */
.dashboard-options,
.finance-overview-branch-filter {
  border-radius: 10px !important;
}

/* --- Widget panels container softer --- */
.widget.relative {
  background: transparent !important;
}

/* --- Panel titles on dashboard get subtle gradient underline --- */
.widget .panel_s > .panel-body > h4:first-child {
  padding-bottom: 10px;
  border-bottom: 2px solid transparent;
  border-image: linear-gradient(90deg, #10B981, transparent) 1;
  margin-bottom: 16px !important;
}

/* END DASHBOARD POLISH v3.2 */

/* ============================================================
   UI v4 POLISH LAYER (2026-04-15)
   Targets: list pages (Suppliers, Invoices, Proforma, Quotations,
   Margin Report). Color + spacing + card-toolbar only — no layout
   restructuring, no JS changes.
   ============================================================ */

/* --- v4.1 Page toolbar: unify "25 / Export / search" row ------ */
#wrapper .panel_s .panel-body > .dt-buttons,
#wrapper .panel_s .panel-body > .dataTables_wrapper .dataTables_length,
#wrapper .panel_s .panel-body > .dataTables_wrapper .dataTables_filter {
  margin-bottom: 14px;
}
#wrapper .dataTables_wrapper .dataTables_length select,
#wrapper .dataTables_wrapper .dataTables_filter input {
  height: 36px;
  border-radius: 10px !important;
  border: 1px solid #E2E8F0 !important;
  background: #FFFFFF !important;
  padding: 0 12px !important;
  font-size: 13px !important;
  box-shadow: 0 1px 2px rgba(15,23,42,0.04);
  transition: border-color .18s ease, box-shadow .18s ease;
}
#wrapper .dataTables_wrapper .dataTables_filter input:focus,
#wrapper .dataTables_wrapper .dataTables_length select:focus {
  border-color: #14B8A6 !important;
  box-shadow: 0 0 0 3px rgba(20,184,166,0.14) !important;
  outline: none !important;
}
#wrapper .dt-buttons .dt-button,
#wrapper .dt-buttons .btn {
  height: 36px;
  border-radius: 10px !important;
  padding: 0 14px !important;
  font-weight: 600 !important;
  font-size: 12.5px !important;
  letter-spacing: .2px;
  border: 1px solid #E2E8F0 !important;
  background: #FFFFFF !important;
  color: #334155 !important;
  box-shadow: 0 1px 2px rgba(15,23,42,0.04);
}
#wrapper .dt-buttons .dt-button:hover { background: #F8FAFC !important; color: #0F172A !important; }

/* --- v4.2 Table header: stronger hierarchy + sticky ----------- */
#wrapper .table > thead > tr > th,
#wrapper table.dataTable > thead > tr > th {
  background: linear-gradient(180deg,#F8FAFC 0%,#F1F5F9 100%) !important;
  color: #475569 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .65px !important;
  text-transform: uppercase !important;
  border-bottom: 1px solid #E2E8F0 !important;
  padding: 13px 14px !important;
  position: sticky;
  top: 0;
  z-index: 2;
}
#wrapper .table > tbody > tr > td,
#wrapper table.dataTable > tbody > tr > td {
  padding: 13px 14px !important;
  border-top: 1px solid #F1F5F9 !important;
  font-size: 13px !important;
  color: #1E293B !important;
  vertical-align: middle !important;
}
#wrapper .table-striped > tbody > tr:nth-of-type(odd) { background: #FBFCFD !important; }
#wrapper .table > tbody > tr:hover,
#wrapper table.dataTable > tbody > tr:hover {
  background: #F0FDFA !important;
  cursor: default;
  box-shadow: inset 3px 0 0 #14B8A6;
  transition: background .14s ease;
}

/* --- v4.3 Status pills: vibrant consistent system ------------- */
#wrapper .label,
#wrapper .badge,
#wrapper span.label-default {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 11px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .4px;
  text-transform: capitalize;
  line-height: 1 !important;
  box-shadow: inset 0 0 0 1px rgba(15,23,42,0.04);
}
#wrapper .label-success,
#wrapper .badge.bg-success,
#wrapper td .label[class*="Active"] {
  background: #DCFCE7 !important; color: #15803D !important;
}
#wrapper .label-warning,
#wrapper td .label[class*="Draft"] {
  background: #FEF3C7 !important; color: #B45309 !important;
}
#wrapper .label-danger,
#wrapper td .label[class*="Overdue"],
#wrapper td .label[class*="Expired"] {
  background: #FEE2E2 !important; color: #B91C1C !important;
}
#wrapper .label-info,
#wrapper td .label[class*="Sent"] {
  background: #CCFBF1 !important; color: #0F766E !important;
}
#wrapper .label-primary { background: #D1FAE5 !important; color: #6D28D9 !important; }
#wrapper .label-default { background: #F1F5F9 !important; color: #475569 !important; }

/* status pill dot */
#wrapper .label::before,
#wrapper .badge::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: .85;
  flex-shrink: 0;
}

/* --- v4.4 Stat / KPI cards (Margin Report top row) ------------ */
#wrapper .panel_stats,
#wrapper .tw-stat-card,
#wrapper ._stat-cards-wrap > div,
#wrapper .row > [class*="col-"] > .panel_s.panel-full.panel-square {
  position: relative;
  border-radius: 14px !important;
  background: #FFFFFF !important;
  border: 1px solid #F0FDFA !important;
  box-shadow: 0 1px 3px rgba(15,23,42,0.04);
  transition: transform .18s ease, box-shadow .18s ease;
}
#wrapper .panel_stats:hover,
#wrapper ._stat-cards-wrap > div:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px -10px rgba(15,23,42,0.12);
}
#wrapper .panel_stats .stat-wrapper,
#wrapper .panel_stats .panel-body {
  padding: 18px 20px !important;
}
#wrapper .panel_stats h3,
#wrapper .panel_stats .stat-num {
  font-size: 26px !important;
  font-weight: 700 !important;
  letter-spacing: -.4px;
  color: #0F172A !important;
  margin: 4px 0 2px !important;
  background: linear-gradient(90deg,#1E293B 0%,#475569 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
#wrapper .panel_stats small,
#wrapper .panel_stats .stat-label {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .8px !important;
  text-transform: uppercase !important;
  color: #64748B !important;
}

/* accent bars per card color */
#wrapper .panel_stats::before {
  content: "";
  position: absolute;
  left: 0; top: 14px; bottom: 14px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg,#14B8A6,#10B981);
}
#wrapper .panel_stats.panel_stats-green::before   { background: linear-gradient(180deg,#22C55E,#10B981); }
#wrapper .panel_stats.panel_stats-red::before     { background: linear-gradient(180deg,#EF4444,#F97316); }
#wrapper .panel_stats.panel_stats-orange::before  { background: linear-gradient(180deg,#F59E0B,#F97316); }
#wrapper .panel_stats.panel_stats-purple::before  { background: linear-gradient(180deg,#0D9488,#10B981); }

/* --- v4.5 Filter tab strip (Invoices: Unpaid/Paid/Overdue...)  */
#wrapper .invoices-top-stats a,
#wrapper ._fin-tab {
  border: 1px solid #E2E8F0 !important;
  background: #FFFFFF !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
  transition: all .18s ease;
}
#wrapper .invoices-top-stats a:hover {
  border-color: #CBD5E1 !important;
  box-shadow: 0 4px 10px -4px rgba(15,23,42,0.08);
  transform: translateY(-1px);
}
#wrapper .invoices-top-stats a.active,
#wrapper ._fin-tab.active {
  border-color: #14B8A6 !important;
  background: #F0FDFA !important;
  box-shadow: 0 0 0 3px rgba(20,184,166,0.12) !important;
}

/* --- v4.6 Pagination pills ------------------------------------ */
#wrapper .pagination > li > a,
#wrapper .pagination > li > span,
#wrapper .dataTables_paginate .paginate_button {
  min-width: 34px;
  height: 34px;
  padding: 0 12px !important;
  margin: 0 3px !important;
  border-radius: 10px !important;
  border: 1px solid #E2E8F0 !important;
  background: #FFFFFF !important;
  color: #334155 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 2px rgba(15,23,42,0.04);
}
#wrapper .pagination > li.active > a,
#wrapper .pagination > li.active > span,
#wrapper .dataTables_paginate .paginate_button.current {
  background: linear-gradient(135deg,#14B8A6 0%,#10B981 100%) !important;
  color: #FFFFFF !important;
  border-color: transparent !important;
  box-shadow: 0 4px 10px -2px rgba(20,184,166,0.45) !important;
}
#wrapper .pagination > li > a:hover,
#wrapper .dataTables_paginate .paginate_button:hover {
  background: #F8FAFC !important;
  border-color: #CBD5E1 !important;
  color: #0F172A !important;
}

/* --- v4.7 Options-column action buttons (edit / delete) ------- */
#wrapper td .btn-xs,
#wrapper td .btn-sm.tw-action-btn,
#wrapper td .dropdown-toggle.btn-danger,
#wrapper td a.btn.btn-danger {
  width: 30px; height: 30px;
  padding: 0 !important;
  border-radius: 8px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none !important;
}
#wrapper td .btn-danger {
  background: #FEE2E2 !important;
  color: #B91C1C !important;
  box-shadow: inset 0 0 0 1px #FECACA;
}
#wrapper td .btn-danger:hover {
  background: #EF4444 !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 10px -2px rgba(239,68,68,0.5);
}

/* --- v4.8 Page header ("+ Create New" / section title) -------- */
#wrapper .panel_s .panel-body > h4.no-margin,
#wrapper .panel_s .panel-body > .tw-flex > h4 {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: #0F172A !important;
  letter-spacing: -.2px;
}
#wrapper .btn-info[href*="create"],
#wrapper a.btn.btn-info[href*="new"],
#wrapper a[href*="create"].btn-primary {
  background: linear-gradient(135deg,#14B8A6 0%,#10B981 100%) !important;
  color: #FFFFFF !important;
  border: none !important;
  font-weight: 600 !important;
  letter-spacing: .2px;
  padding: 9px 16px !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 12px -3px rgba(20,184,166,0.45);
  transition: transform .15s ease, box-shadow .15s ease;
}
#wrapper .btn-info[href*="create"]:hover,
#wrapper a[href*="create"].btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px -4px rgba(20,184,166,0.55);
}

/* --- v4.9 Panel wrapper: softer card everywhere --------------- */
#wrapper .panel_s {
  border-radius: 14px !important;
  border: 1px solid #F0FDFA !important;
  box-shadow: 0 1px 3px rgba(15,23,42,0.04) !important;
  overflow: hidden;
}
#wrapper .panel_s .panel-body { padding: 20px 22px !important; }

/* --- v4.10 Amount / currency cells: tabular numbers ----------- */
#wrapper td:has(> .tw-text-right),
#wrapper td.amount,
#wrapper .text-right {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* ============================================================
   END UI v4 POLISH LAYER
   ============================================================ */

/* ============================================================
   DASHBOARD WIDGETS v4 (2026-04-15)
   Complements DASHBOARD POLISH v3.2. Targets:
   welcome block, chart cards, calendar, task/reminder widgets,
   activity timeline, leads funnel, quick actions.
   ============================================================ */

/* --- v4.D1 Welcome / greeting block --------------------------- */
#wrapper .welcome-dashboard-widget,
#wrapper ._dash-greet {
  background: linear-gradient(135deg,#14B8A6 0%,#10B981 55%,#0D9488 100%) !important;
  color: #FFFFFF !important;
  border-radius: 16px !important;
  padding: 22px 26px !important;
  border: none !important;
  box-shadow: 0 12px 28px -10px rgba(16,185,129,0.55),
              inset 0 1px 0 rgba(255,255,255,0.14);
  position: relative;
  overflow: hidden;
}
#wrapper .welcome-dashboard-widget::before {
  content: "";
  position: absolute;
  top: -40px; right: -40px;
  width: 180px; height: 180px;
  background: radial-gradient(circle, rgba(255,255,255,0.18) 0%, transparent 70%);
  pointer-events: none;
}
#wrapper .welcome-dashboard-widget h4,
#wrapper .welcome-dashboard-widget h3 {
  color: #FFFFFF !important;
  font-weight: 700 !important;
  letter-spacing: -.3px;
  margin: 0 0 4px !important;
}
#wrapper .welcome-dashboard-widget p,
#wrapper .welcome-dashboard-widget small {
  color: rgba(255,255,255,0.85) !important;
  font-size: 13px;
}

/* --- v4.D2 Chart card wrappers ------------------------------- */
#wrapper .chart,
#wrapper .flot-chart,
#wrapper canvas.chart-canvas,
#wrapper .panel_s:has(> .panel-body > canvas),
#wrapper .panel_s:has(> .panel-body > .flot-chart) {
  background: #FFFFFF;
}
#wrapper .panel_s .panel-heading,
#wrapper .panel_s ._panel-header {
  background: transparent !important;
  border-bottom: 1px solid #F1F5F9 !important;
  padding: 16px 22px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #0F172A !important;
  letter-spacing: -.1px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#wrapper .panel_s .panel-heading .panel-title,
#wrapper .panel_s ._panel-header h4 {
  font-size: 14px !important;
  font-weight: 700 !important;
  margin: 0 !important;
  color: #0F172A !important;
}
#wrapper .panel_s .panel-heading small,
#wrapper .panel_s ._panel-header small {
  font-size: 11px;
  color: #64748B;
  font-weight: 600;
  letter-spacing: .4px;
  text-transform: uppercase;
}

/* legend chips under charts */
#wrapper .legendColorBox > div {
  border-radius: 3px !important;
  overflow: hidden;
}
#wrapper .legendLabel {
  color: #475569 !important;
  font-size: 12px !important;
  padding-left: 6px !important;
}

/* --- v4.D3 Calendar widget ----------------------------------- */
#wrapper #calendar .fc-toolbar h2,
#wrapper .fc-toolbar-title {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #0F172A !important;
}
#wrapper .fc-button {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  color: #334155 !important;
  height: 32px !important;
  border-radius: 8px !important;
  padding: 0 12px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 2px rgba(15,23,42,0.04) !important;
  text-transform: capitalize !important;
}
#wrapper .fc-button:hover { background: #F8FAFC !important; border-color: #CBD5E1 !important; }
#wrapper .fc-button-active,
#wrapper .fc-button-primary:not(:disabled).fc-button-active {
  background: linear-gradient(135deg,#14B8A6,#10B981) !important;
  color: #FFFFFF !important;
  border-color: transparent !important;
  box-shadow: 0 4px 10px -2px rgba(20,184,166,0.4) !important;
}
#wrapper .fc-daygrid-day-number,
#wrapper .fc-col-header-cell-cushion {
  color: #475569 !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  padding: 6px 8px !important;
  font-size: 12px !important;
}
#wrapper .fc-day-today {
  background: #F0FDFA !important;
}
#wrapper .fc-day-today .fc-daygrid-day-number {
  color: #0F766E !important;
  font-weight: 700 !important;
}
#wrapper .fc-event,
#wrapper .fc-daygrid-event {
  border-radius: 6px !important;
  border: none !important;
  padding: 3px 6px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 2px rgba(15,23,42,0.08);
}

/* --- v4.D4 Task / Reminder / Project list items --------------- */
#wrapper ._dash-list-item,
#wrapper .panel-body ul.list-unstyled > li,
#wrapper .dashboard-panel ul > li {
  padding: 12px 14px !important;
  border-radius: 10px !important;
  border: 1px solid transparent;
  margin-bottom: 6px !important;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
#wrapper ._dash-list-item:hover,
#wrapper .panel-body ul.list-unstyled > li:hover {
  background: #F8FAFC !important;
  border-color: #E2E8F0 !important;
  transform: translateX(2px);
}

/* task/reminder priority/date meta */
#wrapper ._dash-list-item .meta,
#wrapper .panel-body ul.list-unstyled > li small {
  font-size: 11px !important;
  color: #64748B !important;
  font-weight: 500 !important;
}

/* checkbox for mark-as-done */
#wrapper ._dash-list-item input[type="checkbox"] {
  width: 16px; height: 16px;
  border: 1.5px solid #CBD5E1;
  border-radius: 5px;
  cursor: pointer;
  accent-color: #14B8A6;
}

/* --- v4.D5 Activity timeline --------------------------------- */
#wrapper .activity-feed,
#wrapper ._timeline-feed {
  position: relative;
  padding-left: 28px;
}
#wrapper .activity-feed::before,
#wrapper ._timeline-feed::before {
  content: "";
  position: absolute;
  left: 9px; top: 6px; bottom: 6px;
  width: 2px;
  background: linear-gradient(180deg,#E2E8F0 0%,#CBD5E1 100%);
  border-radius: 2px;
}
#wrapper .activity-feed .feed-item,
#wrapper ._timeline-feed li {
  position: relative;
  padding: 8px 0 16px 10px;
  font-size: 13px;
  color: #334155;
}
#wrapper .activity-feed .feed-item::before,
#wrapper ._timeline-feed li::before {
  content: "";
  position: absolute;
  left: -24px;
  top: 12px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 2px solid #10B981;
  box-shadow: 0 0 0 3px rgba(16,185,129,0.14);
}
#wrapper .activity-feed .feed-item .date,
#wrapper ._timeline-feed li .date {
  display: block;
  font-size: 11px;
  color: #94A3B8;
  margin-top: 2px;
  font-weight: 500;
}

/* --- v4.D6 Leads funnel / kanban mini-widget ------------------ */
#wrapper .leads-funnel-widget ._funnel-step,
#wrapper ._lead-status {
  border-radius: 10px !important;
  padding: 10px 14px !important;
  border: 1px solid #E2E8F0 !important;
  background: #FFFFFF !important;
  transition: all .15s ease;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
#wrapper .leads-funnel-widget ._funnel-step:hover {
  border-color: #14B8A6 !important;
  box-shadow: 0 4px 10px -3px rgba(20,184,166,0.18);
}
#wrapper .leads-funnel-widget ._funnel-count {
  background: #F0FDFA;
  color: #0F766E;
  font-weight: 700;
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 999px;
}

/* --- v4.D7 Quick actions grid -------------------------------- */
#wrapper .quick-actions,
#wrapper ._quick-actions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
}
#wrapper .quick-actions a,
#wrapper ._quick-actions-grid a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 10px;
  border-radius: 12px;
  border: 1px solid #E2E8F0;
  background: #FFFFFF;
  color: #334155 !important;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  text-decoration: none !important;
  transition: all .18s ease;
}
#wrapper .quick-actions a i,
#wrapper ._quick-actions-grid a i {
  font-size: 20px;
  color: #14B8A6;
  width: 40px; height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: linear-gradient(135deg,#F0FDFA 0%,#ECFDF5 100%);
}
#wrapper .quick-actions a:hover,
#wrapper ._quick-actions-grid a:hover {
  border-color: #14B8A6;
  transform: translateY(-2px);
  box-shadow: 0 8px 16px -6px rgba(20,184,166,0.25);
  color: #0F172A !important;
}

/* --- v4.D8 Small trend indicators (+12% / -3%) --------------- */
#wrapper ._trend-up,
#wrapper .text-success-trend {
  display: inline-flex; align-items: center; gap: 3px;
  background: #DCFCE7; color: #15803D;
  font-size: 11px; font-weight: 700;
  padding: 2px 8px; border-radius: 999px;
}
#wrapper ._trend-down,
#wrapper .text-danger-trend {
  display: inline-flex; align-items: center; gap: 3px;
  background: #FEE2E2; color: #B91C1C;
  font-size: 11px; font-weight: 700;
  padding: 2px 8px; border-radius: 999px;
}
#wrapper ._trend-up::before { content: "▲"; font-size: 9px; }
#wrapper ._trend-down::before { content: "▼"; font-size: 9px; }

/* --- v4.D9 Donut / gauge containers -------------------------- */
#wrapper .progress-donut,
#wrapper ._gauge-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px;
}
#wrapper .progress-donut canvas {
  filter: drop-shadow(0 4px 12px rgba(16,185,129,0.2));
}

/* --- v4.D10 Widget title: action link on the right ----------- */
#wrapper .panel_s .panel-heading .view-all,
#wrapper .panel_s ._panel-header a[href] {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #14B8A6 !important;
  letter-spacing: .4px;
  text-transform: uppercase;
  text-decoration: none !important;
  padding: 4px 10px;
  border-radius: 6px;
  transition: background .15s ease;
}
#wrapper .panel_s .panel-heading .view-all:hover {
  background: #F0FDFA !important;
}

/* --- v4.D11 Recent invoices / items table inside widget ------ */
#wrapper .panel_s .panel-body > .table:not(.no-widget-style) thead th {
  background: #F8FAFC !important;
  border: none !important;
  border-bottom: 1px solid #F1F5F9 !important;
  font-size: 10.5px !important;
  padding: 10px 12px !important;
}
#wrapper .panel_s .panel-body > .table tbody td {
  padding: 11px 12px !important;
  font-size: 12.5px !important;
}

/* ============================================================
   END DASHBOARD WIDGETS v4
   ============================================================ */

/* ═══════════════════════════════════════════════════════════════
   Custom Admin Header Brand — Infinity-EX
   ═══════════════════════════════════════════════════════════════ */
#header #logo .logo.logo-text {
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    font-family: 'Inter', 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    line-height: 1 !important;
    padding: 6px 14px 6px 10px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(14,165,233,0.08) 0%, rgba(13,148,136,0.10) 100%);
    border: 1px solid rgba(16,185,129,0.15);
    box-shadow: 0 1px 2px rgba(15,23,42,0.04);
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
    text-decoration: none !important;
    background-clip: padding-box;
}
#header #logo .logo.logo-text:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(16,185,129,0.18);
    background: linear-gradient(135deg, rgba(14,165,233,0.14) 0%, rgba(13,148,136,0.18) 100%);
    text-decoration: none !important;
}

/* Gradient text for the company name */
#header #logo .logo.logo-text .brand-text {
    background: linear-gradient(135deg, #0EA5E9 0%, #10B981 50%, #0D9488 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-weight: 800;
}

/* Infinity mark — animated gradient SVG */
#header #logo .logo.logo-text .brand-mark {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0EA5E9 0%, #10B981 50%, #0D9488 100%);
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(16,185,129,0.35), inset 0 1px 0 rgba(255,255,255,0.25);
    flex-shrink: 0;
    position: relative;
}
#header #logo .logo.logo-text .brand-mark svg {
    width: 20px; height: 20px; stroke: #fff; fill: none;
    stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,0.2));
}

/* Tiny accent dot + subtle pulse */
#header #logo .logo.logo-text .brand-mark::after {
    content: '';
    position: absolute; top: 3px; right: 3px;
    width: 6px; height: 6px; border-radius: 50%;
    background: #22D3EE;
    box-shadow: 0 0 0 0 rgba(34,211,238, 0.6);
    animation: brand-pulse 2.2s infinite;
}
@keyframes brand-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(34,211,238, 0.55); }
    70%  { box-shadow: 0 0 0 6px rgba(34,211,238, 0); }
    100% { box-shadow: 0 0 0 0 rgba(34,211,238, 0); }
}

/* When sidebar is collapsed, hide the wordmark, keep the infinity badge */
@media (max-width: 991px) {
    #header #logo .logo.logo-text .brand-text { display: none; }
    #header #logo .logo.logo-text { padding: 4px; border: none; background: transparent; box-shadow: none; }
}

/* --- Modal fix: cap modal-body height directly so mouse-wheel scroll works inside the dialog --- */
.modal { overflow-y: auto !important; }
.modal-dialog { margin: 30px auto !important; }
.modal-content { height: auto !important; max-height: none !important; display: block !important; overflow: visible !important; }
.modal-body { max-height: calc(100vh - 210px) !important; overflow-y: auto !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch; }
@media (max-height: 500px) { .modal-body { max-height: calc(100vh - 150px) !important; } }

/* ============================================================
   INFINITY CRM — MODERN UI ENHANCEMENTS (2026-04-21)
   ============================================================ */

/* ---------- Top-right header icon cluster ---------- */
#header .navbar-nav.navbar-right {
    background: rgba(248, 250, 252, 0.7);
    border-radius: 50px;
    padding: 4px 6px;
    margin-top: 10px !important;
    box-shadow: 0 1px 2px rgba(15,23,42,0.04), inset 0 0 0 1px rgba(15,23,42,0.04);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: inline-flex !important;
    align-items: center;
}
#header .navbar-nav.navbar-right > li {
    display: inline-flex;
    align-items: center;
}
#header .navbar-nav.navbar-right > li > a {
    transition: all .2s ease;
    border-radius: 50%;
    width: 38px;
    height: 38px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    margin: 0 1px;
    padding: 0 !important;
    position: relative;
}
#header .navbar-nav.navbar-right > li > a:hover {
    background: linear-gradient(135deg, rgba(16,185,129,0.12) 0%, rgba(13,148,136,0.12) 100%);
    transform: translateY(-1px);
}
#header .navbar-nav.navbar-right > li > a:hover svg,
#header .navbar-nav.navbar-right > li > a:hover i {
    color: #10b981 !important;
}
/* Settings item with label — keep wider */
#header .navbar-nav.navbar-right > li:has(svg + span),
#header .navbar-nav.navbar-right > li > a:has(> span.tw-flex) {
    width: auto;
}
#header .navbar-nav.navbar-right > li > a > span.tw-flex {
    padding: 0 10px;
}

/* ---------- Notification bell badge better placement ---------- */
#header .notifications-wrapper .badge,
#header .header-todo .badge {
    box-shadow: 0 0 0 2px #fff;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    line-height: 14px;
    font-size: 10px;
}

/* ---------- Sidebar user profile pill ---------- */
.sidebar-user-profile .profile {
    border-radius: 14px !important;
    transition: all .25s ease;
}
.sidebar-user-profile .profile:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px -4px rgba(15,23,42,0.15) !important;
}

/* ---------- Sidebar profile dropdown menu ---------- */
.sidebar-user-profile .dropdown-menu {
    border-radius: 14px !important;
    border: 1px solid rgba(15,23,42,0.06) !important;
    box-shadow: 0 24px 48px -12px rgba(15,23,42,0.35) !important;
    padding: 8px !important;
    margin-top: 10px !important;
    overflow: hidden;
}
.sidebar-user-profile .dropdown-menu > li > a {
    padding: 11px 14px !important;
    border-radius: 10px !important;
    font-weight: 500;
    color: #475569 !important;
    transition: all .15s ease;
    display: flex !important;
    align-items: center;
    gap: 12px;
    font-size: 14px;
}
.sidebar-user-profile .dropdown-menu > li > a::before {
    font-family: 'FontAwesome';
    font-size: 15px;
    color: #94a3b8;
    width: 18px;
    text-align: center;
    transition: color .15s ease;
}
.sidebar-user-profile .dropdown-menu > li.header-my-profile > a::before   { content: '\f007'; }
.sidebar-user-profile .dropdown-menu > li.header-edit-profile > a::before { content: '\f044'; }
.sidebar-user-profile .dropdown-menu > li.header-logout > a::before       { content: '\f08b'; color: #ef4444; }
.sidebar-user-profile .dropdown-menu > li > a:hover {
    background: linear-gradient(135deg, #10b981 0%, #0d9488 100%) !important;
    color: #fff !important;
}
.sidebar-user-profile .dropdown-menu > li > a:hover::before {
    color: #fff !important;
}
.sidebar-user-profile .dropdown-menu > li.header-logout > a:hover {
    background: linear-gradient(135deg, #ef4444 0%, #f97316 100%) !important;
}

/* ---------- Sidebar menu items — smoother with active glow ---------- */
#side-menu > li > a {
    border-radius: 10px;
    margin: 3px 10px;
    transition: all .2s ease;
    padding: 11px 14px !important;
}
#side-menu > li > a:hover {
    background: rgba(255,255,255,0.06);
    transform: translateX(2px);
}
#side-menu > li.active > a,
#side-menu > li > a.active,
#side-menu li.active > a {
    background: linear-gradient(135deg, rgba(16,185,129,0.22) 0%, rgba(13,148,136,0.22) 100%) !important;
    box-shadow: inset 3px 0 0 #0d9488, 0 4px 14px -4px rgba(13,148,136,0.35);
    color: #fff !important;
}
#side-menu > li > a > .menu-icon {
    font-size: 15px;
    margin-right: 10px;
    width: 18px;
    text-align: center;
    transition: transform .2s ease;
}
#side-menu > li > a:hover > .menu-icon {
    transform: scale(1.1);
}

/* ============== SUB-MENU — clear visual hierarchy ============== */
/* Container — distinct background + rounded indented box anchored to parent */
#side-menu .nav-second-level {
    position: relative;
    margin: 4px 12px 8px 12px;
    padding: 6px 0 6px 0;
    background: rgba(0,0,0,0.18);
    border-radius: 10px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
/* Vertical rail that ties all children to the parent visually */
#side-menu .nav-second-level::before {
    content: "";
    position: absolute;
    top: 8px; bottom: 8px;
    left: 22px;
    width: 2px;
    background: linear-gradient(180deg,
        rgba(13,148,136,0.55) 0%,
        rgba(16,185,129,0.45) 50%,
        rgba(16,185,129,0.10) 100%);
    border-radius: 2px;
    pointer-events: none;
}
/* Submenu rows — smaller, lighter, indented past the rail */
#side-menu .nav-second-level > li > a {
    position: relative;
    border-radius: 8px;
    margin: 1px 8px 1px 30px;
    padding: 7px 12px 7px 14px !important;
    font-size: 13px;
    font-weight: 500;
    color: rgba(255,255,255,0.72) !important;
    transition: background .15s ease, color .15s ease, transform .15s ease, padding-left .15s ease;
}
/* Connector dot from the rail to each item */
#side-menu .nav-second-level > li > a::before {
    content: "";
    position: absolute;
    left: -10px;
    top: 50%;
    width: 8px;
    height: 1.5px;
    background: rgba(13,148,136,0.45);
    transform: translateY(-50%);
    transition: background .15s ease, width .15s ease;
}
/* Hide the original ★ — replace with a styled bullet */
#side-menu .nav-second-level .submenu-star {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(13,148,136,0.55);
    color: transparent !important;
    margin-right: 10px;
    margin-left: -2px;
    vertical-align: middle;
    overflow: hidden;
    text-indent: -9999px;
    transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
    flex-shrink: 0;
}
#side-menu .nav-second-level > li > a:hover {
    background: rgba(13,148,136,0.14);
    color: #fff !important;
    transform: translateX(2px);
}
#side-menu .nav-second-level > li > a:hover::before {
    background: #0d9488;
    width: 12px;
}
#side-menu .nav-second-level > li > a:hover .submenu-star {
    background: #0d9488;
    transform: scale(1.2);
    box-shadow: 0 0 0 3px rgba(13,148,136,0.18);
}
/* Active sub-item — clear "you are here" treatment */
#side-menu .nav-second-level > li.active > a,
#side-menu .nav-second-level > li > a.active {
    background: linear-gradient(135deg, rgba(13,148,136,0.28), rgba(16,185,129,0.20)) !important;
    color: #fff !important;
    box-shadow: inset 0 0 0 1px rgba(13,148,136,0.30);
}
#side-menu .nav-second-level > li.active > a::before,
#side-menu .nav-second-level > li > a.active::before {
    background: #a78bfa;
    width: 12px;
    height: 2.5px;
    box-shadow: 0 0 8px rgba(13,148,136,0.6);
}
#side-menu .nav-second-level > li.active > a .submenu-star,
#side-menu .nav-second-level > li > a.active .submenu-star {
    background: #a78bfa;
    box-shadow: 0 0 0 3px rgba(13,148,136,0.25), 0 0 8px rgba(167,139,250,0.6);
}

/* Parent that is expanded — show it owns the open submenu */
#side-menu > li.active > a,
#side-menu > li > a[aria-expanded="true"] {
    background: linear-gradient(135deg, rgba(16,185,129,0.18) 0%, rgba(13,148,136,0.18) 100%) !important;
    box-shadow: inset 3px 0 0 #0d9488;
}
#side-menu > li > a[aria-expanded="true"] .arrow {
    transform: rotate(90deg);
    color: #a78bfa;
}
#side-menu > li > a .arrow {
    transition: transform .2s ease, color .2s ease;
}

/* Slide-in animation for opened submenu */
#side-menu .nav-second-level.in,
#side-menu .nav-second-level.collapsing {
    animation: side-submenu-in .22s ease-out;
}
@keyframes side-submenu-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Light sidebar variant — adjust contrast */
.sidebar-light #side-menu .nav-second-level,
body[data-sidebar="light"] #side-menu .nav-second-level {
    background: rgba(15,23,42,0.04);
}
.sidebar-light #side-menu .nav-second-level > li > a,
body[data-sidebar="light"] #side-menu .nav-second-level > li > a {
    color: rgba(15,23,42,0.70) !important;
}
.sidebar-light #side-menu .nav-second-level > li > a:hover,
body[data-sidebar="light"] #side-menu .nav-second-level > li > a:hover {
    color: #022c22 !important;
    background: rgba(16,185,129,0.10);
}

/* ---------- Dashboard top stats cards ---------- */
.top_stats_wrapper {
    transition: transform .25s ease, box-shadow .25s ease;
    border-radius: 14px;
    padding: 18px 18px 14px !important;
    background: #fff;
    border: 1px solid rgba(15,23,42,0.06);
    box-shadow: 0 1px 3px rgba(15,23,42,0.04);
}
.quick-stats-invoices .top_stats_wrapper:hover,
.quick-stats-leads .top_stats_wrapper:hover,
.quick-stats-open-quotations .top_stats_wrapper:hover,
.quick-stats-new-inquiries .top_stats_wrapper:hover,
.quick-stats-active-shipments .top_stats_wrapper:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px -10px rgba(15,23,42,0.14);
}
.quick-stats-new-inquiries a,
.quick-stats-new-inquiries a:hover,
.quick-stats-new-inquiries a:focus {
    text-decoration: none !important;
    color: inherit !important;
}

/* Colored accent bars on top stat cards */
.quick-stats-invoices        .top_stats_wrapper { border-top: 3px solid #f97316; }
.quick-stats-leads           .top_stats_wrapper { border-top: 3px solid #10b981; }
.quick-stats-open-quotations .top_stats_wrapper { border-top: 3px solid #f59e0b; }
.quick-stats-new-inquiries   .top_stats_wrapper { border-top: 3px solid #10b981; }

/* ---------- Dashboard widgets generally ---------- */
.widget .panel_s {
    border-radius: 14px !important;
    border: 1px solid rgba(15,23,42,0.06);
    box-shadow: 0 1px 3px rgba(15,23,42,0.04);
    transition: box-shadow .25s ease;
}
.widget .panel_s:hover {
    box-shadow: 0 6px 20px -6px rgba(15,23,42,0.10);
}

/* Operations Snapshot inner cards lift on hover */
.todo-panel ul.list-unstyled > li {
    transition: all .2s ease;
}
.todo-panel ul.list-unstyled > li:hover {
    transform: translateX(2px);
    box-shadow: 0 2px 8px rgba(15,23,42,0.08);
    border-color: rgba(16,185,129,0.3) !important;
}

/* ---------- Header search bar ---------- */
#top_search input[type="search"] {
    border-radius: 14px !important;
    transition: all .2s ease;
    border: 1px solid transparent !important;
}
#top_search input[type="search"]:focus {
    background: #fff !important;
    box-shadow: 0 0 0 3px rgba(16,185,129,0.15) !important;
    border-color: rgba(16,185,129,0.4) !important;
}

/* ---------- Quick create + button ---------- */
#header .tw-rounded-full.tw-bg-primary-600 {
    background: linear-gradient(135deg, #10b981 0%, #0d9488 100%) !important;
    box-shadow: 0 4px 12px -2px rgba(16,185,129,0.45);
    transition: all .2s ease;
}
#header .tw-rounded-full.tw-bg-primary-600:hover {
    transform: translateY(-1px) scale(1.05);
    box-shadow: 0 6px 16px -2px rgba(16,185,129,0.55);
}

/* ---------- Setup menu badge ---------- */
#setup-menu-item .menu-badge,
.menu-item-setup .menu-badge {
    border-radius: 50%;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.15);
    font-weight: 700;
}

/* ---------- Page background softer ---------- */
body.dashboard {
    background: linear-gradient(180deg, #f8fafc 0%, #ecfdf5 100%) !important;
}

/* ---------- Global smooth transitions ---------- */
.btn, .label, .dropdown-toggle {
    transition: all .15s ease !important;
}
.btn:hover {
    transform: translateY(-1px);
}

/* ---------- Dashboard Options pill ---------- */
[class*="dashboard-options"] a,
.dashboard-options-btn {
    border-radius: 30px !important;
    padding: 6px 14px !important;
    transition: all .2s ease;
}

/* ---------- Responsive: on mobile keep icons clean ---------- */
@media (max-width: 991px) {
    #header .navbar-nav.navbar-right {
        background: transparent;
        box-shadow: none;
        padding: 0;
    }
}

/* ============================================================
   MODERN SEARCH BOX & QUICK CREATE MENU
   ============================================================ */

/* Search — gradient border, shadow, keyboard shortcut hint */
.infinity-search {
    position: relative;
}
.infinity-search-input {
    height: 42px !important;
    padding: 0 90px 0 42px !important;
    border-radius: 14px !important;
    border: 1px solid transparent !important;
    background: linear-gradient(#fff, #fff) padding-box,
                linear-gradient(135deg, rgba(16,185,129,0.25), rgba(13,148,136,0.25)) border-box !important;
    box-shadow: 0 1px 3px rgba(15,23,42,0.06), inset 0 0 0 1px rgba(15,23,42,0.02) !important;
    color: #1e293b !important;
    font-size: 14px;
    transition: all .2s ease !important;
}
.infinity-search-input::placeholder {
    color: #94a3b8 !important;
    font-weight: 400;
}
.infinity-search-input:focus,
.infinity-search-input:hover {
    background: linear-gradient(#fff, #fff) padding-box,
                linear-gradient(135deg, #10b981, #0d9488) border-box !important;
    box-shadow: 0 4px 16px -4px rgba(16,185,129,0.3), 0 0 0 4px rgba(16,185,129,0.08) !important;
    outline: none !important;
}
.infinity-search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #10b981;
    font-size: 14px;
    pointer-events: none;
    margin-top: 4px;
}
.infinity-search-input:focus ~ .infinity-search-icon {
    color: #059669;
}
.infinity-search-kbd {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    margin-top: 4px;
    display: inline-flex;
    gap: 2px;
    pointer-events: none;
}
.infinity-search-kbd span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 5px;
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 5px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    box-shadow: 0 1px 0 #cbd5e1;
}
@media (max-width: 767px) {
    .infinity-search-kbd { display: none; }
    .infinity-search-input { padding-right: 16px !important; }
}

/* ---------- Quick Create button (+) ---------- */
.infinity-qc-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, #10b981 0%, #0d9488 50%, #ec4899 100%) !important;
    color: #fff !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 14px -2px rgba(13,148,136,0.5), inset 0 1px 0 rgba(255,255,255,0.25);
    transition: all .25s ease;
    margin-top: 6px;
}
.infinity-quick-create > a:hover .infinity-qc-btn,
.infinity-quick-create.open .infinity-qc-btn {
    transform: translateY(-1px) rotate(90deg);
    box-shadow: 0 6px 20px -2px rgba(13,148,136,0.6);
}

/* ---------- Quick Create dropdown menu ---------- */
.infinity-qc-menu {
    min-width: 260px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(15,23,42,0.06) !important;
    box-shadow: 0 20px 50px -10px rgba(15,23,42,0.25), 0 0 0 1px rgba(15,23,42,0.03) !important;
    padding: 10px !important;
    margin-top: 12px !important;
    background: linear-gradient(180deg, #fff 0%, #fafaff 100%) !important;
}
.infinity-qc-header {
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #0d9488 !important;
    padding: 6px 12px 10px !important;
    border-bottom: 1px solid rgba(15,23,42,0.06);
    margin-bottom: 6px !important;
}
.infinity-qc-header .fa-bolt {
    color: #f59e0b;
    margin-right: 4px;
}
.infinity-qc-item > a {
    display: flex !important;
    align-items: center;
    gap: 12px;
    padding: 10px 12px !important;
    border-radius: 10px !important;
    font-weight: 500;
    font-size: 14px;
    color: #334155 !important;
    transition: all .15s ease;
}
.infinity-qc-item > a:hover,
.infinity-qc-item > a:focus {
    background: linear-gradient(135deg, rgba(16,185,129,0.08) 0%, rgba(13,148,136,0.08) 100%) !important;
    color: #059669 !important;
    padding-left: 16px !important;
}
.infinity-qc-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px !important;
    height: 34px !important;
    border-radius: 10px;
    background: #f1f5f9;
    color: #64748b !important;
    font-size: 15px !important;
    transition: all .15s ease;
    flex-shrink: 0;
}
.infinity-qc-item > a:hover .infinity-qc-icon {
    background: linear-gradient(135deg, #10b981 0%, #0d9488 100%);
    color: #fff !important;
    transform: scale(1.08);
}

/* ============================================================
   FIX: Sidebar profile dropdown font color (was too faint)
   ============================================================ */
.sidebar-user-profile .dropdown-menu {
    background: #ffffff !important;
}
.sidebar-user-profile .dropdown-menu > li > a,
.sidebar-user-profile .dropdown-menu > li > a:link,
.sidebar-user-profile .dropdown-menu > li > a:visited {
    color: #1e293b !important;
    font-weight: 600 !important;
    text-shadow: none !important;
    opacity: 1 !important;
}
.sidebar-user-profile .dropdown-menu > li > a::before {
    color: #10b981 !important;
    opacity: 1 !important;
}
.sidebar-user-profile .dropdown-menu > li.header-logout > a {
    color: #ef4444 !important;
}
.sidebar-user-profile .dropdown-menu > li.header-logout > a::before {
    color: #ef4444 !important;
}
.sidebar-user-profile .dropdown-menu > li > a:hover,
.sidebar-user-profile .dropdown-menu > li > a:focus {
    color: #ffffff !important;
}
.sidebar-user-profile .dropdown-menu > li > a:hover::before,
.sidebar-user-profile .dropdown-menu > li > a:focus::before {
    color: #ffffff !important;
}

/* ============================================================
   OPERATIONS SNAPSHOT WIDGET — MODERN REDESIGN
   ============================================================ */
.infinity-ops-widget .panel_s {
    background: linear-gradient(180deg, #ffffff 0%, #fafbff 100%);
    border-radius: 16px !important;
}
.infinity-ops-widget .panel-body {
    padding: 18px !important;
}

/* Widget header */
.ops-widget-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 4px 14px;
    border-bottom: 1px solid rgba(15,23,42,0.06);
    margin-bottom: 16px;
}
.ops-widget-title {
    display: flex;
    align-items: center;
    gap: 10px;
}
.ops-title-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: linear-gradient(135deg, #10b981 0%, #0d9488 100%);
    color: #fff;
    font-size: 14px;
    box-shadow: 0 4px 12px -2px rgba(16,185,129,0.4);
}
.ops-title-text {
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: -0.2px;
}
.ops-widget-subtitle {
    font-size: 11px;
    font-weight: 500;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Sections */
.ops-section {
    margin-bottom: 18px;
}
.ops-section.ops-section-last {
    margin-bottom: 0;
}

/* Section header */
.ops-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    padding: 8px 12px;
    border-radius: 10px;
}
.ops-section-indigo { background: linear-gradient(90deg, rgba(16,185,129,0.08), rgba(16,185,129,0.02)); }
.ops-section-red    { background: linear-gradient(90deg, rgba(239,68,68,0.08),  rgba(239,68,68,0.02));  }
.ops-section-amber  { background: linear-gradient(90deg, rgba(245,158,11,0.08), rgba(245,158,11,0.02)); }

.ops-section-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 7px;
    color: #fff;
    font-size: 11px;
    flex-shrink: 0;
}
.ops-section-indigo .ops-section-icon { background: #10b981; }
.ops-section-red    .ops-section-icon { background: #ef4444; }
.ops-section-amber  .ops-section-icon { background: #f59e0b; }

.ops-section-name {
    font-size: 13px;
    font-weight: 700;
    color: #1e293b;
    letter-spacing: -0.1px;
}
.ops-section-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: rgba(15,23,42,0.08);
    color: #475569;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
}
.ops-section-link {
    margin-left: auto;
    font-size: 11px;
    font-weight: 600;
    color: #10b981 !important;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    transition: all .15s ease;
}
.ops-section-link:hover {
    color: #059669 !important;
    transform: translateX(2px);
}
.ops-section-link .fa {
    font-size: 9px;
}

/* Empty state */
.ops-empty {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: rgba(15,23,42,0.02);
    border-radius: 10px;
    color: #64748b;
    font-size: 12px;
}
.ops-empty .fa {
    color: #10b981;
    font-size: 14px;
}

/* Row */
.ops-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    transition: all .2s ease;
    text-decoration: none !important;
    margin-bottom: 6px;
    background: #fff;
    border: 1px solid rgba(15,23,42,0.05);
}
.ops-row:last-child {
    margin-bottom: 0;
}
.ops-row:hover {
    background: #fafbff;
    border-color: rgba(16,185,129,0.3);
    transform: translateX(2px);
    box-shadow: 0 4px 12px -4px rgba(15,23,42,0.1);
    text-decoration: none !important;
}

/* Avatar circles */
.ops-row-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(15,23,42,0.08);
}
.ops-avatar-indigo { background: linear-gradient(135deg, #10b981, #0d9488); }
.ops-avatar-red    { background: linear-gradient(135deg, #ef4444, #f97316); }
.ops-avatar-initials { letter-spacing: -0.3px; }

/* Row body */
.ops-row-body {
    flex: 1;
    min-width: 0;
}
.ops-row-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #0f172a;
    margin-bottom: 3px;
}
.ops-row-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: #64748b;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.ops-row-meta .fa {
    font-size: 10px;
}
.ops-meta-sep {
    color: #cbd5e1;
}
.ops-meta-danger {
    color: #ef4444 !important;
    font-weight: 600;
}
.ops-amount-danger {
    color: #ef4444;
    font-weight: 700;
    font-size: 13px;
}

/* Pills */
.ops-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    flex-shrink: 0;
}
.ops-pill-amber {
    background: #fef3c7;
    color: #92400e;
}

/* ============================================================
   OPS WIDGET LAYOUT FIX — force flex + sizing
   ============================================================ */
.infinity-ops-widget .ops-widget-header,
.infinity-ops-widget .ops-section-header,
.infinity-ops-widget .ops-row,
.infinity-ops-widget .ops-row-title,
.infinity-ops-widget .ops-row-meta,
.infinity-ops-widget .ops-empty,
.infinity-ops-widget .ops-widget-title {
    display: flex !important;
}
.infinity-ops-widget .ops-widget-header { justify-content: space-between !important; align-items: center !important; }
.infinity-ops-widget .ops-section-header { align-items: center !important; gap: 8px !important; }
.infinity-ops-widget .ops-row { align-items: center !important; gap: 12px !important; flex-direction: row !important; }
.infinity-ops-widget .ops-row-title { justify-content: space-between !important; align-items: center !important; gap: 8px !important; }
.infinity-ops-widget .ops-row-meta { align-items: center !important; gap: 6px !important; }
.infinity-ops-widget .ops-widget-title { align-items: center !important; gap: 10px !important; }

/* Avatar MUST be fixed-size circle */
.infinity-ops-widget .ops-row-avatar {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}
.infinity-ops-widget .ops-title-icon,
.infinity-ops-widget .ops-section-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}
.infinity-ops-widget .ops-title-icon {
    width: 32px !important; height: 32px !important; min-width: 32px !important;
}
.infinity-ops-widget .ops-section-icon {
    width: 24px !important; height: 24px !important; min-width: 24px !important;
}

/* Row body takes remaining space */
.infinity-ops-widget .ops-row-body {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: block !important;
}

/* Section link pushed right */
.infinity-ops-widget .ops-section-link {
    margin-left: auto !important;
}

/* Text reset */
.infinity-ops-widget .ops-row,
.infinity-ops-widget .ops-row:hover,
.infinity-ops-widget .ops-row:focus,
.infinity-ops-widget .ops-row:link,
.infinity-ops-widget .ops-row:visited {
    text-decoration: none !important;
    color: inherit !important;
}
.infinity-ops-widget .ops-row-title { color: #0f172a !important; font-weight: 600 !important; }
.infinity-ops-widget .ops-row-meta  { color: #64748b !important; font-weight: 400 !important; }
.infinity-ops-widget .ops-section-name { color: #1e293b !important; font-weight: 700 !important; }

/* Prevent bootstrap collapse on <a>.ops-row */
.infinity-ops-widget a.ops-row { width: 100% !important; box-sizing: border-box !important; }

/* ===== Infinity Finance Overview (appended 2026-04-24) ===== */
.ifx-finance-overview .panel_s.ifx-fo-panel {
    border: none;
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 4px 16px rgba(16,24,40,.04);
    overflow: hidden;
    background: #fff;
}
.ifx-fo-panel__body { padding: 20px 22px 16px; }

.ifx-fo-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding-bottom: 16px;
    margin-bottom: 18px;
    border-bottom: 1px solid #e5f4f1;
}
.ifx-fo-header__title {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 600;
    color: #111827;
}
.ifx-fo-header__icon { width: 20px !important; height: 20px !important; color: #10b981; flex-shrink: 0; }

.ifx-fo-branches {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 4px;
    background: #f4f5f8;
    border-radius: 10px;
}
.ifx-fo-branches__pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 13px;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 500;
    color: #475467;
    text-decoration: none !important;
    transition: all .15s ease;
    white-space: nowrap;
}
.ifx-fo-branches__pill:hover { color: #111827; background: #fff; }
.ifx-fo-branches__pill.is-active {
    background: #fff;
    color: #059669;
    box-shadow: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.08);
}
.ifx-fo-branches__icon { width: 14px !important; height: 14px !important; flex-shrink: 0; }

.ifx-fo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
}

.ifx-fo-card {
    border: 1px solid #e5f4f1;
    border-radius: 12px;
    padding: 18px 18px 10px;
    background: linear-gradient(180deg,#fafbfc 0%,#fff 40%);
    transition: box-shadow .2s ease, border-color .2s ease;
}
.ifx-fo-card:hover {
    border-color: #e0e3ea;
    box-shadow: 0 2px 8px rgba(16,24,40,.05);
}
.ifx-fo-card__head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 14px;
    margin-bottom: 6px;
    border-bottom: 1px dashed #e5f4f1;
}
.ifx-fo-card__badge {
    width: 40px; height: 40px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ifx-fo-card__badge svg { width: 20px !important; height: 20px !important; }
.ifx-fo-card__badge--blue   { background: #ecfdf5; color: #059669; }
.ifx-fo-card__badge--purple { background: #f5f3ff; color: #047857; }
.ifx-fo-card__badge--amber  { background: #fff7ed; color: #ea580c; }
.ifx-fo-card__title { margin: 0; font-size: 14px; font-weight: 600; color: #111827; line-height: 1.3; }
.ifx-fo-card__subtitle { margin: 2px 0 0; font-size: 11.5px; color: #98a2b3; text-transform: uppercase; letter-spacing: .4px; }

.ifx-fo-row {
    display: grid;
    grid-template-columns: auto auto 1fr auto;
    grid-template-areas:
        "dot count label percent"
        "bar bar   bar   bar";
    gap: 4px 10px;
    align-items: center;
    padding: 10px 8px;
    margin: 0 -8px;
    border-radius: 8px;
    text-decoration: none !important;
    transition: background .12s ease;
}
.ifx-fo-row:hover { background: #f9fafb; }
.ifx-fo-row__dot  { grid-area: dot; width: 8px; height: 8px; border-radius: 50%; background: #cbd5e1; }
.ifx-fo-row__count { grid-area: count; font-size: 15px; font-weight: 700; color: #111827; min-width: 24px; }
.ifx-fo-row__label { grid-area: label; font-size: 13px; color: #475467; }
.ifx-fo-row__percent { grid-area: percent; font-size: 12px; color: #98a2b3; font-variant-numeric: tabular-nums; }
.ifx-fo-row__bar {
    grid-area: bar;
    display: block;
    height: 4px;
    background: #f1f2f5;
    border-radius: 999px;
    overflow: hidden;
    margin-top: 2px;
}
.ifx-fo-row__bar-fill {
    display: block;
    height: 100%;
    background: #94a3b8;
    border-radius: 999px;
    transition: width .6s cubic-bezier(.2,.8,.2,1);
}
.ifx-fo-row--success .ifx-fo-row__dot      { background: #10b981; }
.ifx-fo-row--success .ifx-fo-row__bar-fill { background: linear-gradient(90deg,#34d399,#10b981); }
.ifx-fo-row--success .ifx-fo-row__count    { color: #059669; }
.ifx-fo-row--danger  .ifx-fo-row__dot      { background: #ef4444; }
.ifx-fo-row--danger  .ifx-fo-row__bar-fill { background: linear-gradient(90deg,#f87171,#ef4444); }
.ifx-fo-row--danger  .ifx-fo-row__count    { color: #dc2626; }
.ifx-fo-row--warning .ifx-fo-row__dot      { background: #f59e0b; }
.ifx-fo-row--warning .ifx-fo-row__bar-fill { background: linear-gradient(90deg,#fbbf24,#f59e0b); }
.ifx-fo-row--warning .ifx-fo-row__count    { color: #d97706; }
.ifx-fo-row--info    .ifx-fo-row__dot      { background: #14b8a6; }
.ifx-fo-row--info    .ifx-fo-row__bar-fill { background: linear-gradient(90deg,#2dd4bf,#14b8a6); }
.ifx-fo-row--info    .ifx-fo-row__count    { color: #0d9488; }
.ifx-fo-row--muted   .ifx-fo-row__dot      { background: #9ca3af; }
.ifx-fo-row--muted   .ifx-fo-row__bar-fill { background: #9ca3af; }
.ifx-fo-row--default .ifx-fo-row__dot      { background: #64748b; }
.ifx-fo-row--default .ifx-fo-row__bar-fill { background: #64748b; }
.ifx-fo-totals { margin-top: 18px; padding-top: 16px; border-top: 1px solid #e5f4f1; }
@media (max-width: 768px) {
    .ifx-fo-panel__body { padding: 16px; }
    .ifx-fo-header { flex-direction: column; align-items: flex-start; }
    .ifx-fo-branches { width: 100%; overflow-x: auto; }
}

/* ============================================================
   SIDEBAR FIX — Brighten top-level items so they don't read
   as "greyed out" next to expanded submenu items.
   Fixes Service / Multi-Currency / Reports / Catalogues / Setup.
   ============================================================ */
#side-menu > li > a,
#menu #side-menu > li > a {
  color: #E2E8F0 !important;
  font-weight: 600 !important;
  opacity: 1 !important;
}

#side-menu > li > a > .menu-icon,
#side-menu > li > a > i.menu-icon,
#menu #side-menu > li > a > i:first-child {
  color: #C7D2FE !important;
  background: rgba(16,185,129,0.12) !important;
  opacity: 1 !important;
}

#side-menu > li > a > .menu-text,
#menu #side-menu > li > a > .menu-text {
  color: inherit !important;
  opacity: 1 !important;
}

/* Hover lift for top-level items */
#side-menu > li > a:hover,
#menu #side-menu > li > a:hover {
  color: #FFFFFF !important;
  background: rgba(255,255,255,0.08) !important;
}
#side-menu > li > a:hover > .menu-icon,
#side-menu > li > a:hover > i:first-child {
  background: rgba(16,185,129,0.28) !important;
  color: #FFFFFF !important;
}

/* Active state for top-level items */
#side-menu > li.active > a,
#menu #side-menu > li.active > a {
  color: #FFFFFF !important;
  background: linear-gradient(90deg, rgba(16,185,129,0.28), rgba(13,148,136,0.10) 60%, transparent) !important;
  box-shadow: inset 3px 0 0 #10B981, 0 4px 12px -4px rgba(16,185,129,0.35) !important;
}
#side-menu > li.active > a > .menu-icon,
#side-menu > li.active > a > i:first-child {
  background: linear-gradient(135deg, #10B981, #0D9488) !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 10px rgba(16,185,129,0.35) !important;
}

/* Setup item — keep its warning badge readable */
#setup-menu-item > a > .menu-text .badge,
#setup-menu-item > a > .menu-text .menu-badge {
  background: linear-gradient(135deg, #f59e0b, #ef4444) !important;
  color: #fff !important;
  font-weight: 700 !important;
  margin-left: 6px;
}

/* Arrow indicator for collapsible items */
#side-menu > li > a > .fa.arrow,
#menu #side-menu > li > a > .fa.arrow {
  color: #94A3B8 !important;
  opacity: 0.85;
  transition: transform .2s ease, color .2s ease;
}
#side-menu > li > a:hover > .fa.arrow {
  color: #E2E8F0 !important;
  opacity: 1;
}
#side-menu > li.active > a > .fa.arrow {
  color: #FFFFFF !important;
  opacity: 1;
}
/* END SIDEBAR FIX — top-level brighten */

/* ============================================================
   SIDEBAR FIX — Extend dark gradient to overflowing menu items
   The aside.sidebar is position:absolute; top:0; bottom:0 which
   locks its height to the viewport. When the Accounting submenu
   is expanded with 17 children, items past the viewport bottom
   render OUTSIDE the aside's box, sitting on the light page
   background — making them look "faded". Fix: extend aside to
   grow with its content, AND mirror the gradient on #side-menu
   as a belt-and-suspenders so the dark BG always covers items.
   ============================================================ */
#menu.sidebar,
aside#menu {
  bottom: auto !important;
  min-height: 100vh !important;
  height: auto !important;
}

#side-menu {
  background:
    radial-gradient(900px 400px at 120% 100%, rgba(14,165,233,0.10), transparent 55%),
    linear-gradient(180deg, rgba(2,44,34,0) 0%, #022c22 60px, #064e3b 100%) !important;
  padding-bottom: 24px !important;
  margin-left: -6px !important;
  margin-right: -7px !important;
  padding-left: 6px !important;
  padding-right: 7px !important;
}
/* END SIDEBAR FIX — overflow gradient */

/* ============================================================
   INFINITY UI v4 — GLOBAL DESIGN SYSTEM
   Auto-modernizes every Perfex admin page (panels, tables,
   forms, buttons, alerts, DataTables) and exposes reusable
   .ix-* utility classes (hero / kpi / status) for new pages.
   ============================================================ */

:root{
    --ix-bg:           #f5f7fb;
    --ix-card:         #ffffff;
    --ix-text:         #1f2a44;
    --ix-muted:        #6b7794;
    --ix-border:       rgba(31,42,68,.08);
    --ix-border-strong:rgba(31,42,68,.14);
    --ix-shadow:       0 12px 40px -18px rgba(31,42,68,.25);
    --ix-shadow-soft:  0 4px 14px -8px rgba(31,42,68,.18);
    --ix-shadow-xs:    0 1px 3px rgba(15,23,42,.04);
    --ix-radius:       16px;
    --ix-radius-sm:    10px;
    --ix-radius-xs:    8px;

    --ix-primary-1:    #10b981;
    --ix-primary-2:    #0d9488;
    --ix-success-1:    #10b981;
    --ix-success-2:    #34d399;
    --ix-warn-1:       #f59e0b;
    --ix-warn-2:       #f97316;
    --ix-danger-1:     #ef4444;
    --ix-danger-2:     #f97316;
    --ix-info-1:       #06b6d4;
    --ix-info-2:       #0ea5e9;
}

/* ──────────────────────────────────────────────
   GLOBAL CONTENT BACKGROUND
   ────────────────────────────────────────────── */
#wrapper > .content,
.content > .row > .col-md-12 > .panel_s:first-child {
    background: transparent;
}

/* ──────────────────────────────────────────────
   PANELS — softer, rounded, layered
   ────────────────────────────────────────────── */
.panel_s {
    border: 1px solid var(--ix-border) !important;
    border-radius: var(--ix-radius) !important;
    box-shadow: var(--ix-shadow-soft) !important;
    overflow: hidden;
    background: var(--ix-card) !important;
}
.panel_s > .panel-heading {
    background: linear-gradient(180deg, rgba(248,250,252,.6), rgba(255,255,255,0)) !important;
    border-bottom: 1px solid var(--ix-border) !important;
    padding: 16px 22px !important;
}
.panel_s > .panel-heading .panel-title,
.panel_s > .panel-heading h4 {
    font-weight: 700 !important;
    font-size: 14px !important;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--ix-text) !important;
    margin: 0;
}
.panel_s > .panel-heading h4 small,
.panel_s > .panel-heading .panel-title small {
    text-transform: none;
    letter-spacing: 0;
    color: var(--ix-muted) !important;
    font-weight: 500;
}
.panel_s > .panel-body {
    padding: 22px !important;
}
.panel_s > .panel-body.no-padding {
    padding: 0 !important;
}
.panel_s + .panel_s {
    margin-top: 18px;
}

/* h4 page titles outside panels */
#wrapper > .content > .row > .col-md-12 > h4:first-child,
#wrapper > .content > h4:first-child {
    font-weight: 700;
    color: var(--ix-text);
    margin-bottom: 18px;
}

/* ──────────────────────────────────────────────
   FORMS — consistent inputs everywhere
   ────────────────────────────────────────────── */
.form-control:not(.tw-form-control):not(.bootstrap-tagsinput input) {
    border-radius: var(--ix-radius-xs) !important;
    border: 1px solid var(--ix-border-strong) !important;
    box-shadow: none !important;
    transition: border-color .2s, box-shadow .2s !important;
    height: 40px;
    font-size: 13.5px;
    padding: 0 12px;
}
textarea.form-control { height: auto; padding: 10px 12px; min-height: 80px; }
.form-control:focus:not(.tw-form-control) {
    border-color: var(--ix-primary-1) !important;
    box-shadow: 0 0 0 3px rgba(16,185,129,.12) !important;
}
.bootstrap-select > .btn,
.bootstrap-select.btn-group .dropdown-toggle.btn {
    border-radius: var(--ix-radius-xs) !important;
    border: 1px solid var(--ix-border-strong) !important;
    height: 40px !important;
    box-shadow: none !important;
    transition: border-color .2s, box-shadow .2s !important;
    background: #fff !important;
}
.bootstrap-select.open > .btn,
.bootstrap-select > .btn:focus {
    border-color: var(--ix-primary-1) !important;
    box-shadow: 0 0 0 3px rgba(16,185,129,.12) !important;
    outline: none !important;
}
.bootstrap-select .dropdown-menu {
    border-radius: var(--ix-radius-sm) !important;
    border: 1px solid var(--ix-border) !important;
    box-shadow: var(--ix-shadow) !important;
    padding: 6px !important;
    margin-top: 4px !important;
}
.bootstrap-select .dropdown-menu li > a {
    border-radius: 6px !important;
    margin: 1px 0;
    padding: 7px 10px !important;
    transition: background .15s !important;
}
.bootstrap-select .dropdown-menu li.selected > a,
.bootstrap-select .dropdown-menu li > a:hover {
    background: rgba(16,185,129,.08) !important;
    color: var(--ix-text) !important;
}
.bootstrap-select .dropdown-menu li.selected > a {
    background: linear-gradient(135deg, rgba(16,185,129,.12), rgba(13,148,136,.10)) !important;
}

label, .control-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--ix-muted);
    margin-bottom: 6px;
}

/* checkbox/radio — keep size, just align */
.form-group .checkbox label, .form-group .radio label {
    text-transform: none; letter-spacing: 0; font-size: 13.5px; color: var(--ix-text); font-weight: 500;
}

/* ──────────────────────────────────────────────
   BUTTONS — keep Perfex semantics, modernize
   ────────────────────────────────────────────── */
.btn {
    border-radius: var(--ix-radius-xs) !important;
    font-weight: 600 !important;
    transition: transform .15s ease, box-shadow .2s ease, filter .2s ease, background-color .2s !important;
    padding: 8px 16px;
    height: 40px;
    line-height: 1.4;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.btn.btn-icon { height: 32px; width: 32px; padding: 0; justify-content: center; }
.btn.btn-sm { height: 32px; padding: 6px 12px; font-size: 12.5px; }
.btn.btn-lg { height: 46px; padding: 12px 22px; font-size: 14.5px; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary {
    background: linear-gradient(135deg, var(--ix-primary-1), var(--ix-primary-2)) !important;
    border: none !important;
    color: #fff !important;
    box-shadow: 0 6px 18px -8px rgba(16,185,129,.5) !important;
}
.btn-primary:hover, .btn-primary:focus {
    box-shadow: 0 12px 28px -10px rgba(16,185,129,.7) !important;
    filter: brightness(1.05);
    color: #fff !important;
}
.btn-success {
    background: linear-gradient(135deg, var(--ix-success-1), #059669) !important;
    border: none !important;
    color: #fff !important;
    box-shadow: 0 6px 18px -8px rgba(16,185,129,.5) !important;
}
.btn-success:hover, .btn-success:focus {
    box-shadow: 0 12px 28px -10px rgba(16,185,129,.7) !important;
    filter: brightness(1.05);
    color: #fff !important;
}
.btn-info {
    background: linear-gradient(135deg, #06b6d4, #0ea5e9) !important;
    border: none !important;
    color: #fff !important;
    box-shadow: 0 6px 18px -8px rgba(14,165,233,.5) !important;
}
.btn-info:hover, .btn-info:focus { color: #fff !important; filter: brightness(1.05); }
.btn-warning {
    background: linear-gradient(135deg, var(--ix-warn-1), var(--ix-warn-2)) !important;
    border: none !important; color: #fff !important;
}
.btn-warning:hover, .btn-warning:focus { color: #fff !important; filter: brightness(1.05); }
.btn-danger {
    background: linear-gradient(135deg, var(--ix-danger-1), var(--ix-danger-2)) !important;
    border: none !important; color: #fff !important;
    box-shadow: 0 6px 18px -8px rgba(239,68,68,.5) !important;
}
.btn-danger:hover, .btn-danger:focus { color: #fff !important; filter: brightness(1.05); }
.btn-default {
    background: #fff !important;
    color: var(--ix-text) !important;
    border: 1px solid var(--ix-border-strong) !important;
}
.btn-default:hover, .btn-default:focus {
    border-color: var(--ix-primary-1) !important;
    color: var(--ix-primary-1) !important;
    background: #fff !important;
}

/* ──────────────────────────────────────────────
   TABLES — softer rows, no harsh borders
   ────────────────────────────────────────────── */
.table > thead > tr > th {
    background: #f8fafc !important;
    color: var(--ix-muted) !important;
    font-weight: 700 !important;
    font-size: 11px !important;
    text-transform: uppercase;
    letter-spacing: .7px;
    padding: 12px 14px !important;
    border-bottom: 1px solid var(--ix-border) !important;
    border-top: none !important;
}
.table > tbody > tr > td {
    padding: 12px 14px !important;
    border-top: 1px solid #f1f4f9 !important;
    color: var(--ix-text);
    vertical-align: middle;
}
.table-hover > tbody > tr:hover > td,
.table > tbody > tr:hover > td {
    background: rgba(16,185,129,.04) !important;
}
.table-striped > tbody > tr:nth-of-type(odd) { background: transparent !important; }
.table-striped > tbody > tr:nth-of-type(odd):hover > td { background: rgba(16,185,129,.04) !important; }
.table-bordered { border: 1px solid var(--ix-border) !important; border-radius: var(--ix-radius-sm); overflow: hidden; }
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > td { border: 1px solid #f1f4f9 !important; }

/* ──────────────────────────────────────────────
   DATATABLES — rounded controls, modern paginator
   ────────────────────────────────────────────── */
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    border-radius: var(--ix-radius-xs) !important;
    border: 1px solid var(--ix-border-strong) !important;
    height: 36px;
    padding: 0 10px;
    box-shadow: none !important;
    transition: border-color .2s, box-shadow .2s;
}
.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
    outline: none;
    border-color: var(--ix-primary-1) !important;
    box-shadow: 0 0 0 3px rgba(16,185,129,.12) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: 8px !important;
    margin: 0 2px !important;
    padding: 6px 12px !important;
    border: 1px solid transparent !important;
    color: var(--ix-text) !important;
    transition: all .15s !important;
    background: transparent !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: rgba(16,185,129,.08) !important;
    color: var(--ix-primary-1) !important;
    border-color: transparent !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: linear-gradient(135deg, var(--ix-primary-1), var(--ix-primary-2)) !important;
    color: #fff !important;
    border-color: transparent !important;
    box-shadow: 0 4px 12px -4px rgba(16,185,129,.4) !important;
}
.dataTables_wrapper .dataTables_info { color: var(--ix-muted) !important; font-size: 12.5px; }

/* ──────────────────────────────────────────────
   ALERTS — modern pill notices
   ────────────────────────────────────────────── */
.alert {
    border-radius: var(--ix-radius-sm) !important;
    padding: 14px 18px !important;
    border: 1px solid transparent !important;
    font-weight: 500;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.alert-success {
    background: rgba(16,185,129,.10) !important;
    color: #047857 !important;
    border-color: rgba(16,185,129,.25) !important;
}
.alert-danger, .alert-error {
    background: rgba(239,68,68,.10) !important;
    color: #b91c1c !important;
    border-color: rgba(239,68,68,.25) !important;
}
.alert-warning {
    background: rgba(245,158,11,.10) !important;
    color: #92400e !important;
    border-color: rgba(245,158,11,.25) !important;
}
.alert-info {
    background: rgba(20,184,166,.10) !important;
    color: #115e59 !important;
    border-color: rgba(20,184,166,.25) !important;
}

/* ──────────────────────────────────────────────
   BADGES & LABELS — pill style
   ────────────────────────────────────────────── */
.label, .badge {
    border-radius: 999px !important;
    padding: 4px 10px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: .3px;
}
.label-default { background: var(--ix-bg) !important; color: var(--ix-text) !important; }
.label-success, .badge-success { background: rgba(16,185,129,.15) !important; color: #047857 !important; }
.label-danger,  .badge-danger  { background: rgba(239,68,68,.15) !important; color: #b91c1c !important; }
.label-warning, .badge-warning { background: rgba(245,158,11,.15) !important; color: #92400e !important; }
.label-info,    .badge-info    { background: rgba(20,184,166,.15) !important; color: #115e59 !important; }
.label-primary, .badge-primary { background: rgba(16,185,129,.15) !important; color: #4338ca !important; }

/* ──────────────────────────────────────────────
   MODALS — match the design system
   ────────────────────────────────────────────── */
.modal-content {
    border-radius: var(--ix-radius) !important;
    border: 1px solid var(--ix-border) !important;
    box-shadow: 0 25px 60px -20px rgba(15,23,42,.35) !important;
    overflow: hidden;
}
.modal-header {
    padding: 18px 22px !important;
    border-bottom: 1px solid var(--ix-border) !important;
    background: linear-gradient(180deg, rgba(248,250,252,.6), rgba(255,255,255,0));
}
.modal-header .modal-title { font-weight: 700; color: var(--ix-text); }
.modal-body { padding: 22px !important; }
.modal-footer { padding: 16px 22px !important; border-top: 1px solid var(--ix-border) !important; }

/* ──────────────────────────────────────────────
   TABS — pill-style pointer
   ────────────────────────────────────────────── */
.nav-tabs {
    border-bottom: 1px solid var(--ix-border) !important;
    margin-bottom: 18px;
}
.nav-tabs > li > a {
    border: none !important;
    border-radius: 0 !important;
    color: var(--ix-muted) !important;
    font-weight: 600;
    padding: 12px 18px !important;
    margin-right: 4px;
    border-bottom: 2px solid transparent !important;
    transition: color .2s, border-color .2s;
    background: transparent !important;
}
.nav-tabs > li > a:hover { color: var(--ix-text) !important; background: transparent !important; }
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    color: var(--ix-primary-1) !important;
    border-color: transparent transparent var(--ix-primary-1) transparent !important;
    background: transparent !important;
}

/* ──────────────────────────────────────────────
   PAGINATION (bootstrap)
   ────────────────────────────────────────────── */
.pagination > li > a, .pagination > li > span {
    border: 1px solid var(--ix-border-strong) !important;
    color: var(--ix-text) !important;
    margin: 0 2px;
    border-radius: 8px !important;
    transition: all .15s;
}
.pagination > li > a:hover {
    background: rgba(16,185,129,.08) !important;
    border-color: var(--ix-primary-1) !important;
    color: var(--ix-primary-1) !important;
}
.pagination > li.active > a,
.pagination > li.active > span {
    background: linear-gradient(135deg, var(--ix-primary-1), var(--ix-primary-2)) !important;
    border-color: transparent !important;
    color: #fff !important;
}

/* ============================================================
   .ix-* UTILITY CLASSES — reusable patterns for new pages
   Use these in any view to instantly get the modern look:
     <div class="ix-hero">…</div>
     <div class="ix-kpis"><div class="ix-kpi ix-kpi--info">…</div></div>
     <div class="ix-status">…</div>
     <button class="ix-btn-primary">…</button>
   ============================================================ */

.ix-shell { font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; color: var(--ix-text); }

/* HERO */
.ix-hero{
    position: relative;
    border-radius: var(--ix-radius);
    padding: 24px 28px;
    margin-bottom: 18px;
    color: #fff;
    background:
        radial-gradient(1200px 320px at 110% -10%, rgba(255,255,255,.18), transparent 60%),
        radial-gradient(900px 260px at -10% 110%, rgba(255,255,255,.10), transparent 55%),
        linear-gradient(135deg, #022c22 0%, #064e3b 30%, #10b981 100%);
    box-shadow: var(--ix-shadow);
    overflow: hidden;
}
.ix-hero::after{
    content:""; position:absolute; inset:0;
    background-image:
        linear-gradient(transparent 95%, rgba(255,255,255,.06) 95%),
        linear-gradient(90deg, transparent 95%, rgba(255,255,255,.06) 95%);
    background-size: 28px 28px; pointer-events:none; opacity:.4;
}
.ix-hero__inner{ position: relative; z-index:1; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:18px; }
.ix-hero__title{ display:flex; align-items:center; gap:14px; margin:0; font-size: 22px; font-weight: 700; color: #fff; }
.ix-hero__title small{ color: rgba(255,255,255,.7) !important; font-weight: 500; }
.ix-hero__icon{ display:inline-grid; place-items:center; width:46px; height:46px; border-radius:12px;
    background: rgba(255,255,255,.16); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); font-size: 20px; color:#fff; }
.ix-hero__sub{ margin-top: 4px; opacity:.78; font-size: 13px; font-weight: 500; }
.ix-hero__meta{ display:flex; gap:8px; flex-wrap:wrap; }
.ix-hero--green{ background: linear-gradient(135deg, #064e3b 0%, #065f46 30%, #10b981 100%); }
.ix-hero--orange{ background: linear-gradient(135deg, #7c2d12 0%, #9a3412 30%, #f97316 100%); }
.ix-hero--cyan{ background: linear-gradient(135deg, #134e4a 0%, #155e75 30%, #06b6d4 100%); }
.ix-hero--rose{ background: linear-gradient(135deg, #7f1d1d 0%, #9f1239 30%, #f43f5e 100%); }

.ix-chip{
    display:inline-flex; align-items:center; gap:8px;
    padding:8px 14px; border-radius: 999px;
    background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.18);
    font-size: 12.5px; font-weight: 600; color: #fff;
}
.ix-chip--success{ background: rgba(16,185,129,.22); border-color: rgba(16,185,129,.35); }
.ix-chip--warn   { background: rgba(245,158,11,.22); border-color: rgba(245,158,11,.35); }
.ix-chip--danger { background: rgba(239,68,68,.22); border-color: rgba(239,68,68,.35); }

/* KPI CARDS */
.ix-kpis{ display:grid; grid-template-columns: repeat(4, 1fr); gap:14px; margin-bottom: 18px; }
.ix-kpis--3{ grid-template-columns: repeat(3, 1fr); }
.ix-kpis--2{ grid-template-columns: repeat(2, 1fr); }
.ix-kpi{
    position:relative; overflow:hidden;
    background: var(--ix-card); border: 1px solid var(--ix-border);
    border-radius: var(--ix-radius); padding: 18px 22px;
    box-shadow: var(--ix-shadow-soft);
    transition: transform .25s ease, box-shadow .25s ease;
}
.ix-kpi:hover{ transform: translateY(-3px); box-shadow: var(--ix-shadow); }
.ix-kpi::before{
    content:""; position:absolute; left:0; top:0; bottom:0; width:4px;
    background: linear-gradient(180deg, var(--ix-c1, var(--ix-primary-1)), var(--ix-c2, var(--ix-primary-2)));
    border-top-left-radius: var(--ix-radius); border-bottom-left-radius: var(--ix-radius);
}
.ix-kpi__label{ font-size: 11.5px; font-weight:700; letter-spacing:.7px; text-transform: uppercase; color: var(--ix-muted); margin-bottom:8px; display:flex; align-items:center; gap:8px; }
.ix-kpi__icon{ width:30px; height:30px; border-radius:9px; display:inline-grid; place-items:center;
    background: var(--ix-c-soft, rgba(16,185,129,.10)); color: var(--ix-c1, var(--ix-primary-1)); font-size: 13px; }
.ix-kpi__value{ font-size: 22px; font-weight: 700; color: var(--ix-text); line-height:1.1; word-break: break-word; }
.ix-kpi__cur{ font-size: 12px; font-weight:600; color: var(--ix-muted); margin-left:6px; letter-spacing:.6px; }
.ix-kpi__hint{ margin-top:8px; font-size:12px; color: var(--ix-muted); }
.ix-kpi--info   { --ix-c1: var(--ix-info-1);    --ix-c2: var(--ix-info-2);    --ix-c-soft: rgba(14,165,233,.10); }
.ix-kpi--warn   { --ix-c1: var(--ix-warn-1);    --ix-c2: var(--ix-warn-2);    --ix-c-soft: rgba(245,158,11,.10); }
.ix-kpi--success{ --ix-c1: var(--ix-success-1); --ix-c2: var(--ix-success-2); --ix-c-soft: rgba(16,185,129,.10); }
.ix-kpi--danger { --ix-c1: var(--ix-danger-1);  --ix-c2: var(--ix-danger-2);  --ix-c-soft: rgba(239,68,68,.10); }
.ix-kpi--purple { --ix-c1: var(--ix-primary-2); --ix-c2: var(--ix-primary-1); --ix-c-soft: rgba(13,148,136,.10); }

/* STATUS PILL */
.ix-status{
    display:inline-flex; align-items:center; gap:10px; padding:10px 16px;
    border-radius: 12px; font-weight:600; font-size: 13px;
    background: rgba(16,185,129,.10); color: #047857; border:1px solid rgba(16,185,129,.25);
    margin-bottom: 16px;
}
.ix-status--warn { background: rgba(239,68,68,.10); color:#b91c1c; border-color: rgba(239,68,68,.25); }
.ix-status--info { background: rgba(20,184,166,.10); color:#115e59; border-color: rgba(20,184,166,.25); }
.ix-status__dot{ width:8px; height:8px; border-radius:50%; background: currentColor; box-shadow: 0 0 0 4px rgba(255,255,255,.5); animation: ix-pulse 2s infinite; }
@keyframes ix-pulse{ 0%,100%{opacity:1; transform:scale(1);} 50%{opacity:.55; transform:scale(1.18);} }

/* PANELS — explicit utility classes */
.ix-panel{
    background: var(--ix-card); border:1px solid var(--ix-border);
    border-radius: var(--ix-radius); overflow: hidden;
    box-shadow: var(--ix-shadow-soft);
    margin-bottom: 18px;
}
.ix-panel__head{
    padding: 14px 22px; display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
    border-bottom: 1px solid var(--ix-border);
    background: linear-gradient(180deg, rgba(248,250,252,.6), rgba(255,255,255,0));
}
.ix-panel__title{ margin:0; font-size: 14px; font-weight:700; letter-spacing:.4px; text-transform: uppercase; display:flex; align-items:center; gap:10px; color: var(--ix-text); }
.ix-panel__title small{ font-weight:500; color: var(--ix-muted); text-transform:none; letter-spacing:0; font-size:12.5px; }
.ix-panel__title i{ color: var(--ix-primary-1); }
.ix-panel__count{ font-size: 11px; font-weight:600; color: var(--ix-muted); background: var(--ix-bg); padding: 4px 10px; border-radius: 999px; }
.ix-panel__body{ padding: 20px 22px; }
.ix-panel__body--flush{ padding: 0; }

/* BUTTONS — explicit utilities */
.ix-btn-primary{
    background: linear-gradient(135deg, var(--ix-primary-1), var(--ix-primary-2));
    border: none; color:#fff; font-weight:600;
    border-radius: var(--ix-radius-sm); height:42px; padding: 0 22px;
    box-shadow: 0 8px 22px -10px rgba(16,185,129,.65);
    transition: transform .15s, box-shadow .2s, filter .2s;
    display:inline-flex; align-items:center; gap:8px;
}
.ix-btn-primary:hover{ transform: translateY(-1px); filter: brightness(1.05); color:#fff; box-shadow: 0 12px 28px -10px rgba(16,185,129,.75); text-decoration: none; }
.ix-btn-success{
    background: linear-gradient(135deg, var(--ix-success-1), #059669);
    border: none; color:#fff; font-weight:600;
    border-radius: var(--ix-radius-sm); height:42px; padding: 0 22px;
    box-shadow: 0 8px 22px -10px rgba(16,185,129,.65);
    transition: transform .15s, box-shadow .2s, filter .2s;
    display:inline-flex; align-items:center; gap:8px;
}
.ix-btn-success:hover{ transform: translateY(-1px); filter: brightness(1.05); color:#fff; text-decoration: none; }
.ix-btn-soft{
    background:#fff; color: var(--ix-text);
    border: 1px solid var(--ix-border-strong);
    height:38px; padding: 0 14px; border-radius: var(--ix-radius-sm);
    transition: border-color .15s, color .15s, transform .15s;
    display:inline-flex; align-items:center; gap:8px; font-weight:500; font-size:13px;
    text-decoration: none;
}
.ix-btn-soft:hover{ border-color: var(--ix-primary-1); color: var(--ix-primary-1); transform: translateY(-1px); text-decoration: none; }

/* EMPTY STATES */
.ix-empty{ text-align:center; padding: 50px 20px; color: var(--ix-muted); }
.ix-empty i{ font-size: 42px; opacity:.4; display:block; margin-bottom: 10px; }
.ix-empty h5{ color: var(--ix-text); margin: 0 0 4px; font-weight: 600; }
.ix-empty p{ margin: 0; }

/* ENTRANCE ANIMATIONS */
.ix-fade{ opacity:0; transform: translateY(8px); animation: ix-fade .55s cubic-bezier(.22,1,.36,1) forwards; }
.ix-fade-1{ animation-delay:.05s; }
.ix-fade-2{ animation-delay:.12s; }
.ix-fade-3{ animation-delay:.20s; }
.ix-fade-4{ animation-delay:.28s; }
.ix-fade-5{ animation-delay:.36s; }
@keyframes ix-fade{ to{ opacity:1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce){
    .ix-fade{ opacity:1; transform: none; animation: none; }
    .ix-status__dot{ animation: none; }
}

/* RESPONSIVE TWEAKS */
@media (max-width: 1100px){ .ix-kpis{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px){
    .ix-hero{ padding: 18px 20px; }
    .ix-hero__inner{ flex-direction: column; align-items:flex-start; }
    .ix-hero__title{ font-size: 18px; }
    .ix-kpis{ grid-template-columns: 1fr; }
    .ix-kpi__value{ font-size: 18px; }
    .panel_s > .panel-body{ padding: 16px !important; }
}

/* PRINT — sane defaults */
@media print {
    body { background: #fff !important; }
    .panel_s, .ix-panel, .ix-kpi { box-shadow: none !important; border: 1px solid #ddd !important; break-inside: avoid; }
    .ix-hero { box-shadow: none !important; }
    .ix-fade { animation: none !important; opacity: 1 !important; transform: none !important; }
    aside#menu, .navbar, .top_search, footer { display: none !important; }
    #wrapper { margin: 0 !important; padding: 0 !important; }
}

/* END INFINITY UI v4 — GLOBAL DESIGN SYSTEM */

/* ============================================================
   GREEN-TURQUOISE OVERRIDES — login & global accent unification
   Appended on port from sales.infinity-ex.com (2026-04-30)
   ============================================================ */

/* Login screen logo — applies the gradient text used in admin header */
body.login .logo.logo-text,
.login-content .logo.logo-text,
a.logo.logo-text {
    color: transparent !important;
    background: linear-gradient(135deg, #14B8A6 0%, #10B981 50%, #0D9488 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    text-decoration: none !important;
}

/* Default link color across the admin panel — replace any leftover blue */
a:not(.btn):not(.label):not(.badge):not(.logo):not(.dropdown-toggle) {
    color: #0D9488;
}
a:not(.btn):not(.label):not(.badge):not(.logo):not(.dropdown-toggle):hover {
    color: #115E59;
}

/* Bootstrap / Tailwind primary text & bg overrides */
.text-primary { color: #14B8A6 !important; }
.bg-primary   { background-color: #14B8A6 !important; }
.text-info    { color: #0D9488 !important; }
.bg-info      { background-color: #0D9488 !important; }

/* Form control focus ring */
.form-control:focus, .selectpicker:focus, .bootstrap-select.open > .dropdown-toggle {
    border-color: #14B8A6 !important;
    box-shadow: 0 0 0 3px rgba(20,184,166,0.18) !important;
}

/* Checkbox / radio accent color */
input[type=checkbox], input[type=radio] { accent-color: #14B8A6; }

/* ============================================================
   GREEN-TURQUOISE LAYOUT FIXES (2026-04-30 round 2)
   - Avatar chip in sidebar header sometimes escapes its frame
   - "Dashboard Options" floats over stat cards on tight viewports
   - Sidebar reads slate-blue at low brightness — push to dark teal
   ============================================================ */

/* Force sidebar tone away from blue at every level */
#menu,
#wrapper #menu {
    background-color: #022c22 !important;
}
#menu .sidebar-logo,
#menu .sidebar > div:first-child {
    background: linear-gradient(180deg, rgba(20,184,166,0.10), rgba(16,185,129,0.04)) !important;
}

/* Sidebar active item — solid teal stripe, not faint */
#menu ul li.active > a,
#menu .child-menu li.active > a {
    background: linear-gradient(90deg, rgba(20,184,166,0.28), rgba(16,185,129,0.10) 60%, transparent) !important;
    border-left: 3px solid #14B8A6 !important;
}

/* User avatar chip — keep inside sidebar bounds */
#menu .sidebar .dropdown,
#menu .sidebar > div:first-child {
    margin: 10px 12px !important;
    width: auto !important;
    max-width: calc(100% - 24px) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    position: relative !important;
    z-index: 1 !important;
}
#menu .sidebar .dropdown .user-display-name,
#menu .sidebar > div:first-child .user-display-name {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    max-width: 100% !important;
}

/* Dashboard Options button — keep it inside the wrapper, no overlap */
#dashboard #dashboard-customize,
.dashboard-options-toggle,
[data-target="#dashboard-options"] {
    position: relative !important;
    z-index: 5 !important;
    margin-bottom: 12px !important;
}

/* Stat cards — tighter top padding so the options dropdown lands above them cleanly */
.top-stats-overview {
    margin-top: 10px !important;
}

/* Tooltip body fully dark teal */
.tooltip-inner {
    background-color: #064e3b !important;
    color: #ECFDF5 !important;
}
.tooltip.top .tooltip-arrow,
.tooltip.bottom .tooltip-arrow,
.tooltip.left .tooltip-arrow,
.tooltip.right .tooltip-arrow {
    border-top-color: #064e3b !important;
    border-bottom-color: #064e3b !important;
    border-left-color: #064e3b !important;
    border-right-color: #064e3b !important;
}

/* Header / topbar — make sure the +new button is unmistakably teal */
#header .top-bar-icon,
header .top-bar-icon,
.top-bar-add-icon {
    background: linear-gradient(135deg, #14B8A6, #10B981) !important;
    color: #fff !important;
    box-shadow: 0 4px 10px -2px rgba(20,184,166,0.45) !important;
}

/* ============================================================
   GREEN-TURQUOISE round 3 — sidebar hides + finance widget reflow
   ============================================================ */

/* Safety net: hide Utilities / Reports menu items even if registered */
#side-menu > li.menu-item-utilities,
#side-menu > li.menu-item-reports {
    display: none !important;
}

/* Finance overview widget when inside the narrow 4-col right column
   — original markup uses 3 inline cards (col-md-4) which cramp here.
   Stack them vertically and let each card fill the column width. */
.col-md-4 .panel_stats,
[class*="right-4"] .panel_stats,
[class*="col-md-4"] #invoices-overview-row .col-md-4,
[class*="right-4"] #invoices-overview-row .col-md-4 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    margin-bottom: 10px !important;
}

/* The KWD currency / year selector pair — keep them side by side */
[class*="right-4"] .invoices-summary-currency-row,
[class*="right-4"] .invoices-summary-currency-row .col-md-6 {
    width: 50% !important;
    max-width: 50% !important;
    flex: 0 0 50% !important;
}

/* Tighter spacing in the right column finance card */
[class*="right-4"] .invoices-total-template,
[class*="right-4"] #invoices-total-row {
    padding: 8px 6px !important;
}
[class*="right-4"] .invoices-total-template .panel-stats-label,
[class*="right-4"] .invoices-total-template label.col-md-12 {
    font-size: 11px !important;
    letter-spacing: .8px !important;
    margin-bottom: 4px !important;
}
[class*="right-4"] .invoices-total-template h3,
[class*="right-4"] .invoices-total-template .stat-money {
    font-size: 18px !important;
    margin: 0 !important;
}

/* Right-4 column visual breathing room */
.col-md-4#right-4,
.col-md-4[id="right-4"],
#right-4 {
    padding-left: 12px !important;
}

/* ============================================================
   GREEN-TURQUOISE round 4 — Payment Records narrow-column polish
   ============================================================ */

/* Payment chart canvas — restrict height so it fits narrow column nicely */
[class*="right-4"] #payments .panel_s,
.col-md-4 #payments .panel_s,
#right-4 #payments .panel_s {
    min-height: 0 !important;
}

[class*="right-4"] #payment-statistics,
.col-md-4 #payment-statistics,
#right-4 #payment-statistics {
    height: 240px !important;
    max-height: 240px !important;
}

/* Compact header inside the payment widget */
[class*="right-4"] #payments .tw-flex.tw-justify-between,
.col-md-4 #payments .tw-flex.tw-justify-between,
#right-4 #payments .tw-flex.tw-justify-between {
    flex-wrap: wrap !important;
    gap: 8px !important;
}
[class*="right-4"] #payments select.selectpicker,
.col-md-4 #payments select.selectpicker {
    width: 100% !important;
}
[class*="right-4"] #payments .bootstrap-select,
.col-md-4 #payments .bootstrap-select {
    width: 100% !important;
}

/* Make the Full Report / Weekly toggles wrap below the title gracefully */
[class*="right-4"] #payments .tw-divide-x,
.col-md-4 #payments .tw-divide-x {
    width: 100% !important;
    justify-content: flex-end !important;
}

/* Finance overview now in left-8 — bring back 3-col layout for the cards */
[class*="left-8"] .home-summary > [class*="col-"],
#left-8 .home-summary > [class*="col-"] {
    /* let server-emitted col widths (col-lg-4 / col-lg-6) take effect */
    width: auto !important;
    max-width: none !important;
    flex: initial !important;
    margin-bottom: 0 !important;
}

/* Restore the OUTSTANDING/PAST DUE/PAID row so they share the row */
[class*="left-8"] #invoices-overview-row .col-md-4,
#left-8 #invoices-overview-row .col-md-4 {
    width: 33.3333% !important;
    max-width: 33.3333% !important;
    flex: 0 0 33.3333% !important;
    margin-bottom: 0 !important;
}

/* Polish the finance card headings to read teal */
.invoices-total-template .text-success { color: #10B981 !important; }
.invoices-total-template .text-warning { color: #F59E0B !important; }
.invoices-total-template .text-danger  { color: #EF4444 !important; }