/* Complete Green Theme for Corporate Dashboard */
:root {
  /* Your specified colors */
  --corporate-sidebar: #132A13;
  --corporate-menu-active: #31572C;
  --corporate-pemasukan: #4F772D;
  --corporate-biaya-operasional: #90A955;
  --corporate-pendapatan: #ECF39E;
  --corporate-hutang: #132A13;
  
  /* Corporate green gradients for all cards */
  --corporate-gradient-1: linear-gradient(135deg, #132A13 0%, #31572C 100%);
  --corporate-gradient-2: linear-gradient(135deg, #4F772D 0%, #90A955 100%);
  --corporate-gradient-3: linear-gradient(135deg, #90A955 0%, #ECF39E 100%);
  --corporate-gradient-4: linear-gradient(135deg, #ECF39E 0%, #FBFFF1 100%);
  --corporate-gradient-5: linear-gradient(135deg, #31572C 0%, #4F772D 100%);
}

/* ===== GLOBAL THEME OVERRIDE ===== */
html {
  --ct-menu-bg: var(--corporate-sidebar) !important;
  --ct-menu-item-color: rgba(255, 255, 255, 0.85) !important;
  --ct-menu-item-hover-color: #ffffff !important;
  --ct-menu-item-active-color: #ffffff !important;
  --ct-menu-condensed-link-bg: var(--corporate-menu-active) !important;
  --ct-primary: var(--corporate-sidebar) !important;
}

/* ===== SIDEBAR STYLING ===== */
.leftside-menu {
  background: var(--corporate-gradient-1) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.side-nav .side-nav-link {
  color: rgba(255, 255, 255, 0.85) !important;
}

.side-nav .side-nav-link:hover,
.side-nav .side-nav-link:focus,
.side-nav .side-nav-link:active {
  color: #ffffff !important;
  background-color: rgba(255, 255, 255, 0.1) !important;
}

.side-nav .menuitem-active > a,
.side-nav .side-nav-item.active > a {
  background: var(--corporate-menu-active) !important;
  border-left: 4px solid #ffffff !important;
  color: #ffffff !important;
}

.side-nav-title {
  color: rgba(255, 255, 255, 0.6) !important;
}

.logo-text,
.toggle-icon {
  color: #ffffff !important;
}

.logo-icon {
  filter: brightness(0) invert(1) !important;
}

/* ===== TOPBAR STYLING ===== */
.navbar-custom {
  background: #ffffff !important;
  border-bottom: 1px solid rgba(19, 42, 19, 0.1) !important;
}

.navbar-custom .navbar-nav .nav-link {
  color: var(--corporate-sidebar) !important;
}

.navbar-custom .navbar-nav .nav-link:hover {
  color: var(--corporate-menu-active) !important;
  background-color: rgba(19, 42, 19, 0.1) !important;
}

/* ===== ENHANCED NAVBAR STYLING ===== */
.navbar-custom .topbar {
  background: #ffffff !important;
}

.navbar-custom .topbar-menu .nav-link {
  color: var(--corporate-sidebar) !important;
}

.navbar-custom .topbar-menu .nav-link:hover {
  color: var(--corporate-menu-active) !important;
  background-color: rgba(19, 42, 19, 0.1) !important;
}

/* Button toggle menu styling */
.navbar-custom .button-toggle-menu {
  color: var(--corporate-sidebar) !important;
}

.navbar-custom .button-toggle-menu:hover {
  color: var(--corporate-menu-active) !important;
  background-color: rgba(19, 42, 19, 0.1) !important;
}

/* Search form styling */
.navbar-custom .app-search form .form-control {
  background-color: #ffffff !important;
  border: 1px solid rgba(19, 42, 19, 0.2) !important;
  color: var(--corporate-sidebar) !important;
}

.navbar-custom .app-search form .form-control::placeholder {
  color: rgba(19, 42, 19, 0.6) !important;
}

.navbar-custom .app-search form .search-icon {
  color: var(--corporate-sidebar) !important;
}

/* User dropdown styling */
.navbar-custom .dropdown .nav-link {
  color: var(--corporate-sidebar) !important;
}

.navbar-custom .dropdown .nav-link:hover {
  color: var(--corporate-menu-active) !important;
}

/* User info text styling */
.navbar-custom .d-lg-flex h5,
.navbar-custom .d-lg-flex h6 {
  color: var(--corporate-sidebar) !important;
}

/* Dropdown menu styling */
.navbar-custom .dropdown-menu {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

.navbar-custom .dropdown-menu .dropdown-item {
  color: #333333 !important;
}

.navbar-custom .dropdown-menu .dropdown-item:hover {
  background-color: rgba(19, 42, 19, 0.1) !important;
  color: var(--corporate-sidebar) !important;
}

.navbar-custom .dropdown-menu .dropdown-header {
  color: var(--corporate-sidebar) !important;
  font-weight: 600 !important;
}

/* Light/Dark mode toggle */
.navbar-custom #light-dark-mode {
  color: var(--corporate-sidebar) !important;
}

.navbar-custom #light-dark-mode:hover {
  color: var(--corporate-menu-active) !important;
}

/* Fullscreen button */
.navbar-custom .nav-link[data-toggle="fullscreen"] {
  color: var(--corporate-sidebar) !important;
}

.navbar-custom .nav-link[data-toggle="fullscreen"]:hover {
  color: var(--corporate-menu-active) !important;
}

/* Logo topbar styling */
.navbar-custom .logo-topbar .logo-light,
.navbar-custom .logo-topbar .logo-dark {
  filter: none !important;
}

/* Horizontal menu toggle button */
.navbar-custom .navbar-toggle .lines span {
  background-color: var(--corporate-sidebar) !important;
}

.navbar-custom .navbar-toggle:hover .lines span {
  background-color: var(--corporate-menu-active) !important;
}

/* ===== ENHANCED WIDGET ICON BOX CARDS - DIVERSIFIED GREEN THEME ===== */
.widget-icon-box {
  background: var(--corporate-gradient-1) !important;
  border-radius: 12px !important;
  border: none !important;
  overflow: hidden !important;
  position: relative !important;
  box-shadow: 0 4px 12px rgba(19, 42, 19, 0.15) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* ===== CORPORATE SIDEBAR BACKGROUND CLASS ===== */
.bg-corporate-sidebar {
  background-color: var(--corporate-sidebar) !important;
  color: #ffffff !important;
}

/* ===== MODAL HEADER CORPORATE STYLING ===== */
.modal-header-corporate {
  background-color: var(--corporate-sidebar) !important;
  color: #ffffff !important;
}

.modal-header-corporate .modal-title {
  color: #ffffff !important;
}

.modal-header-corporate .btn-close {
  color: #ffffff !important;
  filter: brightness(0) invert(1) !important;
}

.widget-icon-box:hover {
  box-shadow: 0 8px 24px rgba(19, 42, 19, 0.25) !important;
  transform: translateY(-3px) !important;
}

.widget-icon-box .card-body {
  padding: 1.5rem !important;
}

/* ENHANCED TEXT IN WIDGET CARDS - BETTER CONTRAST */
.widget-icon-box h5 {
  color: #ffffff !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  margin-bottom: 0.75rem !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
  letter-spacing: 0.025em !important;
}

.widget-icon-box h3 {
  color: #ffffff !important;
  font-weight: 800 !important;
  font-size: 2rem !important;
  margin: 0.75rem 0 !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

.widget-icon-box p {
  color: rgba(255, 255, 255, 0.95) !important;
  margin-bottom: 0 !important;
  font-weight: 500 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

.widget-icon-box .text-muted {
  color: rgba(255, 255, 255, 0.95) !important;
}

/* ENHANCED AVATAR TITLES - BETTER CONTRAST AND DIVERSITY */
.widget-icon-box .avatar-title {
  background: rgba(255, 255, 255, 0.95) !important;
  color: var(--corporate-sidebar) !important;
  border: 3px solid rgba(255, 255, 255, 0.4) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  font-size: 1.5rem !important;
  width: 60px !important;
  height: 60px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ===== DIVERSIFIED CARD GRADIENTS WITH BETTER CONTRAST ===== */

/* Pesanan Baru Card - Deep Green */
.widget-icon-box:has(.ri-shopping-cart-line) {
  background: linear-gradient(135deg, #132A13 0%, #31572C 50%, #4F772D 100%) !important;
}

/* Pesanan Diproses Card - Medium Green */
.widget-icon-box:has(.ri-truck-line) {
  background: linear-gradient(135deg, #31572C 0%, #4F772D 50%, #90A955 100%) !important;
}

/* Pesanan Selesai Card - Light Green */
.widget-icon-box:has(.ri-checkbox-circle-line) {
  background: linear-gradient(135deg, #4F772D 0%, #90A955 50%, #ECF39E 100%) !important;
}

/* Total Pesanan Card - Mixed Green */
.widget-icon-box:has(.ri-file-list-3-line) {
  background: linear-gradient(135deg, #2d501a 0%, #4F772D 50%, #6a994e 100%) !important;
}

/* Legacy Support for Old Icons */
.widget-icon-box:has(.ri-24-hours-fill) {
  background: linear-gradient(135deg, #132A13 0%, #31572C 50%, #4F772D 100%) !important;
}

.widget-icon-box:has(.ri-qr-code-line) {
  background: linear-gradient(135deg, #2d501a 0%, #4F772D 50%, #6a994e 100%) !important;
}

.widget-icon-box:has(.ri-file-paper-line) {
  background: linear-gradient(135deg, #31572C 0%, #4F772D 50%, #90A955 100%) !important;
}

.widget-icon-box:has(.ri-notification-2-fill) {
  background: linear-gradient(135deg, #4F772D 0%, #90A955 50%, #ECF39E 100%) !important;
}

/* Enhanced hover effects for specific cards */
.widget-icon-box:has(.ri-shopping-cart-line):hover {
  background: linear-gradient(135deg, #1a3a1a 0%, #3d6a3d 50%, #5f8f5f 100%) !important;
}

.widget-icon-box:has(.ri-truck-line):hover {
  background: linear-gradient(135deg, #3d6a3d 0%, #5f8f5f 50%, #a0b965 100%) !important;
}

.widget-icon-box:has(.ri-checkbox-circle-line):hover {
  background: linear-gradient(135deg, #5f8f5f 0%, #a0b965 50%, #f0f4ae 100%) !important;
}

.widget-icon-box:has(.ri-file-list-3-line):hover {
  background: linear-gradient(135deg, #3d5a2a 0%, #5f8f5f 50%, #7aa95e 100%) !important;
}

/* ===== BADGE STYLING - RED THEME ===== */
.badge.bg-success {
  background-color: var(--corporate-gradient-4) !important;
  color: #ffffff !important;
}

.badge.bg-error {
  background-color: var(--corporate-gradient-3) !important;
  color: #ffffff !important;
}

.badge.text-bg-dark {
  background-color: var(--corporate-gradient-5) !important;
  color: #ffffff !important;
}

/* ===== BUTTON STYLING - RED THEME ===== */
.btn-primary {
  background: var(--corporate-gradient-1) !important;
  border-color: var(--corporate-sidebar) !important;
  color: #ffffff !important;
}

.btn-primary:hover {
  background: var(--corporate-menu-active) !important;
  border-color: var(--corporate-menu-active) !important;
  color: #ffffff !important;
}

.btn-success {
  background: var(--corporate-gradient-4) !important;
  border-color: var(--corporate-pendapatan) !important;
  color: #ffffff !important;
}

.btn-success:hover {
  background: var(--corporate-pendapatan) !important;
  border-color: var(--corporate-pendapatan) !important;
  color: #ffffff !important;
}

/* ===== FORM ELEMENTS ===== */
.form-control {
  border-radius: 8px !important;
  border: 1px solid #dee2e6 !important;
}

.form-control:focus {
  border-color: var(--corporate-sidebar) !important;
  box-shadow: 0 0 0 0.2rem rgba(19, 42, 19, 0.25) !important;
}

.input-group-text {
  background-color: var(--corporate-sidebar) !important;
  border-color: var(--corporate-sidebar) !important;
  color: #ffffff !important;
}

/* ===== PAGE TITLE ===== */
.page-title {
  color: var(--corporate-sidebar) !important;
  font-weight: 700 !important;
  font-size: 1.5rem !important;
}

/* ===== HEADER TITLE ===== */
.header-title {
  color: var(--corporate-sidebar) !important;
  font-weight: 600 !important;
}

/* ===== PROGRESS BARS ===== */
.progress-bar {
  background-color: var(--corporate-sidebar) !important;
}

.progress-bar.bg-info {
  background-color: var(--corporate-gradient-2) !important;
}

.progress-bar.bg-warning {
  background-color: var(--corporate-gradient-4) !important;
}

.progress-bar.bg-success {
  background-color: var(--corporate-gradient-4) !important;
}

.progress-bar.bg-danger {
  background-color: var(--corporate-gradient-3) !important;
}

/* ===== TABLE STYLING ===== */
.table-light {
  background-color: #f8f9fa !important;
}

.table-light th {
  background-color: var(--corporate-sidebar) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
}

.table-hover tbody tr:hover {
  background-color: rgba(19, 42, 19, 0.1) !important;
}

/* ===== CARD HEADERS ===== */
.card-header {
  background-color: rgba(19, 42, 19, 0.05) !important;
  border-bottom: 1px solid rgba(19, 42, 19, 0.1) !important;
}

/* ===== MENU BUTTONS ===== */
.widget-icon-box .btn-primary {
  background: var(--corporate-gradient-1) !important;
  border: none !important;
  color: #ffffff !important;
  width: 100% !important;
  text-align: left !important;
  padding: 1.25rem !important;
}

.widget-icon-box .btn-primary:hover {
  background: var(--corporate-menu-active) !important;
  color: #ffffff !important;
}

.widget-icon-box .btn-primary h3 {
  color: #ffffff !important;
  margin: 0 !important;
}

/* ===== APEXCHARTS RED THEME - SOFT WHITE & RED SHADES ===== */

/* Override ApexCharts default colors */
.apex-charts {
  color: var(--corporate-sidebar) !important;
}

/* Chart colors using your specified green palette with proper opacity */
.apex-charts[data-colors="rgba(19,42,19,0.6),rgba(79,119,45,0.7),rgba(144,169,85,0.65),rgba(49,87,44,0.75)"] {
  --apex-chart-color-1: rgba(19, 42, 19, 0.6) !important;
  --apex-chart-color-2: rgba(79, 119, 45, 0.7) !important;
  --apex-chart-color-3: rgba(144, 169, 85, 0.65) !important;
  --apex-chart-color-4: rgba(49, 87, 44, 0.75) !important;
}

/* Force chart colors through CSS with proper opacity */
.apex-charts .apexcharts-series[data\:realIndex="0"] .apexcharts-area,
.apex-charts .apexcharts-series[data\:realIndex="0"] .apexcharts-line {
  fill: rgba(19, 42, 19, 0.6) !important;
  stroke: rgba(19, 42, 19, 0.8) !important;
}

.apex-charts .apexcharts-series[data\:realIndex="1"] .apexcharts-area,
.apex-charts .apexcharts-series[data\:realIndex="1"] .apexcharts-line {
  fill: rgba(79, 119, 45, 0.7) !important;
  stroke: rgba(79, 119, 45, 0.85) !important;
}

.apex-charts .apexcharts-series[data\:realIndex="2"] .apexcharts-area,
.apex-charts .apexcharts-series[data\:realIndex="2"] .apexcharts-line {
  fill: rgba(144, 169, 85, 0.65) !important;
  stroke: rgba(144, 169, 85, 0.8) !important;
}

.apex-charts .apexcharts-series[data\:realIndex="3"] .apexcharts-area,
.apex-charts .apexcharts-series[data\:realIndex="3"] .apexcharts-line {
  fill: rgba(49, 87, 44, 0.75) !important;
  stroke: rgba(49, 87, 44, 0.9) !important;
}

/* Bar chart colors with proper opacity */
.apex-charts .apexcharts-series[data\:realIndex="0"] .apexcharts-bar {
  fill: rgba(19, 42, 19, 0.6) !important;
}

.apex-charts .apexcharts-series[data\:realIndex="1"] .apexcharts-bar {
  fill: rgba(79, 119, 45, 0.7) !important;
}

.apex-charts .apexcharts-series[data\:realIndex="2"] .apexcharts-bar {
  fill: rgba(144, 169, 85, 0.65) !important;
}

.apex-charts .apexcharts-series[data\:realIndex="3"] .apexcharts-bar {
  fill: rgba(49, 87, 44, 0.75) !important;
}

/* Chart grid and axis colors with subtle green */
.apex-charts .apexcharts-gridline {
  stroke: rgba(19, 42, 19, 0.1) !important;
}

.apex-charts .apexcharts-xaxis line,
.apex-charts .apexcharts-yaxis line {
  stroke: rgba(19, 42, 19, 0.15) !important;
}

/* Axis labels in red for corporate theme - outside chart area */
.apex-charts .apexcharts-xaxis-label,
.apex-charts .apexcharts-yaxis-label {
  fill: var(--corporate-sidebar) !important;
  color: var(--corporate-sidebar) !important;
  font-weight: 600 !important;
  font-size: 12px !important;
}

/* Chart legend colors in GREEN - outside the graph */
.apex-charts .apexcharts-legend-text {
  color: var(--corporate-sidebar) !important;
  fill: var(--corporate-sidebar) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
}

.apex-charts .apexcharts-legend-marker {
  background-color: rgba(19, 42, 19, 0.7) !important;
}

/* Tooltip styling with green background and WHITE text */
.apexcharts-tooltip {
  background: rgba(19, 42, 19, 0.95) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(19, 42, 19, 0.3) !important;
}

.apexcharts-tooltip-title {
  background: rgba(49, 87, 44, 0.98) !important;
  color: #ffffff !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
  font-weight: 600 !important;
}

.apexcharts-tooltip-y-group {
  color: #ffffff !important;
}

.apexcharts-tooltip-text-y-label,
.apexcharts-tooltip-text-y-value {
  color: #ffffff !important;
  font-weight: 500 !important;
}

/* Data labels in GREEN with white background for visibility */
.apex-charts .apexcharts-data-labels text {
  fill: var(--corporate-sidebar) !important;
  color: var(--corporate-sidebar) !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8) !important;
}

/* Data label background for better visibility */
.apex-charts .apexcharts-data-labels {
  background: rgba(255, 255, 255, 0.9) !important;
  border-radius: 4px !important;
  padding: 2px 4px !important;
}

/* Specific styling for data labels on bars */
.apex-charts .apexcharts-bar-series .apexcharts-data-labels text {
  fill: var(--corporate-sidebar) !important;
  color: var(--corporate-sidebar) !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.9) !important;
}

/* Data labels on area/line charts */
.apex-charts .apexcharts-area-series .apexcharts-data-labels text,
.apex-charts .apexcharts-line-series .apexcharts-data-labels text {
  fill: var(--corporate-sidebar) !important;
  color: var(--corporate-sidebar) !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  text-shadow: 0 1px 3px rgba(255, 255, 255, 0.9) !important;
}

/* Hover effects with proper opacity */
.apex-charts .apexcharts-series:hover .apexcharts-area,
.apex-charts .apexcharts-series:hover .apexcharts-line {
  opacity: 0.9 !important;
  transition: opacity 0.3s ease !important;
}

.apex-charts .apexcharts-series:hover .apexcharts-bar {
  opacity: 0.9 !important;
  transition: opacity 0.3s ease !important;
}

/* Marker hover effects */
.apex-charts .apexcharts-marker:hover {
  fill: rgba(79, 119, 45, 0.8) !important;
  stroke: rgba(248, 249, 250, 0.9) !important;
  stroke-width: 2 !important;
  transition: all 0.3s ease !important;
}

/* Specific styling for different chart types */
.apex-charts .apexcharts-pie-series path {
  fill: rgba(19, 42, 19, 0.6) !important;
  stroke: rgba(248, 249, 250, 0.3) !important;
  stroke-width: 1 !important;
}

.apex-charts .apexcharts-pie-series path:hover {
  fill: rgba(79, 119, 45, 0.8) !important;
  opacity: 0.9 !important;
  transition: all 0.3s ease !important;
}

/* Radial bar specific styling */
.apex-charts .apexcharts-radialbar-track {
  fill: rgba(19, 42, 19, 0.1) !important;
}

.apex-charts .apexcharts-radialbar-area {
  fill: rgba(19, 42, 19, 0.6) !important;
}

/* Donut chart specific styling */
.apex-charts .apexcharts-donut-slice-pie {
  fill: rgba(19, 42, 19, 0.6) !important;
}

/* Area chart gradient improvements */
.apex-charts .apexcharts-area-series .apexcharts-area {
  fill: url(#gradient) !important;
  opacity: 0.6 !important;
}

/* Chart title and subtitle in GREEN - outside the graph */
.apex-charts .apexcharts-title-text,
.apex-charts .apexcharts-subtitle-text {
  fill: var(--corporate-sidebar) !important;
  color: var(--corporate-sidebar) !important;
  font-weight: 700 !important;
}

/* Ensure tooltip content is always WHITE */
.apexcharts-tooltip * {
  color: #ffffff !important;
}

/* Hover state for interactive elements - legend hover in green */
.apex-charts .apexcharts-legend-item:hover .apexcharts-legend-text {
  color: var(--corporate-menu-active) !important;
  transition: color 0.3s ease !important;
}

/* Override any default text for green theme - outside graph elements */
.apex-charts .apexcharts-text {
  fill: var(--corporate-sidebar) !important;
  color: var(--corporate-sidebar) !important;
}

/* Ensure all text elements outside the graph are green */
.apex-charts text {
  fill: var(--corporate-sidebar) !important;
  color: var(--corporate-sidebar) !important;
}

/* Specific override for legend items */
.apex-charts .apexcharts-legend-item {
  color: var(--corporate-sidebar) !important;
}

.apex-charts .apexcharts-legend-item span {
  color: var(--corporate-sidebar) !important;
}

/* Chart container text color */
.apex-charts-container {
  color: var(--corporate-sidebar) !important;
}

/* Any additional text elements outside the chart */
.apex-charts + div,
.apex-charts ~ div {
  color: var(--corporate-sidebar) !important;
}

/* ===== NAV-PILLS CORPORATE THEME ===== */
.nav-pills {
  --ct-nav-pills-border-radius: 0.15rem;
  --ct-nav-pills-link-active-color: #ffffff;
  --ct-nav-pills-link-active-bg: var(--corporate-sidebar);
  background-color: rgba(19, 42, 19, 0.05) !important;
  border: 1px solid rgba(19, 42, 19, 0.1) !important;
  border-radius: 8px !important;
  padding: 0.5rem !important;
}

.nav-pills .nav-link {
  border-radius: var(--ct-nav-pills-border-radius) !important;
  color: var(--corporate-sidebar) !important;
  font-weight: 500 !important;
  transition: all 0.3s ease !important;
  border: 1px solid transparent !important;
  margin: 0.25rem !important;
}

.nav-pills .nav-link:hover {
  color: var(--corporate-menu-active) !important;
  background-color: rgba(19, 42, 19, 0.1) !important;
  border-color: rgba(19, 42, 19, 0.2) !important;
}

.nav-pills .nav-link:focus {
  color: var(--corporate-menu-active) !important;
  background-color: rgba(19, 42, 19, 0.15) !important;
  border-color: rgba(19, 42, 19, 0.3) !important;
  box-shadow: 0 0 0 0.2rem rgba(19, 42, 19, 0.25) !important;
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  color: var(--ct-nav-pills-link-active-color) !important;
  background: var(--corporate-gradient-1) !important;
  border-color: var(--corporate-sidebar) !important;
  box-shadow: 0 2px 8px rgba(19, 42, 19, 0.3) !important;
}

.nav-pills .nav-link.active:hover {
  background: var(--corporate-menu-active) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(19, 42, 19, 0.4) !important;
}

/* Specific styling for nav-pills with bg-nav-pills class */
.bg-nav-pills {
  background-color: rgba(19, 42, 19, 0.05) !important;
  border: 1px solid rgba(19, 42, 19, 0.1) !important;
}

/* Nav-pills with rounded-0 class (for your specific use case) */
.nav-pills .nav-link.rounded-0 {
  border-radius: 0 !important;
  margin: 0 !important;
  border-left: 1px solid rgba(19, 42, 19, 0.1) !important;
  border-right: 1px solid rgba(19, 42, 19, 0.1) !important;
}

.nav-pills .nav-link.rounded-0:first-child {
  border-top-left-radius: 0.15rem !important;
  border-bottom-left-radius: 0.15rem !important;
  border-left: 1px solid rgba(19, 42, 19, 0.1) !important;
}

.nav-pills .nav-link.rounded-0:last-child {
  border-top-right-radius: 0.15rem !important;
  border-bottom-right-radius: 0.15rem !important;
  border-right: 1px solid rgba(19, 42, 19, 0.1) !important;
}

/* Text styling within nav-pills */
.nav-pills .nav-link h3 {
  color: inherit !important;
  font-weight: 600 !important;
  margin: 0 !important;
  font-size: 1.1rem !important;
}

.nav-pills .nav-link.active h3 {
  color: #ffffff !important;
  font-weight: 700 !important;
}

/* Avatar styling within nav-pills */
.nav-pills .nav-link .avatar-title {
  background: rgba(255, 255, 255, 0.9) !important;
  color: var(--corporate-sidebar) !important;
  border: 2px solid rgba(255, 255, 255, 0.3) !important;
}

.nav-pills .nav-link.active .avatar-title {
  background: rgba(255, 255, 255, 0.95) !important;
  color: var(--corporate-sidebar) !important;
  border: 2px solid rgba(255, 255, 255, 0.5) !important;
}

/* Hover effects for avatar */
.nav-pills .nav-link:hover .avatar-title {
  background: rgba(255, 255, 255, 0.95) !important;
  transform: scale(1.05) !important;
  transition: all 0.3s ease !important;
}

/* ===== FOOTER ===== */
.footer {
  background-color: #f8f9fa !important;
  border-top: 1px solid #dee2e6 !important;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  .widget-icon-box h3 {
    font-size: 1.75rem !important;
  }
  
  .widget-icon-box h5 {
    font-size: 0.8rem !important;
  }
  
  .widget-icon-box .card-body {
    padding: 1.25rem !important;
  }
  
  .widget-icon-box .avatar-title {
    width: 50px !important;
    height: 50px !important;
    font-size: 1.25rem !important;
  }
}

/* ===== LOADING PLACEHOLDER ===== */
.loading-placeholder {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
  border-radius: 4px;
  height: 1.5rem;
  width: 100%;
}

@keyframes loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ===== OVERRIDE ANY LIGHT THEME ===== */
html[data-menu-color="light"],
html[data-menu-color="dark"],
html[data-menu-color="semi-dark"] {
  --ct-menu-bg: var(--corporate-sidebar) !important;
  --ct-menu-item-color: rgba(255, 255, 255, 0.85) !important;
  --ct-menu-item-hover-color: #ffffff !important;
  --ct-menu-item-active-color: #ffffff !important;
  --ct-menu-condensed-link-bg: var(--corporate-menu-active) !important;
}

/* ===== LOGO STYLING FOR BOTH THEMES ===== */
.logo-light h4,
.logo-light h5,
.logo-dark h4,
.logo-dark h5 {
  color: #ffffff !important;
  font-weight: 700 !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
  margin: 0 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.5px !important;
}

/* Enhanced logo styling for green theme */
.leftside-menu .logo-light h4,
.leftside-menu .logo-light h5,
.leftside-menu .logo-dark h4,
.leftside-menu .logo-dark h5 {
  color: #ffffff !important;
  font-weight: 800 !important;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6) !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
}

/* Logo hover effects */
.leftside-menu .logo:hover h4,
.leftside-menu .logo:hover h5 {
  color: rgba(255, 255, 255, 0.9) !important;
  text-shadow: 0 3px 8px rgba(0, 0, 0, 0.7) !important;
  transition: all 0.3s ease !important;
}

.logo-light h4,
.logo-dark h4 {
  font-size: 1.5rem !important;
}

.logo-light h5,
.logo-dark h5 {
  font-size: 1.1rem !important;
}

/* Ensure logo is always visible regardless of theme */
.logo {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 1rem !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border-radius: 8px !important;
  margin: 0.5rem !important;
  transition: all 0.3s ease !important;
}

/* Enhanced logo container for green theme */
.leftside-menu .logo {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
  margin-bottom: 1rem !important;
  position: relative !important;
  z-index: 10 !important;
}

.leftside-menu .logo:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
  transform: translateY(-1px) !important;
}

/* Fix logo positioning for collapsed sidebar */
html[data-sidenav-size=condensed]:not([data-layout=topnav]) .wrapper .leftside-menu .logo {
  margin-bottom: 0.5rem !important;
  padding: 0.75rem 0.5rem !important;
  min-height: 60px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

html[data-sidenav-size=sm-hover]:not([data-layout=topnav]) .wrapper .leftside-menu:not(:hover) .logo {
  margin-bottom: 0.5rem !important;
  padding: 0.75rem 0.5rem !important;
  min-height: 60px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Ensure proper spacing between logo and menu items */
.leftside-menu .side-nav {
  margin-top: 0.5rem !important;
  position: relative !important;
  z-index: 5 !important;
}

/* Logo small specific styling for collapsed state */
html[data-sidenav-size=condensed]:not([data-layout=topnav]) .wrapper .leftside-menu .logo .logo-sm,
html[data-sidenav-size=sm-hover]:not([data-layout=topnav]) .wrapper .leftside-menu:not(:hover) .logo .logo-sm {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
}

/* Ensure logo text doesn't overflow in collapsed state */
html[data-sidenav-size=condensed]:not([data-layout=topnav]) .wrapper .leftside-menu .logo h4,
html[data-sidenav-size=condensed]:not([data-layout=topnav]) .wrapper .leftside-menu .logo h5,
html[data-sidenav-size=sm-hover]:not([data-layout=topnav]) .wrapper .leftside-menu:not(:hover) .logo h4,
html[data-sidenav-size=sm-hover]:not([data-layout=topnav]) .wrapper .leftside-menu:not(:hover) .logo h5 {
  font-size: 0.9rem !important;
  line-height: 1 !important;
  margin: 0 !important;
  text-align: center !important;
  word-break: break-word !important;
}

/* Remove the !important declarations that conflict with sidebar collapse */
.logo-lg {
  display: block;
}

.logo-sm {
  display: none;
}

/* Add specific rules for sidebar collapse states */
html[data-sidenav-size=condensed]:not([data-layout=topnav]) .wrapper .leftside-menu .logo .logo-lg {
  display: none !important;
}

html[data-sidenav-size=condensed]:not([data-layout=topnav]) .wrapper .leftside-menu .logo .logo-sm {
  display: block !important;
}

html[data-sidenav-size=sm-hover]:not([data-layout=topnav]) .wrapper .leftside-menu:not(:hover) .logo .logo-lg {
  display: none !important;
}

html[data-sidenav-size=sm-hover]:not([data-layout=topnav]) .wrapper .leftside-menu:not(:hover) .logo .logo-sm {
  display: block !important;
}

/* Responsive logo sizing */
@media (max-width: 768px) {
  .logo-lg {
    display: none !important;
  }
  
  .logo-sm {
    display: block !important;
  }
}

/* ===== AUTH FLUID FORM BOX BORDER ===== */
.auth-fluid .auth-fluid-form-box {
  border-top: 4px double var(--corporate-sidebar) !important;
}

/* ===== LOGIN PAGE ENHANCED STYLING ===== */

.auth-fluid .auth-fluid-form-box {
  background: #ffffff !important;
  box-shadow: 0 10px 40px rgba(19, 42, 19, 0.15) !important;
  border-radius: 12px !important;
}

/* Login form styling */
.auth-fluid .form-control {
  border: 1px solid rgba(19, 42, 19, 0.2) !important;
  border-radius: 8px !important;
  padding: 0.75rem 1rem 0.75rem 3rem !important;
  font-size: 0.95rem !important;
  transition: all 0.3s ease !important;
}

.auth-fluid .form-control:focus {
  border-color: var(--corporate-sidebar) !important;
  box-shadow: 0 0 0 0.2rem rgba(19, 42, 19, 0.15) !important;
  background-color: #ffffff !important;
}

/* Login form icons */
.auth-fluid .position-absolute.text-muted {
  color: rgba(19, 42, 19, 0.6) !important;
  font-size: 1.1rem !important;
}

/* Login button styling */
.auth-fluid .btn[type="submit"] {
  background: var(--corporate-gradient-1) !important;
  border: none !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  padding: 0.875rem 2rem !important;
  border-radius: 8px !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(19, 42, 19, 0.2) !important;
}

.auth-fluid .btn[type="submit"]:hover {
  background: var(--corporate-menu-active) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px rgba(19, 42, 19, 0.3) !important;
}

.auth-fluid .btn[type="submit"]:focus {
  box-shadow: 0 0 0 0.2rem rgba(19, 42, 19, 0.25) !important;
}

/* Login form labels */
.auth-fluid .form-label {
  color: var(--corporate-sidebar) !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
  margin-bottom: 0.5rem !important;
}

/* Login checkbox styling */
.auth-fluid .form-check-input:checked {
  background-color: var(--corporate-sidebar) !important;
  border-color: var(--corporate-sidebar) !important;
}

.auth-fluid .form-check-input:focus {
  border-color: var(--corporate-sidebar) !important;
  box-shadow: 0 0 0 0.2rem rgba(19, 42, 19, 0.15) !important;
}

.auth-fluid .form-check-label {
  color: rgba(19, 42, 19, 0.8) !important;
  font-weight: 500 !important;
}

/* Login title and description */
.auth-fluid h3 {
  color: var(--corporate-sidebar) !important;
  font-weight: 700 !important;
  font-size: 1.75rem !important;
  margin-bottom: 1rem !important;
}

.auth-fluid p {
  color: rgba(19, 42, 19, 0.8) !important;
  font-size: 0.95rem !important;
  line-height: 1.6 !important;
}

/* Login brand/logo styling */
.auth-fluid .auth-brand a {
  color: var(--corporate-sidebar) !important;
  text-decoration: none !important;
}

.auth-fluid .auth-brand a:hover {
  color: var(--corporate-menu-active) !important;
}

/* Login form placeholder styling */
.auth-fluid .form-control::placeholder {
  color: rgba(19, 42, 19, 0.5) !important;
  font-size: 0.9rem !important;
}

/* Login form validation styling */
.auth-fluid .form-control.is-invalid {
  border-color: #dc3545 !important;
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.15) !important;
}

.auth-fluid .form-control.is-valid {
  border-color: var(--corporate-sidebar) !important;
  box-shadow: 0 0 0 0.2rem rgba(19, 42, 19, 0.15) !important;
}

/* Login page responsive adjustments */
@media (max-width: 768px) {
  .auth-fluid .auth-fluid-form-box {
    margin: 1rem !important;
    padding: 2rem !important;
  }
  
  .auth-fluid h3 {
    font-size: 1.5rem !important;
  }
  
  .auth-fluid .btn[type="submit"] {
    padding: 0.75rem 1.5rem !important;
  }
}

/* ===== ENHANCED BREADCRUMB STYLING ===== */
.page-breadcrumb {
  background: transparent !important;
  padding: 0.75rem 0 !important;
  margin-bottom: 1.5rem !important;
  border-bottom: 1px solid rgba(19, 42, 19, 0.1) !important;
}

.breadcrumb-title {
  font-size: 1.25rem !important;
  font-weight: 600 !important;
  color: var(--corporate-sidebar) !important;
  border-right: 2px solid rgba(19, 42, 19, 0.2) !important;
  padding-right: 1rem !important;
  margin-right: 1rem !important;
}

.page-breadcrumb .breadcrumb {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 0.875rem !important;
}

.page-breadcrumb .breadcrumb-item {
  color: rgba(19, 42, 19, 0.7) !important;
  font-weight: 500 !important;
}

.page-breadcrumb .breadcrumb-item.active {
  color: var(--corporate-sidebar) !important;
  font-weight: 600 !important;
}

.page-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  content: "\ea6e" !important;
  font-family: "remixicon" !important;
  font-size: 0.875rem !important;
  color: rgba(19, 42, 19, 0.5) !important;
  padding-right: 0.75rem !important;
  padding-left: 0.75rem !important;
}

.page-breadcrumb .breadcrumb-item a {
  color: rgba(19, 42, 19, 0.7) !important;
  text-decoration: none !important;
  transition: color 0.3s ease !important;
}

.page-breadcrumb .breadcrumb-item a:hover {
  color: var(--corporate-sidebar) !important;
}

/* ===== ENHANCED NAV-PILLS STYLING ===== */
.nav-pills {
  --ct-nav-pills-border-radius: 0.375rem;
  --ct-nav-pills-link-active-color: #ffffff;
  --ct-nav-pills-link-active-bg: var(--corporate-sidebar);
  background-color: rgba(19, 42, 19, 0.03) !important;
  border: 1px solid rgba(19, 42, 19, 0.08) !important;
  border-radius: 0.75rem !important;
  padding: 0.75rem !important;
  margin-bottom: 2rem !important;
}

.nav-pills .nav-link {
  border-radius: var(--ct-nav-pills-border-radius) !important;
  color: var(--corporate-sidebar) !important;
  font-weight: 500 !important;
  font-size: 0.875rem !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  border: 1px solid transparent !important;
  margin: 0.25rem !important;
  padding: 0.75rem 1.25rem !important;
  position: relative !important;
  overflow: hidden !important;
}

.nav-pills .nav-link:hover {
  color: var(--corporate-menu-active) !important;
  background-color: rgba(19, 42, 19, 0.08) !important;
  border-color: rgba(19, 42, 19, 0.15) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 8px rgba(19, 42, 19, 0.15) !important;
}

.nav-pills .nav-link:focus {
  color: var(--corporate-menu-active) !important;
  background-color: rgba(19, 42, 19, 0.12) !important;
  border-color: rgba(19, 42, 19, 0.25) !important;
  box-shadow: 0 0 0 0.2rem rgba(19, 42, 19, 0.2) !important;
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  color: var(--ct-nav-pills-link-active-color) !important;
  background: var(--corporate-gradient-1) !important;
  border-color: var(--corporate-sidebar) !important;
  box-shadow: 0 4px 12px rgba(19, 42, 19, 0.25) !important;
  transform: translateY(-2px) !important;
}

.nav-pills .nav-link.active:hover {
  background: var(--corporate-menu-active) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 6px 16px rgba(19, 42, 19, 0.35) !important;
}

/* Specific styling for nav-pills with bg-nav-pills class */
.bg-nav-pills {
  background-color: rgba(19, 42, 19, 0.03) !important;
  border: 1px solid rgba(19, 42, 19, 0.08) !important;
}

/* Nav-pills with rounded-0 class (for your specific use case) */
.nav-pills .nav-link.rounded-0 {
  border-radius: 0 !important;
  margin: 0 !important;
  border-left: 1px solid rgba(19, 42, 19, 0.08) !important;
  border-right: 1px solid rgba(19, 42, 19, 0.08) !important;
}

.nav-pills .nav-link.rounded-0:first-child {
  border-top-left-radius: 0.375rem !important;
  border-bottom-left-radius: 0.375rem !important;
  border-left: 1px solid rgba(19, 42, 19, 0.08) !important;
}

.nav-pills .nav-link.rounded-0:last-child {
  border-top-right-radius: 0.375rem !important;
  border-bottom-right-radius: 0.375rem !important;
  border-right: 1px solid rgba(19, 42, 19, 0.08) !important;
}

/* Enhanced text styling within nav-pills */
.nav-pills .nav-link h3 {
  color: inherit !important;
  font-weight: 600 !important;
  margin: 0 !important;
  font-size: 1.125rem !important;
  line-height: 1.4 !important;
  letter-spacing: -0.025em !important;
}

.nav-pills .nav-link.active h3 {
  color: #ffffff !important;
  font-weight: 700 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

/* Enhanced avatar styling within nav-pills */
.nav-pills .nav-link .avatar-title {
  background: rgba(255, 255, 255, 0.95) !important;
  color: var(--corporate-sidebar) !important;
  border: 2px solid rgba(255, 255, 255, 0.4) !important;
  box-shadow: 0 2px 8px rgba(19, 42, 19, 0.15) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.nav-pills .nav-link.active .avatar-title {
  background: rgba(255, 255, 255, 0.98) !important;
  color: var(--corporate-sidebar) !important;
  border: 2px solid rgba(255, 255, 255, 0.6) !important;
  box-shadow: 0 4px 12px rgba(19, 42, 19, 0.25) !important;
}

/* Enhanced hover effects for avatar */
.nav-pills .nav-link:hover .avatar-title {
  background: rgba(255, 255, 255, 0.98) !important;
  transform: scale(1.08) !important;
  box-shadow: 0 4px 12px rgba(19, 42, 19, 0.2) !important;
}

.nav-pills .nav-link.active:hover .avatar-title {
  transform: scale(1.1) !important;
  box-shadow: 0 6px 16px rgba(19, 42, 19, 0.3) !important;
}

/* ===== ENHANCED CARD STYLING ===== */
.card {
  border: 1px solid rgba(19, 42, 19, 0.08) !important;
  border-radius: 0.75rem !important;
  box-shadow: 0 2px 8px rgba(19, 42, 19, 0.05) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.card:hover {
  box-shadow: 0 4px 16px rgba(19, 42, 19, 0.1) !important;
  transform: translateY(-1px) !important;
}

.card-header {
  background-color: rgba(19, 42, 19, 0.02) !important;
  border-bottom: 1px solid rgba(19, 42, 19, 0.08) !important;
  padding: 1.25rem 1.5rem !important;
  border-top-left-radius: 0.75rem !important;
  border-top-right-radius: 0.75rem !important;
}

.card-title {
  color: var(--corporate-sidebar) !important;
  font-weight: 600 !important;
  font-size: 1.125rem !important;
  margin: 0 !important;
}

.card-body {
  padding: 1.5rem !important;
}

/* ===== ENHANCED BUTTON STYLING ===== */
.btn {
  border-radius: 0.5rem !important;
  font-weight: 500 !important;
  padding: 0.5rem 1.25rem !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  border: 1px solid transparent !important;
}

.btn-primary {
  background: var(--corporate-gradient-1) !important;
  border-color: var(--corporate-sidebar) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(19, 42, 19, 0.2) !important;
}

.btn-primary:hover {
  background: var(--corporate-menu-active) !important;
  border-color: var(--corporate-menu-active) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(19, 42, 19, 0.3) !important;
}

.btn-primary:focus {
  box-shadow: 0 0 0 0.2rem rgba(19, 42, 19, 0.25) !important;
}

/* ===== ENHANCED FORM STYLING ===== */
.form-control {
  border-radius: 0.5rem !important;
  border: 1px solid rgba(19, 42, 19, 0.15) !important;
  padding: 0.625rem 0.875rem !important;
  font-size: 0.875rem !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.form-control:focus {
  border-color: var(--corporate-sidebar) !important;
  box-shadow: 0 0 0 0.2rem rgba(19, 42, 19, 0.15) !important;
  background-color: #ffffff !important;
}

.form-select {
  border-radius: 0.5rem !important;
  border: 1px solid rgba(19, 42, 19, 0.15) !important;
  padding: 0.625rem 0.875rem !important;
  font-size: 0.875rem !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.form-select:focus {
  border-color: var(--corporate-sidebar) !important;
  box-shadow: 0 0 0 0.2rem rgba(19, 42, 19, 0.15) !important;
  background-color: #ffffff !important;
}

/* ===== ENHANCED TABLE STYLING ===== */
.table {
  border-radius: 0.5rem !important;
  overflow: hidden !important;
}

.table thead th {
  background-color: rgba(19, 42, 19, 0.05) !important;
  border-bottom: 2px solid rgba(19, 42, 19, 0.1) !important;
  color: var(--corporate-sidebar) !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.025em !important;
  padding: 1rem 0.75rem !important;
}

.table tbody tr {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.table tbody tr:hover {
  background-color: rgba(19, 42, 19, 0.03) !important;
  transform: scale(1.001) !important;
}

.table tbody td {
  padding: 1rem 0.75rem !important;
  border-bottom: 1px solid rgba(19, 42, 19, 0.05) !important;
  vertical-align: middle !important;
}

/* ===== ENHANCED SEARCH STYLING ===== */
.app-search {
  position: relative !important;
  margin-bottom: 1.5rem !important;
}

.app-search .form-control {
  padding-left: 2.5rem !important;
  padding-right: 1rem !important;
  border-radius: 2rem !important;
  background-color: rgba(19, 42, 19, 0.03) !important;
  border: 1px solid rgba(19, 42, 19, 0.1) !important;
}

.app-search .form-control:focus {
  background-color: #ffffff !important;
  border-color: var(--corporate-sidebar) !important;
  box-shadow: 0 0 0 0.2rem rgba(19, 42, 19, 0.15) !important;
}

.app-search .search-icon {
  position: absolute !important;
  left: 1rem !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: rgba(19, 42, 19, 0.5) !important;
  font-size: 1rem !important;
  z-index: 2 !important;
}

/* ===== ENHANCED PAGINATION STYLING ===== */
.pagination {
  margin: 0 !important;
}

.pagination .page-link {
  border-radius: 0.375rem !important;
  border: 1px solid rgba(19, 42, 19, 0.1) !important;
  color: var(--corporate-sidebar) !important;
  padding: 0.5rem 0.75rem !important;
  margin: 0 0.125rem !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.pagination .page-link:hover {
  background-color: rgba(19, 42, 19, 0.08) !important;
  border-color: rgba(19, 42, 19, 0.2) !important;
  color: var(--corporate-sidebar) !important;
  transform: translateY(-1px) !important;
}

.pagination .page-item.active .page-link {
  background: var(--corporate-gradient-1) !important;
  border-color: var(--corporate-sidebar) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(19, 42, 19, 0.2) !important;
}

/* ===== ENHANCED MODAL STYLING ===== */
.modal-content {
  border-radius: 0.75rem !important;
  border: none !important;
  box-shadow: 0 10px 40px rgba(19, 42, 19, 0.15) !important;
}

.modal-header {
  border-bottom: 1px solid rgba(19, 42, 19, 0.1) !important;
  padding: 1.5rem !important;
  border-top-left-radius: 0.75rem !important;
  border-top-right-radius: 0.75rem !important;
}

.modal-title {
  color: var(--corporate-sidebar) !important;
  font-weight: 600 !important;
  font-size: 1.25rem !important;
}

.modal-body {
  padding: 1.5rem !important;
}

.modal-footer {
  border-top: 1px solid rgba(19, 42, 19, 0.1) !important;
  padding: 1.5rem !important;
  border-bottom-left-radius: 0.75rem !important;
  border-bottom-right-radius: 0.75rem !important;
}

/* ===== RESPONSIVE ENHANCEMENTS ===== */
@media (max-width: 768px) {
  .page-breadcrumb {
    padding: 0.5rem 0 !important;
    margin-bottom: 1rem !important;
  }
  
  .breadcrumb-title {
    font-size: 1rem !important;
    padding-right: 0.75rem !important;
    margin-right: 0.75rem !important;
  }
  
  .nav-pills {
    padding: 0.5rem !important;
    margin-bottom: 1.5rem !important;
  }
  
  .nav-pills .nav-link {
    padding: 0.5rem 1rem !important;
    margin: 0.125rem !important;
  }
  
  .nav-pills .nav-link h3 {
    font-size: 1rem !important;
  }
  
  .card-body {
    padding: 1rem !important;
  }
  
  .card-header {
    padding: 1rem !important;
  }
}