/* Complete Red Theme for Corporate Dashboard */
:root {
  /* Your specified colors */
  --corporate-sidebar: #6E0D14;
  --corporate-menu-active: #3E0006;
  --corporate-pemasukan: #640D15;
  --corporate-biaya-operasional: #260903;
  --corporate-pendapatan: #AE2831;
  --corporate-hutang: #38050E;
  
  /* Corporate red gradients for all cards */
  --corporate-gradient-1: linear-gradient(135deg, #6E0D14 0%, #8a1a23 100%);
  --corporate-gradient-2: linear-gradient(135deg, #640D15 0%, #8a1a23 100%);
  --corporate-gradient-3: linear-gradient(135deg, #260903 0%, #3a0d05 100%);
  --corporate-gradient-4: linear-gradient(135deg, #AE2831 0%, #c42f3a 100%);
  --corporate-gradient-5: linear-gradient(135deg, #38050E 0%, #4a0714 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(110, 13, 20, 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(110, 13, 20, 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(110, 13, 20, 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(110, 13, 20, 0.1) !important;
}

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

.navbar-custom .app-search form .form-control::placeholder {
  color: rgba(110, 13, 20, 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(110, 13, 20, 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;
}

.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(110, 13, 20, 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(110, 13, 20, 0.1) !important;
}

/* ===== CARD HEADERS ===== */
.card-header {
  background-color: rgba(110, 13, 20, 0.05) !important;
  border-bottom: 1px solid rgba(110, 13, 20, 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 red palette with proper opacity */
.apex-charts[data-colors="rgba(110,13,20,0.6),rgba(174,40,49,0.7),rgba(100,13,21,0.65),rgba(56,5,14,0.75)"] {
  --apex-chart-color-1: rgba(110, 13, 20, 0.6) !important;
  --apex-chart-color-2: rgba(174, 40, 49, 0.7) !important;
  --apex-chart-color-3: rgba(100, 13, 21, 0.65) !important;
  --apex-chart-color-4: rgba(56, 5, 14, 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(110, 13, 20, 0.6) !important;
  stroke: rgba(110, 13, 20, 0.8) !important;
}

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

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

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

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

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

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

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

/* Chart grid and axis colors with subtle red */
.apex-charts .apexcharts-gridline {
  stroke: rgba(110, 13, 20, 0.1) !important;
}

.apex-charts .apexcharts-xaxis line,
.apex-charts .apexcharts-yaxis line {
  stroke: rgba(110, 13, 20, 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 RED - 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(110, 13, 20, 0.7) !important;
}

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

.apexcharts-tooltip-title {
  background: rgba(56, 5, 14, 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 RED 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(174, 40, 49, 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(110, 13, 20, 0.6) !important;
  stroke: rgba(248, 249, 250, 0.3) !important;
  stroke-width: 1 !important;
}

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

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

.apex-charts .apexcharts-radialbar-area {
  fill: rgba(110, 13, 20, 0.6) !important;
}

/* Donut chart specific styling */
.apex-charts .apexcharts-donut-slice-pie {
  fill: rgba(110, 13, 20, 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 RED - 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 red */
.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 red 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 red */
.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(110, 13, 20, 0.05) !important;
  border: 1px solid rgba(110, 13, 20, 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(110, 13, 20, 0.1) !important;
  border-color: rgba(110, 13, 20, 0.2) !important;
}

.nav-pills .nav-link:focus {
  color: var(--corporate-menu-active) !important;
  background-color: rgba(110, 13, 20, 0.15) !important;
  border-color: rgba(110, 13, 20, 0.3) !important;
  box-shadow: 0 0 0 0.2rem rgba(110, 13, 20, 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(110, 13, 20, 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(110, 13, 20, 0.4) !important;
}

/* Specific styling for nav-pills with bg-nav-pills class */
.bg-nav-pills {
  background-color: rgba(110, 13, 20, 0.05) !important;
  border: 1px solid rgba(110, 13, 20, 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(110, 13, 20, 0.1) !important;
  border-right: 1px solid rgba(110, 13, 20, 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(110, 13, 20, 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(110, 13, 20, 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"] {
  --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;
}

/* ===== 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(110, 13, 20, 0.05) !important;
  border: 1px solid rgba(110, 13, 20, 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(110, 13, 20, 0.1) !important;
  border-color: rgba(110, 13, 20, 0.2) !important;
}

.nav-pills .nav-link:focus {
  color: var(--corporate-menu-active) !important;
  background-color: rgba(110, 13, 20, 0.15) !important;
  border-color: rgba(110, 13, 20, 0.3) !important;
  box-shadow: 0 0 0 0.2rem rgba(110, 13, 20, 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(110, 13, 20, 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(110, 13, 20, 0.4) !important;
}

/* Specific styling for nav-pills with bg-nav-pills class */
.bg-nav-pills {
  background-color: rgba(110, 13, 20, 0.05) !important;
  border: 1px solid rgba(110, 13, 20, 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(110, 13, 20, 0.1) !important;
  border-right: 1px solid rgba(110, 13, 20, 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(110, 13, 20, 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(110, 13, 20, 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 ===== */