<style>
/* ====== GLOBAL ====== */
body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: #FFF9F3; /* soft warm neutral */
  color: #2C3E50;
  overflow-x: hidden;
}


/* ====== CONTENT WRAPPER ====== */
.content {
 
  padding: 20px;
  transition: all 0.3s;
}

/* ====== TOGGLE BUTTON (MOBILE) ====== */
.menu-toggle {
  display: none;
  position: absolute;
  top: 12px;
  left: 15px;
  font-size: 1.5rem;
  color: #F39C12;
  cursor: pointer;
  z-index: 1100;
}
@media (max-width: 768px) {
  .sidebar { left: -250px; }
  .sidebar.active { left: 0; }
  .content { margin-left: 0; }
  .menu-toggle { display: block; }
}

/* ====== SYSTEM HEADER ====== */
.system-header {
  background: #1A73E8; /* solid corporate blue */
  color: #fff;
  padding: 15px 20px;
  border-radius: 12px;
  margin-bottom: 20px;
  box-shadow: 0 0 15px rgba(255, 102, 0, 0.7); /* subtle orange glow */
}
.system-header h1 {
  font-size: 1.8rem;
  font-weight: 700;
  margin: 0;
}
.welcome-text {
  font-size: 1.1rem;
  margin-top: 10px;
  color: #fff3e0;
}

/* ====== DASHBOARD CARDS ====== */
.card-stat {
  background: #fff;
  border: 1px solid #eaeaea;
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.card-stat:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
  border-color: #ddd;
}
.card-stat h6 {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #6c757d;
  margin-bottom: 6px;
}
.card-stat h2 {
  font-size: 2rem;
  font-weight: bold;
  margin: 0.5rem 0;
  transition: color 0.25s ease;
}
.card-stat:hover h2 {
  color: #0d6efd; /* bootstrap blue highlight */
}
.card-stat p {
  font-size: 0.85rem;
  margin: 0;
  opacity: 0.85;
}
.card-stat i {
  color: #FFD580; /* golden accent for icons */
}
.card-stat a.btn {
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 500;
  padding: 4px 10px;
  color: #2C3E50 !important;
  background-color: #FFD580 !important;
  border: none;
}
.card-stat a.btn:hover {
  background-color: #F39C12 !important;
  color: #fff !important;
}

/* ====== HIGHLIGHT BOX ====== */
.highlight-box {
  background: #ff6600;
  color: #fff;
  padding: 3px 8px;
  border-radius: 6px;
  font-weight: 600;
}

/* ====== QUOTE BOX ====== */
.quote-box {
  background: #fff;
  border-left: 5px solid #ff6600;
  padding: 15px 20px;
  border-radius: 10px;
  font-size: 1.1rem;
  margin-top: 30px;
  font-style: italic;
}

/* ====== DATATABLES (COMPACT MODE) ====== */
table.dataTable tbody th,
table.dataTable tbody td {
  padding: 4px 8px !important;
  vertical-align: middle;
  font-size: 0.85rem;
}
table.dataTable thead th {
  padding: 6px 8px !important;
  font-size: 0.8rem;
  white-space: nowrap;
}

/* ====== PRODUCT IMAGE CELL ====== */
.product-thumb {
  width: 45px;
  height: auto;
  cursor: zoom-in;
  border-radius: 4px;
}
.image-cell { text-align: center; }
.image-btn {
  border: none;
  background: transparent;
  padding: 2px 4px;
  font-size: 0.9rem;
  color: #E67E22;
  cursor: pointer;
}
.image-btn:hover { color: #C0392B; }

/* Dashboard Card Hover Effect */
.card {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  border-radius: 12px; /* optional, softer look */
}

.card:hover {
 
  box-shadow: 0 8px 20px rgba(255, 165, 0, 0.6); /* neon orange glow */
  border: 1px solid rgba(255, 165, 0, 0.8); /* subtle orange border */
}

</style>
