/* Complete Green Theme for Corporate Dashboard */
:root {
  /* Your specified colors */
  --corporate-sidebar: #132A13;
  --corporate-menu-active: #0A1A0A;
  --corporate-pemasukan: #1B4D1B;
  --corporate-biaya-operasional: #0F2E0F;
  --corporate-pendapatan: #2D5A2D;
  --corporate-hutang: #1A3D1A;
  
  /* Corporate green gradients for all cards */
  --corporate-gradient-1: linear-gradient(135deg, #132A13 0%, #1B4D1B 100%);
  --corporate-gradient-2: linear-gradient(135deg, #1B4D1B 0%, #2D5A2D 100%);
  --corporate-gradient-3: linear-gradient(135deg, #0F2E0F 0%, #1A3D1A 100%);
  --corporate-gradient-4: linear-gradient(135deg, #2D5A2D 0%, #3A6B3A 100%);
  --corporate-gradient-5: linear-gradient(135deg, #1A3D1A 0%, #2D5A2D 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;
}

/* Force sidebar background to be green regardless of theme */
html[data-menu-color="light"] .leftside-menu,
html[data-menu-color="dark"] .leftside-menu,
html[data-menu-color="semi-dark"] .leftside-menu,
html[data-menu-color="brand"] .leftside-menu {
  background: var(--corporate-gradient-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;
}

/* ===== ALL WIDGET ICON BOX CARDS - RED THEME ===== */
.widget-icon-box {
  background: var(--corporate-gradient-1) !important;
  border-radius: 10px !important;
  border: none !important;
  overflow: hidden !important;
  position: relative !important;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
  transition: all 0.3s ease !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 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
  transform: translateY(-2px) !important;
}

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

/* ALL TEXT IN WIDGET CARDS - WHITE */
.widget-icon-box h5 {
  color: rgba(255, 255, 255, 0.9) !important;
  font-weight: 500 !important;
  font-size: 0.875rem !important;
  margin-bottom: 0.5rem !important;
}

.widget-icon-box h3 {
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 1.75rem !important;
  margin: 0.5rem 0 !important;
}

.widget-icon-box p {
  color: rgba(255, 255, 255, 0.8) !important;
  margin-bottom: 0 !important;
}

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

/* ALL AVATAR TITLES - WHITE BACKGROUND WITH RED ICONS */
.widget-icon-box .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;
}

/* ===== SPECIFIC CARD GRADIENTS ===== */

/* Request Order Card */
.widget-icon-box:has(.ri-24-hours-fill) {
  background: var(--corporate-gradient-2) !important;
}

/* Proses Pengiriman Card */
.widget-icon-box:has(.ri-truck-line) {
  background: var(--corporate-gradient-3) !important;
}

/* Pengiriman Sukses Card */
.widget-icon-box:has(.ri-checkbox-circle-line) {
  background: var(--corporate-gradient-4) !important;
}

/* RESI Pengiriman Card */
.widget-icon-box:has(.ri-qr-code-line) {
  background: var(--corporate-gradient-5) !important;
}

/* Surat Jalan Card */
.widget-icon-box:has(.ri-file-paper-line) {
  background: var(--corporate-gradient-1) !important;
}

/* Komplain/Laporan Card */
.widget-icon-box:has(.ri-notification-2-fill) {
  background: var(--corporate-gradient-2) !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(45,90,45,0.7),rgba(27,77,27,0.65),rgba(26,61,26,0.75)"] {
  --apex-chart-color-1: rgba(19, 42, 19, 0.6) !important;
  --apex-chart-color-2: rgba(45, 90, 45, 0.7) !important;
  --apex-chart-color-3: rgba(27, 77, 27, 0.65) !important;
  --apex-chart-color-4: rgba(26, 61, 26, 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(45, 90, 45, 0.7) !important;
  stroke: rgba(45, 90, 45, 0.85) !important;
}

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

.apex-charts .apexcharts-series[data\:realIndex="3"] .apexcharts-area,
.apex-charts .apexcharts-series[data\:realIndex="3"] .apexcharts-line {
  fill: rgba(26, 61, 26, 0.75) !important;
  stroke: rgba(26, 61, 26, 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(45, 90, 45, 0.7) !important;
}

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

.apex-charts .apexcharts-series[data\:realIndex="3"] .apexcharts-bar {
  fill: rgba(26, 61, 26, 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(26, 61, 26, 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(45, 90, 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(45, 90, 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.5rem !important;
  }
  
  .widget-icon-box .card-body {
    padding: 1rem !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"],
html[data-menu-color="brand"] {
  --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 1px 2px rgba(0, 0, 0, 0.3) !important;
  margin: 0 !important;
  line-height: 1.2 !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;
}

/* 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 FORM STYLING ===== */
.auth-fluid .auth-fluid-form-box {
  background: #ffffff !important;
  border-radius: 1rem !important;
  box-shadow: 0 10px 40px rgba(19, 42, 19, 0.1) !important;
  border-top: 4px double var(--corporate-sidebar) !important;
}

.auth-fluid .form-control {
  border-radius: 0.5rem !important;
  border: 1px solid rgba(19, 42, 19, 0.15) !important;
  padding: 0.875rem 1rem 0.875rem 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;
  z-index: 2 !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;
  }
}