/* Import Cairo Font from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@200;300;400;500;600;700;800;900&display=swap');

/* Apply Cairo Font to All Elements EXCEPT Icons */
* {
  font-family: 'Cairo', sans-serif !important;
}

/* Exclude Font Awesome Icons from Cairo Font */
.fa,
.fas,
.far,
.fal,
.fab,
.fad,
[class^="fa-"],
[class*=" fa-"],
.fontawesome-i2svg-active .fa,
.fontawesome-i2svg-active .fas,
.fontawesome-i2svg-active .far,
.fontawesome-i2svg-active .fal,
.fontawesome-i2svg-active .fab {
  font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Pro', 'Font Awesome 5 Brands', 'FontAwesome' !important;
}

/* Exclude Glyphicons (if used) */
.glyphicon {
  font-family: 'Glyphicons Halflings' !important;
}

/* Exclude Ionicons (AdminLTE uses these) */
.ion,
[class^="ion-"],
[class*=" ion-"] {
  font-family: 'Ionicons' !important;
}

body, html {
  font-family: 'Cairo', sans-serif !important;
}

/* Sidebar Active Item */
.main-sidebar .nav-sidebar .nav-item > .nav-link.active, .main-sidebar .nav-sidebar .nav-item > .nav-link.active:focus, .main-sidebar .nav-sidebar .nav-item > .nav-link.active:hover {
  background-color: var(--jungle-beige) !important;
  color: var(--jungle-green) !important;
}
.main-sidebar .nav-sidebar .nav-item > .nav-link.active .nav-icon {
  color: var(--jungle-green) !important;
}
/* Primary Button Override */
.btn-primary {
  background-color: var(--jungle-green) !important;
  border-color: var(--jungle-green) !important;
  color: #fff !important;
}
.btn-primary:active, .btn-primary:focus, .btn-primary:hover {
  background-color: var(--jungle-green-dark) !important;
  border-color: var(--jungle-green-dark) !important;
  color: #fff !important;
}
/* Jungle Farm ERP Brand Colors - Updated Palette */
:root {
  --jungle-green: #3D5A27;           /* Primary Dark Green */
  --jungle-beige: #F5F0E1;           /* Light Beige (unchanged) */
  --jungle-lightgreen: #A8B87D;      /* Light Olive Green */
  --jungle-cream: #E8E4C9;           /* Cream */
  --jungle-olive: #8B9556;           /* Olive Green */
  --jungle-sage: #9CA67C;            /* Sage Green */
  --jungle-brown: #A89C8A;           /* Taupe (unchanged) */
  --jungle-greige: #C9C0B0;          /* Greige */
  --jungle-lightcream: #F2E8D5;      /* Light Cream */

  /* Additional shades for UI elements */
  --jungle-green-dark: #2d4320;      /* Darker green for hover */
  --jungle-green-light: #4d6a37;     /* Lighter green for active */
}

/* Sidebar */
.main-sidebar, .main-sidebar::before {
  background-color: var(--jungle-green) !important;
}

/* Top Navbar */
.main-header {
  background-color: var(--jungle-beige) !important;
  color: var(--jungle-green) !important;
}

/* Small Boxes */
.small-box.bg-success {
  background-color: var(--jungle-green) !important;
}
.small-box.bg-warning {
  background-color: var(--jungle-beige) !important;
  color: var(--jungle-green) !important;
}
.small-box.bg-info {
  background-color: var(--jungle-lightgreen) !important;
  color: var(--jungle-green) !important;
}
.small-box.bg-danger {
  background-color: var(--jungle-brown) !important;
}

/* Content Wrapper */
.content-wrapper, .content-header {
  background-color: var(--jungle-lightcream) !important;
}

/* Buttons */
.btn-success {
  background-color: var(--jungle-green) !important;
  border-color: var(--jungle-green) !important;
}
.btn-warning {
  background-color: var(--jungle-beige) !important;
  color: var(--jungle-green) !important;
  border-color: var(--jungle-beige) !important;
}
.btn-info {
  background-color: var(--jungle-lightgreen) !important;
  color: var(--jungle-green) !important;
  border-color: var(--jungle-lightgreen) !important;
}
.btn-danger {
  background-color: var(--jungle-brown) !important;
  border-color: var(--jungle-brown) !important;
}

/* Card Headers */
.card-header {
  background-color: var(--jungle-cream) !important;
  color: var(--jungle-green) !important;
}

/* Jungle Farm Custom Classes */
.jungle-card-border {
  border: 2px solid var(--jungle-green);
  border-radius: 8px;
}

.jungle-card-header {
  background: linear-gradient(135deg, var(--jungle-green) 0%, var(--jungle-olive) 100%) !important;
  color: white !important;
  border-bottom: 2px solid var(--jungle-green);
}

.jungle-btn {
  background: linear-gradient(135deg, var(--jungle-green) 0%, var(--jungle-olive) 100%) !important;
  border: none !important;
  color: white !important;
  padding: 8px 20px;
  border-radius: 5px;
  transition: all 0.3s ease;
}

.jungle-btn:hover {
  background: linear-gradient(135deg, var(--jungle-green-dark) 0%, #6d7a45 100%) !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(61, 90, 39, 0.3);
}

.jungle-input {
  border: 1px solid #ddd;
  border-radius: 5px;
  transition: border-color 0.3s ease;
}

.jungle-input:focus {
  border-color: var(--jungle-green) !important;
  box-shadow: 0 0 0 0.2rem rgba(61, 90, 39, 0.25) !important;
}

.jungle-table-header {
  background: linear-gradient(135deg, var(--jungle-green) 0%, var(--jungle-olive) 100%) !important;
  color: white !important;
}

.text-jungle-green {
  color: var(--jungle-green) !important;
}

.bg-jungle-green {
  background-color: var(--jungle-green) !important;
}

.bg-jungle-beige {
  background-color: var(--jungle-beige) !important;
}

/* AdminLTE Brand Customization */
.jungle-brand-bg {
  background: linear-gradient(135deg, var(--jungle-green) 0%, var(--jungle-olive) 100%) !important;
}

.jungle-sidebar {
  background: linear-gradient(180deg, var(--jungle-green) 0%, var(--jungle-green-dark) 100%) !important;
}

/* Sidebar Styling */
.main-sidebar {
  background: linear-gradient(180deg, var(--jungle-green) 0%, var(--jungle-green-dark) 100%) !important;
}

.sidebar {
  background: transparent !important;
}

/* Sidebar Menu Items */
.nav-sidebar .nav-link {
  color: rgba(255, 255, 255, 0.9) !important;
  border-left: 3px solid transparent;
  transition: all 0.3s ease;
}

.nav-sidebar .nav-link:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
  border-left-color: var(--jungle-lightcream);
  color: white !important;
}

.nav-sidebar .nav-link.active {
  background-color: rgba(255, 255, 255, 0.15) !important;
  border-left-color: var(--jungle-lightcream);
  color: white !important;
  font-weight: 600;
}

/* Sidebar Menu Icons */
.nav-sidebar .nav-icon {
  color: var(--jungle-lightcream) !important;
  opacity: 0.9;
}

.nav-sidebar .nav-link:hover .nav-icon,
.nav-sidebar .nav-link.active .nav-icon {
  opacity: 1;
  color: white !important;
}

/* Sidebar Headers */
.nav-header {
  color: var(--jungle-lightcream) !important;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.5px;
  padding: 0.5rem 1rem;
  margin-top: 0.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Sidebar Submenu */
.nav-treeview {
  background-color: rgba(0, 0, 0, 0.1) !important;
}

.nav-treeview .nav-link {
  color: rgba(255, 255, 255, 0.8) !important;
  padding-right: 2rem !important;
}

.nav-treeview .nav-link:hover {
  background-color: rgba(255, 255, 255, 0.08) !important;
  color: white !important;
}

.nav-treeview .nav-link.active {
  background-color: rgba(255, 255, 255, 0.12) !important;
  color: white !important;
}

/* Brand Logo */
.brand-link {
  background-color: rgba(0, 0, 0, 0.1) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: white !important;
  font-weight: 700;
  font-size: 1.2rem;
}

.brand-link:hover {
  background-color: rgba(0, 0, 0, 0.15) !important;
}

.brand-image {
  opacity: 0.9;
}

/* Sidebar User Panel */
.user-panel {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.user-panel .info a {
  color: white !important;
}

/* Sidebar Search */
.sidebar-search-results .list-group-item {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.1);
  color: white;
}

.form-control-sidebar {
  background-color: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: white !important;
}

.form-control-sidebar::placeholder {
  color: rgba(255, 255, 255, 0.6) !important;
}

.btn-sidebar {
  background-color: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  color: white !important;
}

.btn-sidebar:hover {
  background-color: rgba(255, 255, 255, 0.2) !important;
}

.jungle-sidebar .nav-link {
  color: rgba(255, 255, 255, 0.9) !important;
}

.jungle-sidebar .nav-link:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
}

.jungle-sidebar .nav-link.active {
  background-color: var(--jungle-beige) !important;
  color: var(--jungle-green) !important;
}

.jungle-navbar {
  border-bottom: 3px solid var(--jungle-green) !important;
}

/* Breadcrumb Styling */
.breadcrumb {
  background-color: transparent !important;
  padding: 0.5rem 1rem;
}

.breadcrumb-item a {
  color: var(--jungle-green) !important;
  text-decoration: none;
  transition: all 0.3s ease;
}

.breadcrumb-item a:hover {
  color: var(--jungle-green-dark) !important;
  text-decoration: underline;
}

.breadcrumb-item.active {
  color: #6c757d;
}

.breadcrumb-item + .breadcrumb-item::before {
  content: "›";
  color: var(--jungle-green);
  font-size: 1.2em;
}

/* ========================================
   Force Sidebar to LEFT (LTR Layout)
   ======================================== */

/* Force sidebar to left */
.main-sidebar,
.sidebar {
  left: 0 !important;
  right: auto !important;
}

/* Force content wrapper margin to left */
.content-wrapper,
.main-footer {
  margin-left: 250px !important;
  margin-right: 0 !important;
}

/* Force main header margin to left */
.main-header {
  margin-left: 250px !important;
  margin-right: 0 !important;
}

/* When sidebar is collapsed */
@media (min-width: 768px) {
  .sidebar-collapse .content-wrapper,
  .sidebar-collapse .main-footer,
  .sidebar-collapse .main-header {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* Ensure body and html are LTR */
body,
html {
  direction: ltr !important;
}

/* ========================================
   Custom Checkbox Styling
   ======================================== */

/* Custom checkbox - checked state */
.custom-control-input:checked ~ .custom-control-label::before {
  background-color: #6B8E23 !important;
  border-color: #6B8E23 !important;
}

/* Custom checkbox - focus state */
.custom-control-input:focus ~ .custom-control-label::before {
  box-shadow: 0 0 0 0.2rem rgba(107, 142, 35, 0.25) !important;
}

/* Custom checkbox - active state */
.custom-control-input:active ~ .custom-control-label::before {
  background-color: #8B9556 !important;
  border-color: #8B9556 !important;
}

/* Checkbox hover effect */
.custom-control-label:hover::before {
  border-color: #6B8E23 !important;
}

/* Indeterminate state (for select all when some are selected) */
.custom-control-input:indeterminate ~ .custom-control-label::before {
  background-color: #6B8E23 !important;
  border-color: #6B8E23 !important;
}

/* ========================================
   Sidebar Icon Colors
   ======================================== */

/* Success - Green (Sales & Customers) */
.nav-icon.text-success {
  color: #28a745 !important;
}

/* Primary - Blue (Purchases & Suppliers) */
.nav-icon.text-primary {
  color: #007bff !important;
}

/* Warning - Yellow/Gold (Inventory) */
.nav-icon.text-warning {
  color: #ffc107 !important;
}

/* Orange (Production & Packaging) */
.nav-icon.text-orange {
  color: #fd7e14 !important;
}

/* Purple (Finance) */
.nav-icon.text-purple {
  color: #6f42c1 !important;
}

/* Info - Cyan (Reports) */
.nav-icon.text-info {
  color: #17a2b8 !important;
}

/* Secondary - Gray (System) */
.nav-icon.text-secondary {
  color: #6c757d !important;
}

/* Cyan - Dashboard */
.nav-icon.text-cyan {
  color: #17a2b8 !important;
}

/* Ensure icon colors are visible on dark sidebar */
.sidebar-dark-success .nav-icon.text-success,
.sidebar-dark-success .nav-icon.text-primary,
.sidebar-dark-success .nav-icon.text-warning,
.sidebar-dark-success .nav-icon.text-orange,
.sidebar-dark-success .nav-icon.text-purple,
.sidebar-dark-success .nav-icon.text-info,
.sidebar-dark-success .nav-icon.text-secondary,
.sidebar-dark-success .nav-icon.text-cyan {
  opacity: 1 !important;
}

/* Hover effect for colored icons */
.nav-link:hover .nav-icon.text-success,
.nav-link:hover .nav-icon.text-primary,
.nav-link:hover .nav-icon.text-warning,
.nav-link:hover .nav-icon.text-orange,
.nav-link:hover .nav-icon.text-purple,
.nav-link:hover .nav-icon.text-info,
.nav-link:hover .nav-icon.text-secondary,
.nav-link:hover .nav-icon.text-cyan {
  filter: brightness(1.2);
}

/* ========================================
   MOBILE RESPONSIVE FIXES
   ======================================== */

/* Hide sidebar on mobile by default */
@media (max-width: 991.98px) {
  /* Sidebar should be hidden by default on mobile */
  .main-sidebar {
    margin-left: -250px;
    transition: margin-left 0.3s ease-in-out;
  }

  /* When sidebar is open (body has sidebar-open class) */
  body.sidebar-open .main-sidebar {
    margin-left: 0;
  }

  /* Overlay when sidebar is open */
  body.sidebar-open::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1037;
  }

  /* Make sure content wrapper takes full width */
  .content-wrapper {
    margin-left: 0 !important;
    width: 100% !important;
  }

  /* Adjust navbar for mobile */
  .main-header {
    margin-left: 0 !important;
  }

  /* Make sidebar scrollable on mobile */
  .main-sidebar {
    overflow-y: auto;
    max-height: 100vh;
  }

  /* Dashboard cards - stack vertically on mobile */
  .dashboard-card {
    margin-bottom: 15px;
  }

  /* Tables - make them scrollable horizontally */
  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Reduce padding on mobile */
  .content-wrapper,
  .content {
    padding: 10px !important;
  }

  .card-body {
    padding: 15px !important;
  }

  /* Make buttons stack on mobile */
  .btn-group {
    display: flex;
    flex-direction: column;
  }

  .btn-group .btn {
    margin-bottom: 5px;
  }

  /* Adjust form groups */
  .form-group {
    margin-bottom: 15px;
  }

  /* Make select2 dropdowns full width */
  .select2-container {
    width: 100% !important;
  }
}

/* Tablet adjustments */
@media (min-width: 768px) and (max-width: 991.98px) {
  /* Slightly larger padding for tablets */
  .content-wrapper,
  .content {
    padding: 15px !important;
  }

  .card-body {
    padding: 20px !important;
  }
}

/* Small phones */
@media (max-width: 575.98px) {
  /* Even smaller padding for small phones */
  .content-wrapper,
  .content {
    padding: 5px !important;
  }

  .card-body {
    padding: 10px !important;
  }

  /* Stack dashboard cards */
  .col-lg-3,
  .col-md-6 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  /* Smaller font sizes */
  h1 {
    font-size: 1.5rem !important;
  }

  h2 {
    font-size: 1.3rem !important;
  }

  h3 {
    font-size: 1.1rem !important;
  }

  /* Smaller buttons */
  .btn {
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
  }

  /* Smaller table text */
  .table {
    font-size: 0.875rem;
  }

  /* Hide some table columns on very small screens */
  .table .d-none-mobile {
    display: none !important;
  }
}

/* Fix for AdminLTE sidebar toggle */
@media (max-width: 991.98px) {
  /* Make sure sidebar toggle button is visible */
  .nav-link[data-widget="pushmenu"] {
    display: block !important;
  }

  /* Ensure sidebar is above content */
  .main-sidebar {
    z-index: 1038;
  }

  /* Fix sidebar position */
  .sidebar-mini.sidebar-collapse .main-sidebar {
    margin-left: -250px !important;
  }

  .sidebar-mini:not(.sidebar-collapse) .main-sidebar {
    margin-left: 0 !important;
  }
}

/* Print styles */
@media print {
  .main-sidebar,
  .main-header,
  .content-header,
  .btn,
  .no-print {
    display: none !important;
  }

  .content-wrapper {
    margin: 0 !important;
    padding: 0 !important;
  }

  .card {
    border: 1px solid #000 !important;
    page-break-inside: avoid;
  }
}