/* Light dashboard cards */
.kpi-card {
  border-radius: 14px;
  border: 1px solid #e9ecef !important;;
  box-shadow: 0 4px 12px rgba(0,0,0,0.04);
  transition: all 0.2s ease;
}

.kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.06);
}

.kpi-title {
  font-size: 0.85rem;
  color: #6c757d;
  margin-bottom: 6px;
}

.kpi-value {
  font-size: 1.8rem;
  font-weight: 600;
  color: #212529;
}

/* Soft background colors */
.bg-soft-blue    { background: #f0f7ff !important; }
.bg-soft-green   { background: #f3fbf6 !important;  }
.bg-soft-orange  { background: #fff6eb !important;  }
.bg-soft-purple  { background: #f6f3ff !important;  }
.bg-soft-red     { background: #fff1f2 !important;  }

/* Low stock table */
.low-stock th {
  background: #f8f9fa  !important;;
}
.kpi-card i {
  opacity: 0.85;
}

.text-purple {
  color: #6f42c1 !important;
}



/* ==============================
   THEME Color
   ============================== */

/* ---------- BUTTONS ---------- */

/* Primary – Zoho Blue */
.btn-primary {
  background-color: #1558c0!important;
  color: #e8f0fe;
  border: 1px solid #d2e3fc!important;;
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: #152cc0!important;
  color: #e8f0fe;
  transform:none
}

/* Success – Zoho Green */
.btn-success {
  background-color: #e6f4ea;
  color: #188038;
  border: 1px solid #cce8d5;
}
.btn-success:hover,
.btn-success:focus {
  background-color: #cce8d5;
  color: #146c2e;
}

/* Warning – Zoho Amber */
.btn-warning {
  background: linear-gradient(135deg, #e5e7eb, #d1d5db);
  border: none;
  color: #374151;
}

.btn-warning:hover {
   background: linear-gradient(135deg, #d1d5db, #9ca3af);
}

/* Danger – Zoho Red */
.btn-danger {
  background-color: #fce8e6;
  color: #d93025;
  border: 1px solid #f4c7c3;
}
.btn-danger:hover,
.btn-danger:focus {
  background-color: #f4c7c3;
  color: #b3261e;
}

/* Secondary – Neutral Gray */
.btn-secondary {
  background-color: #f1f3f4;
  color: #3c4043;
  border: 1px solid #dadce0;
}
.btn-secondary:hover,
.btn-secondary:focus {
  background-color: #e8eaed;
  color: #202124;
}

/* Outline buttons */
.btn-outline-primary {
  color: #1a73e8;
  border-color: #d2e3fc;
}
.btn-outline-primary:hover {
  background-color: #e8f0fe;
}

/* General button polish */
.btn {
  border-radius: 8px;
  font-weight: 500;
  box-shadow: none !important;
}

/* ---------- TABLES ---------- */

.table {
  color: #3c4043;
}

/* Header */
.table thead th {
  background-color: #f8f9fa;
  color: #5f6368;
  font-weight: 600;
  border-bottom: 1px solid #e0e0e0;
}

/* Rows */
.table tbody tr {
  background-color: #ffffff;
}
.table tbody tr:hover {
  background-color: #f1f3f4;
}

/* Borders */
.table-bordered > :not(caption) > * {
  border-color: #e0e0e0;
}

/* DataTables */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  border-radius: 6px;
  border: 1px solid #dadce0;
  padding: 4px 8px;
}

/* Pagination */
.page-link {
  color: #1a73e8;
}
.page-item.active .page-link {
  background-color: #e8f0fe;
  border-color: #d2e3fc;
  color: #1a73e8;
}



/* Modern UI overrides and utilities (embedded version) */
:root{
  --page-bg: #f7fafc; /* pale */
  --surface: #ffffff; /* cards */
  --muted: #6b7280; /* gray-500 */
  --accent: #0d6efd; /* bootstrap primary */
  --card-border: rgba(15,23,42,0.04);
  --text: #0f1723; /* very dark text */
   --font-base: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-heading: 'Inter', system-ui, sans-serif;
}

body {
  font-family: var(--font-base);
  font-size: 16px;
}
body {
  min-height: calc(100vh - 70px);
      background: linear-gradient(135deg, #6085d661 0%, #7636e4 45%, #ff0775 100%)!important;;
    background-size: 200% 200%!important;
  
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill-opacity='0.03'%3E%3Crect width='1' height='1' fill='%23000'/%3E%3C/svg%3E");
  pointer-events: none;
}
h1,h2,h3,h4 {
  font-weight: 600;
}
/* Base page styles (light, soft) */
html,body{height:100%;}
/* Make full-page flex so footer can stick to bottom when content is short */
body{
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  /*background: linear-gradient(180deg,#ffffff 0%, var(--page-bg) 100%);*/
  background: #adadad24;
  color: var(--text);
 /* font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;*/
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}


/* Containers — keep a centered max width for content */
.container-fluid.mt-4 {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* Ensure main content area grows to fill available vertical space */
.site-content { flex: 1 0 auto; }

/* Modern card — light surface */
.card {
  background: var(--surface);
  border: 1px solid var(--card-border);
  border-radius: .75rem;
  box-shadow: 0 8px 20px rgba(15,23,42,0.04);
}


/*.btn-primary:hover{ transform: translateY(-1px); }*/

/* Forms */
.form-control {
  background: var(--surface);
  border-radius: .5rem;
  border: 1px solid rgb(24 24 24 / 27%);
  color: var(--text);
}

/* Table header subtle */
table.dataTable thead th { background: transparent; color: var(--text); }

/* Nav improvements — light colors to match Bootstrap */
.modern-nav{ list-style:none; padding:0; margin:0; display:flex; gap:.35rem; align-items:center; }
.modern-nav .nav-link{ display:inline-flex; align-items:center; gap:.5rem; padding:.45rem .65rem; border-radius:.45rem; color: #000000 !important; background: transparent; transition: all .12s ease; }
.modern-nav .nav-link:hover, .modern-nav .nav-link:focus{ background: rgba(13,110,253,0.06); transform: translateY(-1px); }
.modern-nav .nav-link.active{ background: rgba(13,110,253,0.08); color: #0b3d91 !important; }

/* Dropdown menu modern card (light) */
.dropdown-menu{ border-radius: .5rem; border:1px solid rgba(15,23,42,0.04); box-shadow: 0 10px 30px rgba(15,23,42,0.06); background: var(--surface); }

/* Responsive stacking */
@media (max-width:767px){ .modern-nav{ flex-direction:column; gap:.15rem; } .modern-nav .nav-link{ width:100%; } }

/* Utility: small muted text */
.text-muted { color: var(--muted) !important; }

/* Footer */
.site-footer {
  background: transparent;
  color: #fff;
  padding: 1.25rem 0;
  border-top: 1px solid rgba(15,23,42,0.04);
  margin-top: 0; /* managed by flex layout */
  font-size: .9rem;
  flex-shrink: 0; /* prevent footer from shrinking */
}
.site-footer a { color: var(--accent); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }

div.dataTables_wrapper div.dataTables_length select {
    width: 50%;
    display: inline-block;
}

.retro-bar-bg {
    background-image: url('https://images.unsplash.com/photo-1578662996442-48f60103fc96?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    min-height: 100vh;
    position: relative;
  }
  .retro-bar-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: -1;
    pointer-events: none;
  }
  .retro-card {
    background: rgba(0, 0, 0, 0.8);
    border: 2px solid #ff00ff;
    box-shadow: 0 0 20px rgba(255, 0, 255, 0.5);
    color: #ffffff;
    z-index: 2;
    position: relative;
  }
  .retro-card h4 {
    color: #00ffff;
    text-shadow: 0 0 10px #00ffff;
  }
  .retro-card p {
    color: #ffaa00;
  }
  .retro-card i {
    color: #ff00bf;
  }
  .form-label {
    color: #ffffff;
  }
  .form-control {
    background: rgb(255, 255, 255);
    border: 1px solid #ff00ff;
    color: #000000;
  }
  .form-control:focus {
     background: rgb(255, 255, 255);
    border-color: #00ffff;
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
    color: #000000;
  }
  .input-group-text {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid #ff00ff;
    color: #ffffff;
  }
 .btn-primary {
  background: linear-gradient(
    135deg,
    #2563eb 0%,
    #7c3aed 45%,
    #db2777 100%
  );
  border: none;
  color: #ffffff;
}

.btn-primary:hover {
  background: linear-gradient(
    135deg,
    #1e40af 0%,
    #6d28d9 45%,
    #be185d 100%
  );
}
.btn-primary {
  border-radius: 5px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.15),
    0 8px 22px rgba(0,0,0,0.35);
  transition: all 0.25s ease;
}

.btn-primary:hover {
  transform: translateY(-1px);
}

.btn-primary:active {
  transform: translateY(0);
  box-shadow:
    inset 0 2px 6px rgba(0,0,0,0.6);
}
.btn-primary {
  background-size: 200% 200%;
  animation: gradientShift 4s ease infinite;
}

@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

  .alert-danger {
    background: rgba(255, 0, 0, 0.8);
    border: 1px solid #ff0000;
    color: #ffffff;
  }