/*
  =========================================
  Premium Modern Theme Overrides (Light Glass Sidebar Edition)
  =========================================
*/

:root {
  --bg-main: #f8fafc; /* Slate-50 */
  --sidebar-bg: rgba(255, 255, 255, 0.65); /* Frosted light glass */
  --sidebar-border: rgba(0, 0, 0, 0.06);
  --sidebar-item-hover: rgba(0, 0, 0, 0.035);
  --sidebar-item-active: linear-gradient(135deg, #3b82f6, #2563eb); /* Royal Blue Gradient */
  --text-sidebar: #475569; /* Slate-600 */
  --text-sidebar-active: #ffffff;
  
  --card-bg: #ffffff;
  --card-border: rgba(0, 0, 0, 0.04);
  --card-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.04), 0 2px 8px -1px rgba(0, 0, 0, 0.02);
  --card-shadow-hover: 0 4px 6px -1px rgba(0, 0, 0, 0.04), 0 10px 15px -3px rgba(0, 0, 0, 0.05);
  
  --primary-color: #2563eb;
  --primary-hover: #1d4ed8;
  
  --accent-success: #10b981;
  --accent-warning: #f59e0b;
  --accent-danger: #ef4444;
  
  --border-radius-lg: 12px;
  --border-radius-md: 8px;
}

/* Base resets & styles */
body {
  background-color: var(--bg-main) !important;
  font-family: 'Inter', sans-serif !important;
  color: #1e293b !important;
}

#wrapper {
  background-color: var(--bg-main) !important;
  padding-top: 24px !important;
}

/* Header/Topbar adjustments */
#header {
  background: rgba(255, 255, 255, 0.7) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
  box-shadow: none !important;
}

#header .navbar-nav>li>a {
  color: #475569 !important;
  font-weight: 500 !important;
  transition: color 0.2s ease !important;
}

#header .navbar-nav>li>a:hover {
  color: var(--primary-color) !important;
  background: transparent !important;
}

#header li>a.active {
  color: var(--primary-color) !important;
  background: rgba(37, 99, 235, 0.05) !important;
  border-radius: 9999px !important;
}

/* Search input adjustments */
#search_input {
  background-color: #f1f5f9 !important;
  border-radius: 9999px !important;
  border: 1px solid transparent !important;
  transition: all 0.25s ease !important;
  padding-left: 36px !important;
  width: 250px !important;
}

#search_input:focus {
  background-color: #ffffff !important;
  border-color: var(--primary-color) !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1) !important;
  width: 320px !important;
}

/* Premium Light Glass Sidebar styling */
.sidebar {
  background: var(--sidebar-bg) !important;
  backdrop-filter: blur(20px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(190%) !important;
  border-right: 1px solid var(--sidebar-border) !important;
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.02) !important;
  z-index: 100 !important;
}

#setup-menu-wrapper {
  background: #ffffff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.05) !important;
  z-index: 105 !important;
}

/* Sidebar user profile card */
.sidebar-user-profile {
  margin-top: 80px !important;
  padding: 0 10px !important;
}

.sidebar-user-profile a.profile {
  background: rgba(255, 255, 255, 0.5) !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  border-radius: var(--border-radius-md) !important;
  padding: 12px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02) !important;
  transition: all 0.2s ease !important;
  display: block !important;
}

.sidebar-user-profile a.profile:hover {
  background: rgba(255, 255, 255, 0.8) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}

.sidebar-user-profile .tw-text-neutral-700 {
  color: #0f172a !important;
  font-weight: 600 !important;
}

.sidebar-user-profile .tw-text-neutral-500 {
  color: #475569 !important;
  opacity: 0.85;
}

/* Sidebar navigation links */
.sidebar ul.nav li a {
  color: var(--text-sidebar) !important;
  font-weight: 400 !important; /* Elegant lighter weight */
  font-size: 13px !important; /* Compact size like reference */
  border-radius: var(--border-radius-md) !important;
  padding: 8px 12px !important; /* Clean padding */
  margin: 4px 10px !important;
  border: 1px solid transparent !important;
  transition: all 0.2s ease !important;
  display: flex !important;
  align-items: center !important;
}

.sidebar ul.nav li a i.menu-icon {
  color: #64748b !important;
  font-size: 15px !important;
  margin-right: 12px !important;
  display: inline-block !important;
  text-align: center !important;
  line-height: 20px !important;
  width: 20px !important;
  height: 20px !important;
  transition: all 0.2s ease !important;
}

/* Hover navigation items */
.sidebar>ul.nav>li:hover a:first-child,
.sidebar ul.nav>li>a:hover,
.sidebar ul.nav>li>a:focus {
  background: var(--sidebar-item-hover) !important;
  color: #0f172a !important;
  border: 1px solid rgba(0, 0, 0, 0.03) !important;
}

.sidebar>ul.nav>li:hover a:first-child i.menu-icon,
.sidebar ul.nav>li>a:hover i.menu-icon {
  color: #0f172a !important;
}

/* Active navigation items - ONLY target the direct child link of the active parent li */
.sidebar>ul.nav>li.active > a {
  background: var(--sidebar-item-active) !important;
  color: var(--text-sidebar-active) !important;
  border: 1px solid rgba(37, 99, 235, 0.1) !important;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25) !important;
  font-weight: 500 !important;
}

.sidebar>ul.nav>li.active > a i.menu-icon {
  color: var(--text-sidebar-active) !important;
}

/* Submenu layout styling */
.sidebar ul.nav li .nav-second-level {
  background: rgba(0, 0, 0, 0.02) !important;
  margin: 2px 10px !important;
  border-radius: var(--border-radius-md) !important;
  padding: 4px 0 !important;
}

.sidebar ul.nav li .nav-second-level li a {
  padding: 8px 12px 8px 42px !important;
  margin: 2px 6px !important;
  color: var(--text-sidebar) !important;
  font-size: 12.5px !important;
  font-weight: 400 !important;
  border-radius: 6px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.sidebar ul.nav li .nav-second-level li a:hover {
  background: rgba(0, 0, 0, 0.03) !important;
  color: #0f172a !important;
}

/* Active submenu item - ONLY the clicked sub-menu link is blue */
.sidebar ul.nav li .nav-second-level li.active > a {
  background: var(--sidebar-item-active) !important;
  color: var(--text-sidebar-active) !important;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.2) !important;
  font-weight: 500 !important;
  border: 1px solid rgba(37, 99, 235, 0.08) !important;
}

/* Sidebar arrow alignments & modern transitions */
.sidebar .arrow {
  margin-left: auto !important; /* Pushes arrow to the far right edge */
  float: none !important;
  padding-top: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  transition: transform 0.2s ease !important;
  font-size: 11px !important;
  color: #64748b !important;
}

.sidebar .fa.arrow:before {
  content: "\f107" !important; /* FontAwesome angle-down */
  font-family: "Font Awesome 5 Free", "FontAwesome" !important;
  font-weight: 900 !important;
}

.sidebar li:not(.active) > a > .arrow {
  transform: rotate(-90deg) !important; /* points left/right when collapsed */
}

.sidebar li.active > a > .arrow {
  transform: rotate(0deg) !important; /* points down when expanded */
  color: var(--text-sidebar-active) !important;
}

/* Setup cog settings menu item */
#setup-menu-item a {
  margin-top: 15px !important;
  border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
  padding-top: 15px !important;
}

/* Premium Dashboard Widgets & Cards */
.panel_s, .panel {
  border: 1px solid var(--card-border) !important;
  border-radius: var(--border-radius-lg) !important;
  box-shadow: var(--card-shadow) !important;
  background-color: var(--card-bg) !important;
  transition: box-shadow 0.25s ease, transform 0.25s ease !important;
  margin-bottom: 24px !important;
}

.panel_s:hover, .panel:hover {
  box-shadow: var(--card-shadow-hover) !important;
}

.panel_s .panel-body, .panel .panel-body {
  padding: 24px !important;
}

.panel_s .panel-heading, .panel .panel-heading {
  background-color: transparent !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04) !important;
  padding: 16px 24px !important;
  font-weight: 500 !important;
  color: #334155 !important;
  font-size: 13.5px !important;
  letter-spacing: 0.01em !important;
}

/* Metric / Quick Stats Cards styling & layout fixes */
.top_stats_wrapper {
  background: #ffffff !important;
  border: 1px solid var(--card-border) !important;
  border-radius: var(--border-radius-lg) !important;
  padding: 16px 20px !important; /* Compact padding */
  box-shadow: var(--card-shadow) !important;
  transition: all 0.25s ease !important;
  margin-bottom: 20px !important;
  min-height: 105px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}

.top_stats_wrapper:hover {
  box-shadow: var(--card-shadow-hover) !important;
  transform: translateY(-2px) !important;
}

.top_stats_wrapper span, .top_stats_wrapper div {
  font-size: 12.5px !important;
  font-weight: 400 !important;
}

.top_stats_wrapper .tw-font-semibold, 
.top_stats_wrapper .tw-font-medium {
  font-weight: 500 !important;
}

/* Finance Overview Grid Overlap Fixes */
.home-summary .row {
  margin-bottom: 8px !important;
}

.text-stats-wrapper {
  float: left !important;
  width: 60% !important;
  margin-bottom: 0 !important;
  z-index: 2;
}

.text-stats-wrapper a {
  font-size: 12px !important;
  font-weight: 450 !important;
  margin-bottom: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: block !important;
}

.progress-finance-status {
  float: right !important;
  width: 40% !important;
  margin-top: 0 !important; /* Reset default negative margin */
  margin-bottom: 12px !important;
  text-align: right !important;
  font-size: 11px !important;
  font-weight: 450 !important;
  z-index: 1;
}

.progress-finance-status .progress {
  margin-top: 4px !important;
  margin-bottom: 0 !important;
}

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

/* Progress bar modernizations */
.progress {
  background-color: #f1f5f9 !important;
  border-radius: 9999px !important;
  height: 6px !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

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

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

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

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

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

/* Button upgrades */
.btn {
  border-radius: var(--border-radius-md) !important;
  padding: 8px 16px !important;
  font-weight: 500 !important;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
  transition: all 0.2s ease !important;
}

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

.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background-color: var(--primary-hover) !important;
  border-color: var(--primary-hover) !important;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2) !important;
}

/* Badge and labels modernization */
.badge, .label {
  border-radius: 9999px !important;
  padding: 4px 10px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.025em !important;
  text-transform: uppercase !important;
}

.badge.bg-info, .label-info {
  background-color: rgba(37, 99, 235, 0.08) !important;
  color: var(--primary-color) !important;
  border: 1px solid rgba(37, 99, 235, 0.12) !important;
}

.badge.bg-success, .label-success {
  background-color: rgba(16, 185, 129, 0.08) !important;
  color: var(--accent-success) !important;
  border: 1px solid rgba(16, 185, 129, 0.12) !important;
}

.badge.bg-warning, .label-warning {
  background-color: rgba(245, 158, 11, 0.08) !important;
  color: var(--accent-warning) !important;
  border: 1px solid rgba(245, 158, 11, 0.12) !important;
}

.badge.bg-danger, .label-danger {
  background-color: rgba(239, 68, 68, 0.08) !important;
  color: var(--accent-danger) !important;
  border: 1px solid rgba(239, 68, 68, 0.12) !important;
}

/* Form controls */
.form-control, input[type="text"], input[type="search"], input[type="password"], input[type="email"], select, textarea {
  border-radius: var(--border-radius-md) !important;
  border: 1px solid #e2e8f0 !important;
  padding: 8px 12px !important;
  box-shadow: none !important;
  transition: all 0.2s ease !important;
  background-color: #ffffff !important;
}

.form-control:focus, input:focus, select:focus, textarea:focus {
  border-color: var(--primary-color) !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1) !important;
  outline: none !important;
}

/* Nav tabs upgrades */
.nav-tabs {
  border-bottom: 1px solid #e2e8f0 !important;
  margin-bottom: 24px !important;
}

.nav-tabs > li > a {
  border: none !important;
  color: #64748b !important;
  font-weight: 500 !important;
  padding: 12px 20px !important;
  position: relative !important;
  background: transparent !important;
  transition: all 0.2s ease !important;
}

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

.nav-tabs > li.active > a::after {
  content: "" !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 3px !important;
  background-color: var(--primary-color) !important;
  border-radius: 999px !important;
}

.nav-tabs > li > a:hover {
  color: #0f172a !important;
  background-color: #f1f5f9 !important;
  border-radius: var(--border-radius-md) var(--border-radius-md) 0 0 !important;
}

/* Table overrides */
table.dataTable, table.table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border: none !important;
}

table.dataTable thead th, table.table thead th {
  background-color: #f8fafc !important;
  color: #475569 !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  font-size: 11px !important;
  letter-spacing: 0.05em !important;
  padding: 14px 16px !important;
  border-bottom: 2px solid #e2e8f0 !important;
  border-top: none !important;
}

table.dataTable tbody td, table.table tbody td {
  padding: 14px 16px !important;
  border-bottom: 1px solid #f1f5f9 !important;
  vertical-align: middle !important;
  color: #334155 !important;
}

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

/* Calendar styling upgrades */
.fc {
  font-family: 'Inter', sans-serif !important;
}

.fc-view-container {
  border-radius: var(--border-radius-lg) !important;
  overflow: hidden !important;
  border: 1px solid #e2e8f0 !important;
}

.fc-toolbar {
  margin-bottom: 24px !important;
}

.fc-button {
  background-color: #ffffff !important;
  background-image: none !important;
  border: 1px solid #e2e8f0 !important;
  color: #475569 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
  border-radius: var(--border-radius-md) !important;
  padding: 8px 14px !important;
  font-weight: 500 !important;
  text-shadow: none !important;
  transition: all 0.2s ease !important;
}

.fc-button:hover {
  background-color: #f8fafc !important;
  color: #0f172a !important;
}

.fc-state-active {
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
  color: #ffffff !important;
}

.fc-head-container thead th {
  padding: 12px 0 !important;
  background-color: #f8fafc !important;
  border-color: #e2e8f0 !important;
  font-weight: 600 !important;
  color: #475569 !important;
}

.fc-day-grid-event {
  border-radius: 4px !important;
  padding: 3px 8px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  border: none !important;
}

/* Scrollbars */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

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

::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 999px;
}

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

/* Fix year/currency select dropdown cut-off */
.simple-bootstrap-select .bootstrap-select .btn {
  height: 24px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  line-height: 24px !important;
  display: flex !important;
  align-items: center !important;
}

.simple-bootstrap-select .bootstrap-select .btn .filter-option {
  line-height: 24px !important;
  height: 24px !important;
  display: flex !important;
  align-items: center !important;
}

.simple-bootstrap-select .bootstrap-select .btn .caret {
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin-top: 0 !important;
}

/* Fix horizontal tab scrollable arrows alignment (way down) */
.horizontal-scrollable-tabs {
  position: relative !important;
  padding-left: 30px !important;
  padding-right: 30px !important;
}

.horizontal-scrollable-tabs .scroller {
  position: absolute !important;
  top: 0 !important;
  height: 100% !important;
  width: 30px !important;
  z-index: 5 !important;
  margin: 0 !important;
  padding: 0 !important;
  border-bottom: 1px solid #e2e8f0 !important;
  background: #f1f5f9 !important;
  display: block; /* Enforce block when shown by JS, no !important to respect dynamic hide */
  text-align: center !important;
  box-sizing: border-box !important;
}

.horizontal-scrollable-tabs .scroller-left {
  left: 0 !important;
  border-right: 1px solid #e2e8f0 !important;
  border-radius: var(--border-radius-md) 0 0 var(--border-radius-md) !important;
}

.horizontal-scrollable-tabs .scroller-right {
  right: 0 !important;
  border-left: 1px solid #e2e8f0 !important;
  border-radius: 0 var(--border-radius-md) var(--border-radius-md) 0 !important;
}

.horizontal-scrollable-tabs .scroller i {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  font-size: 14px !important;
}

/* Fix Bootstrap input groups broken by general input border-radius overrides */
.input-group .form-control:not(:first-child):not(:last-child),
.input-group-addon:not(:first-child):not(:last-child),
.input-group-btn:not(:first-child):not(:last-child) {
  border-radius: 0 !important;
}

.input-group .form-control:first-child,
.input-group-addon:first-child,
.input-group-btn:first-child {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.input-group .form-control:last-child,
.input-group-addon:last-child,
.input-group-btn:last-child {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

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

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

/* Fix DataTables header controls alignment & heights */
.dataTables_wrapper {
  position: relative !important;
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dt-buttons,
.dataTables_wrapper .btn-default-table-options,
.dataTables_wrapper .dataTables_filter {
  display: inline-flex !important;
  align-items: center !important;
  vertical-align: middle !important;
  margin-bottom: 12px !important;
}

.dataTables_wrapper .dataTables_length {
  margin-right: 12px !important;
}

.dataTables_wrapper .dt-buttons {
  margin-right: 12px !important;
}

.dataTables_wrapper .btn-default-table-options {
  margin-right: 12px !important;
}

/* Force same height and paddings for all table control elements */
.dataTables_wrapper .dataTables_length .bootstrap-select .btn,
.dataTables_wrapper .dt-buttons .btn,
.dataTables_wrapper .btn-default-table-options,
.dataTables_wrapper .dataTables_filter input {
  height: 34px !important;
  padding: 6px 12px !important;
  font-size: 13px !important;
  line-height: 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.dataTables_wrapper .dataTables_length .bootstrap-select .btn .caret {
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin-top: 0 !important;
}

/* Search input specific overrides inside DataTables filter */
.dataTables_wrapper .dataTables_filter {
  float: right !important;
}

.dataTables_wrapper .dataTables_filter label {
  display: inline-flex !important;
  align-items: stretch !important;
  margin-bottom: 0 !important;
  font-weight: normal !important;
  height: 34px !important;
}

.dataTables_wrapper .dataTables_filter .input-group {
  display: inline-flex !important;
  align-items: stretch !important;
  height: 34px !important;
}

.dataTables_wrapper .dataTables_filter .input-group-addon {
  background-color: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
  border-right: none !important;
  border-radius: var(--border-radius-md) 0 0 var(--border-radius-md) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 12px !important;
  height: 34px !important;
}

.dataTables_wrapper .dataTables_filter input[type="search"],
.dataTables_wrapper .dataTables_filter .form-control {
  border: 1px solid #cbd5e1 !important;
  border-radius: 0 var(--border-radius-md) var(--border-radius-md) 0 !important;
  margin: 0 !important;
  height: 34px !important;
}

/* Invoice preview page top action buttons inline and compact */
.col-md-9._buttons {
  display: inline-flex !important;
  float: right !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: nowrap !important;
  gap: 4px !important;
  width: auto !important;
}

.col-md-9._buttons .pull-right {
  display: inline-flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 4px !important;
  float: none !important;
  margin: 0 !important;
}

.col-md-9._buttons .btn,
.col-md-9._buttons .btn-group,
.col-md-9._buttons .btn-group .btn {
  margin: 0 !important;
  padding: 5px 8px !important;
  font-size: 11px !important;
  height: 28px !important;
  line-height: 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: middle !important;
}

.col-md-9._buttons .btn-group .caret {
  margin-left: 3px !important;
}

.col-md-9._buttons a[onclick*="record_payment"] {
  height: 28px !important;
  padding: 5px 8px !important;
  font-size: 11px !important;
  line-height: 16px !important;
  margin-left: 4px !important;
  float: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Specific layout and override for invoice preview header row */
@media (min-width: 768px) {
  .panel-body > .row.mtop20 {
    display: flex !important;
    flex-flow: row wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .panel-body > .row.mtop20 > .col-md-3 {
    width: auto !important;
    float: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    flex-shrink: 0 !important;
  }

  .panel-body > .row.mtop20 > .col-md-9.invoice-preview-buttons {
    width: auto !important;
    float: none !important;
    flex-grow: 1 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
  }

  .col-md-9.invoice-preview-buttons .pull-right {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    width: auto !important;
    float: none !important;
  }
}

/* Specific compact override for invoice preview action buttons */
.col-md-9.invoice-preview-buttons,
.col-md-9.invoice-preview-buttons .pull-right {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: nowrap !important; /* Force all buttons inline */
  gap: 6px !important;
  float: none !important;
  width: auto !important;
}

/* Styling for individual buttons, NOT the structural .btn-group wrappers */
.col-md-9.invoice-preview-buttons .btn,
.col-md-9.invoice-preview-buttons .btn-group .btn {
  padding: 6px 12px !important;
  font-size: 13px !important;
  height: 32px !important;
  line-height: 18px !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 8px !important;
  font-weight: 500 !important;
  border: 1px solid #cbd5e1 !important;
  background-color: #ffffff !important;
  color: #334155 !important;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
}

/* Explicitly disable styling on the btn-group container itself to prevent double borders */
.col-md-9.invoice-preview-buttons .btn-group {
  border: none !important;
  background-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  height: auto !important;
  display: inline-flex !important;
  align-items: center !important;
}

.col-md-9.invoice-preview-buttons .btn:hover,
.col-md-9.invoice-preview-buttons .btn:focus,
.col-md-9.invoice-preview-buttons .btn-group .btn:hover,
.col-md-9.invoice-preview-buttons .btn-group .btn:focus {
  background-color: #f8fafc !important;
  border-color: #cbd5e1 !important;
  color: #1e293b !important;
}

/* Green buttons styling for WhatsApp and Payment */
.col-md-9.invoice-preview-buttons .btn-success,
.col-md-9.invoice-preview-buttons .btn-success.dropdown-toggle {
  background-color: #22c55e !important;
  border-color: #22c55e !important;
  color: #ffffff !important;
}

.col-md-9.invoice-preview-buttons .btn-success:hover,
.col-md-9.invoice-preview-buttons .btn-success:focus,
.col-md-9.invoice-preview-buttons .btn-success:active,
.col-md-9.invoice-preview-buttons .btn-success.dropdown-toggle:hover {
  background-color: #16a34a !important;
  border-color: #16a34a !important;
  color: #ffffff !important;
}

.col-md-9.invoice-preview-buttons a[onclick*="record_payment"] {
  height: 32px !important;
  padding: 6px 12px !important;
  font-size: 13px !important;
  line-height: 18px !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 8px !important;
  font-weight: 500 !important;
}

.col-md-9.invoice-preview-buttons .btn i {
  font-size: 14px !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Caret alignment inside action buttons */
.col-md-9.invoice-preview-buttons .btn-group .caret {
  margin-left: 6px !important;
  margin-top: 0 !important;
}

/* Invoice Status Badges Premium Modernization */
.label.invoice-status-1,
.label.invoice-status-2,
.label.invoice-status-3,
.label.invoice-status-4,
.label.invoice-status-5,
.label.invoice-status-6,
.s-status {
  text-transform: none !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  height: 32px !important;
  padding: 0 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 8px !important;
  border: 1px solid transparent !important;
  line-height: 1 !important;
}

/* 1: Unpaid */
.label.invoice-status-1 {
  background-color: #FEF2F2 !important;
  color: #991B1B !important;
  border-color: #FEE2E2 !important;
}

/* 2: Paid */
.label.invoice-status-2 {
  background-color: #EAFDF4 !important;
  color: #0E6245 !important;
  border-color: #C6F6D5 !important;
}

/* 3: Partially Paid */
.label.invoice-status-3 {
  background-color: #FEF9E7 !important;
  color: #8A5C0F !important;
  border-color: #FBE8C5 !important;
}

/* 4: Overdue */
.label.invoice-status-4 {
  background-color: #FFF5F5 !important;
  color: #C53030 !important;
  border-color: #FEB2B2 !important;
}

/* 5: Cancelled */
.label.invoice-status-5 {
  background-color: #F1F5F9 !important;
  color: #475569 !important;
  border-color: #E2E8F0 !important;
}

/* 6: Draft */
.label.invoice-status-6 {
  background-color: #F8FAFC !important;
  color: #64748B !important;
  border-color: #E2E8F0 !important;
}

/* Overdue Notice Alignment & Colors */
.row.mtop20 .col-md-12 .text-danger {
  color: #ef4444 !important;
  font-size: 13px !important;
  margin-top: 8px !important;
  margin-bottom: 0 !important;
  font-weight: 500 !important;
}

/* Override .col-md-12 inside mtop20 for wrapping and left alignment */
@media (min-width: 768px) {
  .panel-body > .row.mtop20 > .col-md-12 {
    width: 100% !important;
    flex-basis: 100% !important;
    float: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* Hide sorting icon on the checkbox column header globally */
table.dataTable thead th:first-child::after,
table.dataTable thead th:first-child::before {
  display: none !important;
  content: "" !important;
}

table.dataTable thead th:first-child {
  background-image: none !important;
  cursor: default !important;
}