/*================================================================================
	Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
	Version: 2.0
	Author: PIXINVENT
	Author URL: http://www.themeforest.net/user/pixinvent
================================================================================

NOTE:
------
PLACE HERE YOUR OWN SCSS CODES AND IF NEEDED, OVERRIDE THE STYLES FROM THE OTHER STYLESHEETS.
WE WILL RELEASE FUTURE UPDATES SO IN ORDER TO NOT OVERWRITE YOUR STYLES IT'S BETTER LIKE THIS.  */

/* ================================================================================================
   PESAKIT BRAND COLORS OVERRIDE
   ================================================================================================ */

:root {
  /* Primary PesaKit Colors */
  --pesakit-primary: #34796C;
  --pesakit-secondary: #FFCF32;
  --pesakit-accent: #EF4825;
  
  /* Extended PesaKit Color Palette */
  --pesakit-orange: #ED824A;
  --pesakit-yellow: #EDB41F;
  --pesakit-dark: #1a1a1a;
  --pesakit-gray-dark: #52504B;
  --pesakit-gray-medium: #807F7D;
  --pesakit-gray-light: #92918A;
  --pesakit-gray-lighter: #A5A49A;
  --pesakit-gray-lightest: #BBB9B1;
  --pesakit-teal-light: #58B1B2;
  --pesakit-teal-dark: #34796C;
  
  /* Color Variations */
  --pesakit-primary-light: rgba(96, 172, 155, 0.12);
  --pesakit-secondary-light: rgba(255, 207, 50, 0.12);
  --pesakit-accent-light: rgba(239, 72, 37, 0.12);
  --pesakit-primary-dark: #34796C;
  --pesakit-secondary-dark: #e6b82e;
  --pesakit-accent-dark: #d13d1f;
  
  /* Sidebar Colors - Simplified and Consistent */
  --sidebar-bg: #34796C;
  --sidebar-text: #FFFFFF;
  --sidebar-border: #34796C;
}

/* ================================================================================================
   LOGO AND BRAND STYLING
   ================================================================================================ */

/* Complete Sidebar Header Redesign */
.main-menu .navbar-header {
  background: #34796C !important;
  border-bottom: 3px solid var(--pesakit-secondary) !important;
  padding: 0 !important;
  min-height: 80px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
}

/* Clean Logo Container */
.main-menu .navbar-header .nav {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Logo Item */
.main-menu .navbar-header .nav-item.me-auto {
  flex: 1 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

/* Brand Logo Link */
.main-menu .navbar-header .navbar-brand {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 1rem !important;
  text-decoration: none !important;
  margin: 0 !important;
}

/* Brand Logo Span */
.main-menu .navbar-header .brand-logo {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
}

/* Logo Image */
.main-menu .navbar-header .brand-logo img {
  max-width: 160px !important;
  max-height: 50px !important;
  height: auto !important;
  width: auto !important;
  object-fit: contain !important;
  filter: brightness(1.2) contrast(1.1) !important;
}

/* Toggle Button */
.main-menu .navbar-header .nav-toggle {
  position: absolute !important;
  right: 15px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

.main-menu .navbar-header .nav-toggle .nav-link {
  color: var(--pesakit-primary) !important;
  padding: 8px !important;
  background: rgba(96, 172, 155, 0.1) !important;
  border-radius: 6px !important;
  transition: all 0.3s ease !important;
}

.main-menu .navbar-header .nav-toggle .nav-link:hover {
  color: var(--pesakit-secondary) !important;
  background: rgba(255, 207, 50, 0.2) !important;
}

/* Remove any unwanted elements from header */
.main-menu .navbar-header * {
  background-color: transparent !important;
}

.main-menu .navbar-header {
  background-color: #34796C !important;
}

/* Header Logo (if any) */
.header-navbar .navbar-brand img {
  max-height: 40px !important;
  width: auto !important;
  object-fit: contain !important;
}

/* ================================================================================================
   HEADER/TOP SECTION STYLING WITH PESAKIT COLORS
   ================================================================================================ */

/* Header Navbar */
.header-navbar {
  background: transparent !important;
  background-color: transparent !important;
  border-bottom: 1px solid rgba(40, 40, 37, 0.2) !important;
  box-shadow: none !important;
}

/* Header Navbar Container */
.header-navbar .navbar-container {
  background: transparent !important;
  background-color: transparent !important;
}

/* Header Navbar Links */
.header-navbar .navbar-nav .nav-link {
  color: #282825 !important;
  transition: all 0.3s ease !important;
}

.header-navbar .navbar-nav .nav-link:hover {
  color: #282825 !important;
  opacity: 0.8 !important;
}

.header-navbar .navbar-nav .nav-link.active {
  color: #282825 !important;
}

/* Header Navbar Brand */
.header-navbar .navbar-brand {
  color: #282825 !important;
}

.header-navbar .navbar-brand:hover {
  color: #282825 !important;
  opacity: 0.8 !important;
}

/* Header Navbar Toggle */
.header-navbar .navbar-toggler {
  border-color: rgba(40, 40, 37, 0.3) !important;
  color: #282825 !important;
}

.header-navbar .navbar-toggler:hover {
  border-color: #282825 !important;
  color: #282825 !important;
  opacity: 0.8 !important;
}

/* Header Shadow */
.header-navbar-shadow {
  background: transparent !important;
  background-color: transparent !important;
}

/* ================================================================================================
   FOOTER STYLING WITH PESAKIT COLORS
   ================================================================================================ */

/* Footer */
.footer {
  background: transparent !important;
  background-color: transparent !important;
  border-top: 1px solid rgba(40, 40, 37, 0.2) !important;
  color: #282825 !important;
  box-shadow: none !important;
}

.footer a {
  color: #282825 !important;
}

.footer a:hover {
  color: #282825 !important;
  opacity: 0.8 !important;
}

/* Scroll to top button */
.btn-primary.btn-icon.scroll-top {
  background-color: var(--pesakit-primary) !important;
  border-color: var(--pesakit-primary) !important;
  color: white !important;
}

.btn-primary.btn-icon.scroll-top:hover {
  background-color: var(--pesakit-primary-dark) !important;
  border-color: var(--pesakit-primary-dark) !important;
  transform: translateY(-2px) !important;
}

/* ================================================================================================
   SIDEBAR STYLING WITH PESAKIT COLORS
   ================================================================================================ */

/* Main Sidebar Container */
.main-menu {
  background: transparent !important;
  background-color: transparent !important;
  border-right: 1px solid rgba(40, 40, 37, 0.3) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

/* Sidebar Header */
.main-menu .navbar-header {
  background: transparent !important;
  border-bottom: 2px solid #282825 !important;
  padding: 1rem 0 !important;
}

.main-menu .navbar-header .brand-text {
  color: #282825 !important;
  font-weight: 600 !important;
  font-size: 1.25rem !important;
}

/* Sidebar Navigation Items - Consistent Colors */
.main-menu .navigation-main > li > a {
  color: #282825 !important;
  border-radius: 8px !important;
  margin: 2px 12px !important;
  padding: 12px 16px !important;
  transition: all 0.3s ease !important;
  background: transparent !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.main-menu .navigation-main > li > a:hover {
  color: #282825 !important;
  background: rgba(40, 40, 37, 0.1) !important;
  transform: translateX(4px) !important;
}

.main-menu .navigation-main > li.active > a {
  color: #282825 !important;
  background: rgba(40, 40, 37, 0.15) !important;
  border-left: 4px solid #282825 !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 8px rgba(40, 40, 37, 0.2) !important;
}

/* Sidebar Icons - Consistent Colors */
.main-menu .navigation-main > li > a i[data-feather] {
  color: #282825 !important;
  transition: all 0.3s ease !important;
  width: 18px !important;
  height: 18px !important;
  stroke-width: 2 !important;
}

.main-menu .navigation-main > li > a:hover i[data-feather] {
  color: #282825 !important;
}

.main-menu .navigation-main > li.active > a i[data-feather] {
  color: #282825 !important;
}

/* Submenu Styling - Consistent Colors */
.main-menu .navigation-main .has-sub > a::after {
  color: #282825 !important;
  transition: all 0.3s ease !important;
  font-size: 14px !important;
  margin-left: auto !important;
}

.main-menu .navigation-main .has-sub:hover > a::after {
  color: #282825 !important;
}

.main-menu .navigation-main .has-sub.open > a::after {
  color: #282825 !important;
}

/* Submenu Content - Consistent Colors */
.main-menu .navigation-main .menu-content {
  background: transparent !important;
  border-left: 2px solid #282825 !important;
  margin-left: 20px !important;
  border-radius: 0 8px 8px 0 !important;
}

.main-menu .navigation-main .menu-content li a {
  color: #282825 !important;
  padding: 8px 16px !important;
  margin: 2px 8px !important;
  border-radius: 6px !important;
  transition: all 0.3s ease !important;
  background: transparent !important;
  font-weight: 400 !important;
  text-decoration: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.main-menu .navigation-main .menu-content li a:hover {
  color: #282825 !important;
  background: rgba(40, 40, 37, 0.1) !important;
  transform: translateX(4px) !important;
}

.main-menu .navigation-main .menu-content li.active a {
  color: #FFCF32 !important;
  background: rgba(255, 207, 50, 0.12) !important;
  font-weight: 500 !important;
  border-left: 3px solid #FFCF32 !important;
  box-shadow: 0 2px 6px rgba(255, 207, 50, 0.2) !important;
}

/* Sidebar Toggle Button */
.main-menu .nav-toggle .nav-link {
  color: #282825 !important;
}

.main-menu .nav-toggle .nav-link:hover {
  color: #282825 !important;
}

/* Sidebar Shadow - Remove it */
.main-menu .shadow-bottom {
  display: none !important;
}

/* Main Menu Content */
.main-menu .main-menu-content {
  padding-top: 1rem !important;
  margin-top: 0 !important;
  background: transparent !important;
}

/* Navigation Main List */
.main-menu .navigation-main {
  padding-top: 0.5rem !important;
  margin-top: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
}

.main-menu .navigation-main > li {
  margin-bottom: 4px !important;
  background: transparent !important;
  background-color: transparent !important;
}

/* ================================================================================================
   AGGRESSIVE SIDEBAR BACKGROUND OVERRIDES - FORCE TRANSPARENCY
   ================================================================================================ */

/* Remove specific problematic backgrounds - more targeted approach */
.main-menu .nav-item,
.main-menu .nav-link {
  background-color: transparent !important;
}

/* Force sidebar background */
.main-menu {
  background-color: transparent !important;
  background: transparent !important;
}

/* Override the default #283046 navigation background */
.main-menu .navigation-main,
.main-menu .navigation.navigation-main {
  background: transparent !important;
  background-color: transparent !important;
}

/* Force sidebar header background */
.main-menu .navbar-header {
  background-color: transparent !important;
  background: transparent !important;
}

/* Force submenu background */
.main-menu .menu-content {
  background-color: transparent !important;
  background: transparent !important;
}

/* Remove funny backgrounds from navigation items */
.main-menu .navigation-main > li,
.main-menu .navigation-main > li > a,
.main-menu .navigation-main .menu-content > li,
.main-menu .navigation-main .menu-content > li > a {
  background-color: transparent !important;
  background: transparent !important;
}

/* Remove any Bootstrap or theme backgrounds */
.main-menu .nav-item,
.main-menu .nav-link,
.main-menu .nav-item.active,
.main-menu .nav-item:hover,
.main-menu .nav-item.open {
  background-color: transparent !important;
  background: transparent !important;
}

/* Remove any menu-specific backgrounds */
.main-menu .menu-fixed,
.main-menu .menu-light,
.main-menu .menu-accordion,
.main-menu .menu-shadow {
  background-color: transparent !important;
  background: transparent !important;
}

/* Force specific backgrounds only when needed */
.main-menu .navigation-main > li > a:hover {
  background-color: rgba(255, 207, 50, 0.25) !important;
  background: rgba(255, 207, 50, 0.25) !important;
}

.main-menu .navigation-main > li.active > a,
.main-menu .navigation-main > li.open > a {
  background-color: rgba(255, 207, 50, 0.15) !important;
  background: rgba(255, 207, 50, 0.15) !important;
  color: var(--pesakit-secondary) !important;
  border-left: 4px solid var(--pesakit-secondary) !important;
  box-shadow: 0 2px 8px rgba(255, 207, 50, 0.2) !important;
}

.main-menu .navigation-main .menu-content li a:hover {
  background-color: rgba(255, 207, 50, 0.25) !important;
  background: rgba(255, 207, 50, 0.25) !important;
}

.main-menu .navigation-main .menu-content li.active a {
  background-color: rgba(255, 207, 50, 0.12) !important;
  background: rgba(255, 207, 50, 0.12) !important;
  color: var(--pesakit-secondary) !important;
  border-left: 3px solid var(--pesakit-secondary) !important;
  box-shadow: 0 2px 6px rgba(255, 207, 50, 0.2) !important;
}

/* Override any conflicting sidebar styles */
.main-menu .nav-item .nav-link.active,
.main-menu .nav-item.active .nav-link,
.main-menu .nav-item.open .nav-link {
  color: var(--pesakit-secondary) !important;
  background-color: rgba(255, 207, 50, 0.15) !important;
  background: rgba(255, 207, 50, 0.15) !important;
  border-left: 4px solid var(--pesakit-secondary) !important;
  box-shadow: 0 2px 8px rgba(255, 207, 50, 0.2) !important;
}

/* Ensure active text and icons are yellow */
.main-menu .nav-item.active .nav-link,
.main-menu .nav-item.active .nav-link *,
.main-menu .navigation-main > li.active > a,
.main-menu .navigation-main > li.active > a *,
.main-menu .navigation-main .menu-content li.active a,
.main-menu .navigation-main .menu-content li.active a * {
  color: var(--pesakit-secondary) !important;
}

.main-menu .nav-item .nav-link {
  color: var(--sidebar-text) !important;
  background-color: transparent !important;
  background: transparent !important;
}

.main-menu .nav-item .nav-link:hover {
  color: var(--pesakit-secondary) !important;
  background-color: rgba(255, 207, 50, 0.25) !important;
  background: rgba(255, 207, 50, 0.25) !important;
}

/* ================================================================================================
   PRIMARY COLOR OVERRIDES
   ================================================================================================ */

/* Primary Color Overrides */
.bg-primary,
.btn-primary,
.badge-primary,
.progress-bar.bg-primary,
.list-group-item.active,
.nav-pills .nav-link.active,
.page-item.active .page-link,
.custom-control-input:checked ~ .custom-control-label::before,
.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before,
.custom-radio .custom-control-input:checked ~ .custom-control-label::before,
.form-check-input:checked {
  background-color: var(--pesakit-primary) !important;
  border-color: var(--pesakit-primary) !important;
}

.text-primary,
.nav-pills .nav-link.active,
.page-item.active .page-link,
.custom-control-input:checked ~ .custom-control-input:checked ~ .custom-control-label::before,
.custom-checkbox .custom-control-input:checked ~ .custom-control-input:checked ~ .custom-control-label::before,
.custom-radio .custom-control-input:checked ~ .custom-control-label::before {
  color: var(--pesakit-primary) !important;
}

.border-primary,
.btn-primary,
.badge-primary,
.progress-bar.bg-primary,
.list-group-item.active,
.nav-pills .nav-link.active,
.page-item.active .page-link {
  border-color: var(--pesakit-primary) !important;
}

/* Primary Button States */
.btn-primary:hover:not(.disabled):not(:disabled) {
  background-color: var(--pesakit-primary-dark) !important;
  border-color: var(--pesakit-primary-dark) !important;
  box-shadow: 0 8px 25px -8px var(--pesakit-primary) !important;
}

.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
  background-color: var(--pesakit-primary-dark) !important;
  border-color: var(--pesakit-primary-dark) !important;
}

/* Primary Light Variants */
.bg-light-primary,
.alert-primary,
.badge.badge-light-primary {
  background-color: var(--pesakit-primary-light) !important;
  color: var(--pesakit-primary) !important;
}

.alert-primary .alert-heading {
  box-shadow: rgba(96, 172, 155, 0.4) 0px 6px 15px -7px;
}

.alert-primary .alert-link {
  color: var(--pesakit-primary-dark) !important;
}

/* ================================================================================================
   EXTENDED PESAKIT COLOR CLASSES
   ================================================================================================ */

/* Orange Variants */
.bg-pesakit-orange {
  background-color: var(--pesakit-orange) !important;
}

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

.border-pesakit-orange {
  border-color: var(--pesakit-orange) !important;
}

/* Yellow Variants */
.bg-pesakit-yellow {
  background-color: var(--pesakit-yellow) !important;
}

.text-pesakit-yellow {
  color: var(--pesakit-yellow) !important;
}

.border-pesakit-yellow {
  border-color: var(--pesakit-yellow) !important;
}

/* Dark Variants */
.bg-pesakit-dark {
  background-color: var(--pesakit-dark) !important;
}

.text-pesakit-dark {
  color: var(--pesakit-dark) !important;
}

.border-pesakit-dark {
  border-color: var(--pesakit-dark) !important;
}

/* Teal Light Variants */
.bg-pesakit-teal-light {
  background-color: var(--pesakit-teal-light) !important;
}

.text-pesakit-teal-light {
  color: var(--pesakit-teal-light) !important;
}

.border-pesakit-teal-light {
  border-color: var(--pesakit-teal-light) !important;
}

/* Teal Dark Variants */
.bg-pesakit-teal-dark {
  background-color: var(--pesakit-teal-dark) !important;
}

.text-pesakit-teal-dark {
  color: var(--pesakit-teal-dark) !important;
}

.border-pesakit-teal-dark {
  border-color: var(--pesakit-teal-dark) !important;
}

/* ================================================================================================
   SECONDARY COLOR OVERRIDES
   ================================================================================================ */

/* Secondary Color Overrides (Yellow) */
.bg-secondary,
.btn-secondary,
.badge-secondary {
  background-color: var(--pesakit-secondary) !important;
  border-color: var(--pesakit-secondary) !important;
  color: #333 !important;
}

.text-secondary {
  color: var(--pesakit-secondary) !important;
}

.border-secondary {
  border-color: var(--pesakit-secondary) !important;
}

/* Secondary Button States */
.btn-secondary:hover:not(.disabled):not(:disabled) {
  background-color: var(--pesakit-secondary-dark) !important;
  border-color: var(--pesakit-secondary-dark) !important;
  box-shadow: 0 8px 25px -8px var(--pesakit-secondary) !important;
}

.btn-secondary:focus,
.btn-secondary:active,
.btn-secondary.active {
  background-color: var(--pesakit-secondary-dark) !important;
  border-color: var(--pesakit-secondary-dark) !important;
}

/* ================================================================================================
   ACCENT COLOR OVERRIDES
   ================================================================================================ */

/* Accent Color Overrides (Orange) */
.bg-danger,
.btn-danger,
.badge-danger,
.alert-danger {
  background-color: var(--pesakit-accent) !important;
  border-color: var(--pesakit-accent) !important;
}

.text-danger {
  color: var(--pesakit-accent) !important;
}

.border-danger {
  border-color: var(--pesakit-accent) !important;
}

/* Accent Button States */
.btn-danger:hover:not(.disabled):not(:disabled) {
  background-color: var(--pesakit-accent-dark) !important;
  border-color: var(--pesakit-accent-dark) !important;
  box-shadow: 0 8px 25px -8px var(--pesakit-accent) !important;
}

.btn-danger:focus,
.btn-danger:active,
.btn-danger.active {
  background-color: var(--pesakit-accent-dark) !important;
  border-color: var(--pesakit-accent-dark) !important;
}

/* ================================================================================================
   SUCCESS, INFO, WARNING COLOR OVERRIDES
   ================================================================================================ */

/* Success Color (using primary teal) */
.bg-success,
.btn-success,
.badge-success {
  background-color: var(--pesakit-primary) !important;
  border-color: var(--pesakit-primary) !important;
}

.text-success {
  color: var(--pesakit-primary) !important;
}

.border-success {
  border-color: var(--pesakit-primary) !important;
}

/* Info Color (using secondary yellow) */
.bg-info,
.btn-info,
.badge-info {
  background-color: var(--pesakit-secondary) !important;
  border-color: var(--pesakit-secondary) !important;
  color: #333 !important;
}

.text-info {
  color: var(--pesakit-secondary) !important;
}

.border-info {
  border-color: var(--pesakit-secondary) !important;
}

/* Warning Color (using accent orange) */
.bg-warning,
.btn-warning,
.badge-warning {
  background-color: var(--pesakit-accent) !important;
  border-color: var(--pesakit-accent) !important;
}

.text-warning {
  color: var(--pesakit-accent) !important;
}

.border-warning {
  border-color: var(--pesakit-accent) !important;
}

/* ================================================================================================
   LINK COLORS AND FORM ELEMENTS
   ================================================================================================ */

/* Link Colors */
a,
.text-primary {
  color: var(--pesakit-primary) !important;
}

a:hover,
.text-primary:hover {
  color: var(--pesakit-primary-dark) !important;
}

/* Form Elements */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: var(--pesakit-primary) !important;
  box-shadow: 0 0 0 0.2rem rgba(96, 172, 155, 0.25) !important;
}

.form-check-input:checked {
  background-color: var(--pesakit-primary) !important;
  border-color: var(--pesakit-primary) !important;
}

/* ================================================================================================
   NAVIGATION AND MENU
   ================================================================================================ */

/* Navigation and Menu */
.navbar-nav .nav-link.active,
.navbar-nav .nav-link.show,
.navbar-nav .nav-link:hover {
  color: var(--pesakit-primary) !important;
}

.navbar-brand:hover {
  color: var(--pesakit-primary) !important;
}

/* ================================================================================================
   CARDS, TABLES, AND COMPONENTS
   ================================================================================================ */

/* Cards and Components */
.card-header {
  border-bottom-color: rgba(96, 172, 155, 0.125) !important;
}

.card-footer {
  border-top-color: rgba(96, 172, 155, 0.125) !important;
}

/* Tables */
.table-primary {
  background-color: var(--pesakit-primary-light) !important;
  color: var(--pesakit-primary) !important;
}

.table-primary th,
.table-primary td {
  border-color: var(--pesakit-primary) !important;
}

/* Pagination */
.pagination .page-item.active .page-link {
  background-color: var(--pesakit-primary) !important;
  border-color: var(--pesakit-primary) !important;
}

.pagination .page-link:hover {
  color: var(--pesakit-primary) !important;
}

/* Progress Bars */
.progress-bar {
  background-color: var(--pesakit-primary) !important;
}

/* ================================================================================================
   BADGES AND ALERTS
   ================================================================================================ */

/* Badges */
.badge.badge-light-primary {
  background-color: var(--pesakit-primary-light) !important;
  color: var(--pesakit-primary) !important;
}

.badge.badge-light-secondary {
  background-color: var(--pesakit-secondary-light) !important;
  color: var(--pesakit-secondary) !important;
}

.badge.badge-light-danger {
  background-color: var(--pesakit-accent-light) !important;
  color: var(--pesakit-accent) !important;
}

/* ================================================================================================
   BUTTON VARIANTS
   ================================================================================================ */

/* Custom Button Variants */
.btn-outline-primary {
  color: var(--pesakit-primary) !important;
  border-color: var(--pesakit-primary) !important;
}

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

.btn-outline-secondary {
  color: var(--pesakit-secondary) !important;
  border-color: var(--pesakit-secondary) !important;
}

.btn-outline-secondary:hover {
  background-color: var(--pesakit-secondary) !important;
  border-color: var(--pesakit-secondary) !important;
  color: #333 !important;
}

.btn-outline-danger {
  color: var(--pesakit-accent) !important;
  border-color: var(--pesakit-accent) !important;
}

.btn-outline-danger:hover {
  background-color: var(--pesakit-accent) !important;
  border-color: var(--pesakit-accent) !important;
}

/* ================================================================================================
   FOCUS STATES AND HOVER EFFECTS
   ================================================================================================ */

/* Focus States */
.btn-primary:focus,
.btn-secondary:focus,
.btn-danger:focus {
  box-shadow: 0 0 0 0.2rem rgba(96, 172, 155, 0.25) !important;
}

/* Hover Effects */
.btn:hover {
  transform: translateY(-1px);
  transition: all 0.2s ease;
}

/* ================================================================================================
   DASHBOARD CARD STYLING
   ================================================================================================ */

/* Dashboard Statistics Cards */
.card-statistics .card-body {
  padding: 1.5rem !important;
}

.card-statistics .avatar {
  border-radius: 12px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

.card-statistics .avatar-content {
  border-radius: 12px !important;
}

.card-statistics h4,
.card-statistics h5 {
  color: var(--pesakit-dark) !important;
  margin-bottom: 0.5rem !important;
}

.card-statistics .card-text {
  color: #6c757d !important;
  font-size: 0.875rem !important;
}

/* Activity Cards */
.card .card-body .row.g-3 {
  margin: 0 !important;
}

.card .card-body .col-6 {
  padding: 0.5rem !important;
}

.card .avatar {
  border-radius: 10px !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
}

.card .avatar-content {
  border-radius: 10px !important;
}

/* Card Headers */
.card-header {
  background: rgba(255, 255, 255, 0.8) !important;
  border-bottom: 1px solid rgba(96, 172, 155, 0.1) !important;
  padding: 1rem 1.5rem !important;
}

.card-header .card-title {
  color: var(--pesakit-dark) !important;
  font-weight: 600 !important;
  margin: 0 !important;
}

/* ================================================================================================
   FINAL SIDEBAR TRANSPARENCY OVERRIDES
   ================================================================================================ */

/* Force complete transparency on all sidebar elements */
.main-menu *,
.main-menu *::before,
.main-menu *::after {
  background-color: transparent !important;
  background: transparent !important;
}

/* Ensure sidebar is completely transparent */
.main-menu,
.main-menu .navbar-header,
.main-menu .main-menu-content,
.main-menu .navigation-main,
.main-menu .menu-content,
.main-menu .nav-item,
.main-menu .nav-link {
  background: transparent !important;
  background-color: transparent !important;
}

/* Ensure consistent text styling */
.main-menu .navigation-main > li > a,
.main-menu .navigation-main .menu-content li a {
  font-weight: 600 !important;
}

/* ================================================================================================
   CUSTOM SCROLLBAR
   ================================================================================================ */

/* Custom Scrollbar */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: var(--pesakit-primary);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--pesakit-primary-dark);
}