:root {
  --navbar-height: 56px;
  --primary-color: #4361ee;
  --secondary-color: #3f37c9;
  --success-color: #4cc9f0;
  --light-color: #f8f9fa;
  --dark-color: #212529;
}

body { 
  margin: 0; 
  height: 100vh; 
  overflow: hidden; 
  background-color: #f5f7fb; 
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
}

.navbar { 
  position: sticky; 
  top: 0; 
  z-index: 1050; 
}

/* Add a small offset so header never overlaps the top menu item */
.sidebar { 
  background: linear-gradient(180deg, var(--primary-color), var(--secondary-color)); 
  color: #fff; 
  position: fixed; 
  left: 0;  
  bottom: 0; 
  height: auto; 
  overflow-y: auto; 
  z-index: 1000; 
  width: 250px; 
  transition: transform .3s ease-in-out; 
}

.sidebar .nav-link { 
  color: rgba(255,255,255,.8); 
  margin: 5px 0; 
  border-radius: 5px; 
  transition: all .3s; 
}

.sidebar .nav-link:hover, 
.sidebar .nav-link.active { 
  background-color: rgba(255,255,255,.1); 
  color: #fff; 
}

.sidebar .nav-link i { 
  margin-right: 10px; 
}

#sidebarToggle { 
  display: block; 
  background: transparent; 
  border: none; 
  color: white; 
  cursor: pointer; 
}

@media (max-width: 767.98px) {
  .sidebar:not(.show) {
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .sidebar.show {
    transform: translateX(0);
  }
}

@media (min-width: 768px) {
  .sidebar {
    transform: translateX(0);
  }
  .sidebar:not(.show) {
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .sidebar.show {
    transform: translateX(0);
  }
}

.main-content {
  margin-left: 250px;
  padding: 20px;
  transition: margin-left .3s ease-in-out;
  height: calc(100vh - var(--navbar-height));
  overflow: auto;
  /* Add Flexbox properties for sticky footer */
  display: flex;
  flex-direction: column;
}

/* When sidebar is collapsed, expand content to full width */
body.sidebar-collapsed .main-content { 
  margin-left: 0; 
  flex: 0 0 100% !important; 
  max-width: 100% !important; 
}

/* On desktop, add appropriate padding when sidebar is collapsed for visual balance */
@media (min-width: 768px) {
  body.sidebar-collapsed .main-content {
    padding-left: 70px !important;   /* Increase left padding to visually balance the layout */
    padding-right: 70px !important;  /* Keep right padding balanced */
  }
}

@media (max-width: 767.98px) { 
  .main-content { 
    margin-left: 0; 
  } 
}

.card { 
  border-radius: 10px; 
  box-shadow: 0 4px 6px rgba(0,0,0,.1); 
  border: none; 
  margin-bottom: 20px; 
}

.card-header { 
  background-color: #fff; 
  border-bottom: 1px solid rgba(0,0,0,.1); 
  font-weight: 600; 
  border-radius: 10px 10px 0 0 !important; 
}

.btn-primary { 
  background-color: var(--primary-color); 
  border-color: var(--primary-color); 
}

.btn-primary:hover { 
  background-color: var(--secondary-color); 
  border-color: var(--secondary-color); 
}

.table th { 
  font-weight: 600; 
}

.badge-status { 
  padding: 5px 10px; 
  border-radius: 20px; 
  font-size: .8rem; 
}

.status-pending { 
  background-color: #fff3cd; 
  color: #856404; 
}

.status-confirmed { 
  background-color: #d1ecf1; 
  color: #0c5460; 
}

.status-shipped { 
  background-color: #cce5ff; 
  color: #004085; 
}

.status-delivered { 
  background-color: #d4edda; 
  color: #155724; 
}

.status-cancelled { 
  background-color: #f8d7da; 
  color: #721c24; 
}

.search-bar { 
  background-color: #fff; 
  border-radius: 30px; 
  padding: 10px 20px; 
  box-shadow: 0 2px 4px rgba(0,0,0,.1); 
}

.module-content { 
  display: none; 
}

.module-content.active { 
  display: block; 
}

.form-group { 
  margin-bottom: 15px; 
}

.form-label { 
  font-weight: 500; 
}

.modal-header { 
  background: linear-gradient(180deg, var(--primary-color), var(--secondary-color)); 
  color: #fff; 
  border-radius: 10px 10px 0 0 !important; 
}

.nav-tabs .nav-link { 
  color: var(--dark-color); 
  border: 1px solid transparent; 
}

.nav-tabs .nav-link.active { 
  color: var(--primary-color); 
  border-color: #dee2e6 #dee2e6 #fff; 
  border-top: 3px solid var(--primary-color); 
}

.nav-link.dropdown-toggle::after { 
  margin-left: auto; 
  transition: transform .3s ease; 
  border-top: .3em solid; 
  border-right: .3em solid transparent; 
  border-bottom: 0; 
  border-left: .3em solid transparent; 
}

.nav-link.dropdown-toggle[aria-expanded="true"]::after { 
  transform: rotate(90deg); 
}

#danhmuc-collapse .nav-link, 
#baocao-collapse .nav-link { 
  padding: .5rem 1rem; 
  font-size: .9rem; 
}

#danhmuc-collapse .nav-link:hover, 
#baocao-collapse .nav-link:hover { 
  background-color: rgba(255,255,255,.1); 
}

#danhmuc-collapse .nav-link.active, 
#baocao-collapse .nav-link.active { 
  background-color: rgba(255,255,255,.2); 
}

.collapse:not(.show) { 
  display: none; 
}

.collapsing { 
  height: 0; 
  overflow: hidden; 
  transition: height .35s ease; 
}

/* Overrides to fix left gap and header alignment */
.sidebar { 
  left: 0; 
  top: calc(var(--navbar-height)); 
}

.page-container { 
  padding-left: 0; 
  padding-right: 0; 
  overflow: hidden; 
  height: calc(100vh - var(--navbar-height)); 
}

.navbar .container-fluid { 
  padding-left: .5rem; 
}

.navbar-brand { 
  display: inline-flex; 
  align-items: center; 
}

/* Expand button styling */
.expand-btn {
  border: none;
  background: none;
  padding: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.expand-btn:hover {
  background-color: rgba(0,0,0,.05);
  border-radius: 4px;
}

/* Detail row styling */
.detail-row td {
  padding: 0 !important;
  border-top: none;
}

.detail-row .table {
  margin-bottom: 0;
}

/* Hide the default dropdown arrow for bootstrap-select elements */
.bootstrap-select .dropdown-toggle::after {
  display: none;
}