/* ===== Celestial-like Light Dashboard Theme ===== */
:root {
  --bg: #ffffff;             
  --sidebar-bg: #f3f4f6;      
  --sidebar-border: #d1d5db; 
  --text: #2c2c2c;
  --text-muted: #6b7280;
  --brand: #9797ba;
  --brand-hover: #9090a8;
  --card-bg: #ffffff;
  --border: #e5e7eb;
  --shadow: 0 4px 12px rgba(92, 86, 86, 0.05);
}

body {
  background: var(--bg) !important;  
  color: var(--text);
  font-family: "Inter", "Segoe UI", Arial, sans-serif;
  font-size: 14px;
}

/* --- Layout --- */
.admin-shell {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: 100vh;
  background: var(--bg) !important; 
}

.sidebar .user-box {
  background: transparent !important;
  padding: 12px 10px;
  border: none;
  box-shadow: none;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid #232a33; 
  border-radius: 0; 
}

.sidebar .avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #6b7280; 
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.sidebar .user-title {
  color: #e8ecf1;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: .2px;
}

.menu-item {
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: #e8ecf1;
  padding: 10px 14px;
  display: block;
  transition: background 0.2s, color 0.2s;
}

.menu-item:hover,
.menu-item.active {
  background: rgba(255, 255, 255, 0.08); 
  color: #ffffff;
}


/* --- Main Area --- */
.main-area {
  padding: 24px;
}

.page-title {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 20px;
}

/* Stats cards */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 20px;
  margin-bottom: 24px;
}
.stat-card {
  background: var(--card-bg);
  border-radius: 12px;
  padding: 20px;
  box-shadow: var(--shadow);
  text-align: center;
}
.stat-card h3 { font-size: 14px; color: var(--text-muted); margin-bottom: 8px; }
.stat-card p { font-size: 22px; font-weight: 700; color: var(--brand); }

/* General cards */
.card {
  background: var(--card-bg);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 20px;
  margin-bottom: 20px;
}
.card h3 { margin-bottom: 12px; font-size: 16px; }

/* Grid layout for main panels */
.main-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 16px;
}
.product-card {
  background: var(--card-bg);
  border-radius: 10px;
  padding: 16px;
  text-align: center;
  box-shadow: var(--shadow);
}

.site-footer {
    background-color: #363637;       /* black background */
    color: #fff;                 /* white text */
    text-align: center;          /* center-align text */
    padding: 20px 10px;          /* space inside footer */
}

.site-footer .info-item {
    margin: 5px 0;               /* space between items */
}

.site-footer .icon {
    margin-right: 6px;           /* spacing after icon */
}

/* ===== FORCE main area to light background ===== */
html, body {
  background: #ffffff !important; 
}


.admin-shell {
  background: #ffffff !important;
}


.admin-shell .main-area,
.admin-shell .main-content,
.admin-shell .content,
.admin-shell #content,
.admin-shell .dashboard,
.admin-shell .dashboard-content {
  background: #ffffff !important;
}


.admin-shell .main-area::before,
.admin-shell .main-area::after,
.admin-shell #content::before,
.admin-shell #content::after {
  content: none !important;
}


.product-card,
.card,
.stat-card {
  background: #ffffff !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.05);
}


body {
  background-image: none !important;
}

/* === Dark sidebar, light main === */


html, body,
.admin-shell,
.admin-shell .main-area,
.admin-shell .content,
.admin-shell #content {
  background: #ffffff !important;
  color: #2c2c2c; 
}


.sidebar {
  background: #0f141b !important;     
  color: #e8ecf1 !important;            
  border-right: 1px solid #232a33 !important;
}


.sidebar .user-box {
  background: #151b23 !important;
  border: 1px solid #232a33 !important;
  box-shadow: none !important;
  color: #e8ecf1 !important;
}
.sidebar .user-name {
  background: transparent !important;
  color: #e8ecf1 !important;
}

.menu-item {
  background: #171e27 !important;
  color: #e8ecf1 !important;
  border: 1px solid #232a33 !important;
}
.menu-item:hover,
.menu-item.active {
  background: #222b36 !important;
  color: #ffffff !important;
}

.sidebar .btn,
.sidebar .footer-btn,
.sidebar .settings,
.sidebar .info,
.sidebar .help {
  background: #171e27 !important;
  color: #e8ecf1 !important;
  border: 1px solid #232a33 !important;
}

.page-title,
.top-products-title {
  color: #000 !important;
}
.page-title h2 {
  color: #000 !important;
}

.product-grid .product-card {
  color: #000 !important;
}

.main-area h2,
.main-area .section-title,
.main-area .top-products-title {
  color: #000 !important;  
  font-weight: 600;
}

.main-area table {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.main-area th {
  background: var(--brand);
  color: white;
  text-align: left;
}

.main-area td {
  color: #333;
}

.badge{padding:2px 8px;border-radius:12px;font-size:12px;display:inline-block;}
.badge-default{background:#eee;color:#333;}
.badge-danger{background:#ffebee;color:#c62828;}

/* Inventory UI */
.inv-toolbar{display:flex;gap:12px;align-items:center;margin:12px 0 16px;}
.inv-card{background:#fff;border:1px solid #e8edf3;border-radius:14px;box-shadow:0 2px 10px rgba(18,22,28,.04);padding:16px;}
.table.inv-table{width:100%;border-collapse:separate;border-spacing:0 10px;}
.inv-table thead th{font-weight:700;color:#5b6b7f;border-bottom:1px solid #eaeef3;padding:10px 12px;}
.inv-table tbody tr{background:#fff;border:1px solid #ebf0f5;}
.inv-table tbody td{padding:14px 12px;vertical-align:middle;border-top:1px solid #eef3f7;}
.inv-row{border-radius:12px;overflow:hidden;}
.inv-media{display:flex;gap:12px;align-items:center;}
.inv-thumb{width:56px;height:56px;border-radius:10px;object-fit:contain;background:#f5f7fb;border:1px solid #e9eef5;box-shadow:inset 0 1px 0 #fff;}
.inv-name{font-weight:700;color:#1b2430;}
.inv-note{font-size:12px;color:#8a97a8;margin-top:2px;}
.badge{display:inline-block;padding:2px 10px;border-radius:999px;font-size:12px;font-weight:600;}
.badge-ok{background:#e9f7ef;color:#1b7a44;border:1px solid #cdeedb;}
.badge-low{background:#fff2f0;color:#c62828;border:1px solid #ffd6cf;}
.badge-na{background:#f0f4f8;color:#6b7b8f;border:1px solid #e1e7ee;}
.inv-input{width:140px;height:38px;border:1px solid #dfe7ef;border-radius:10px;padding:0 10px;}
.inv-btn{height:38px;border:none;border-radius:10px;padding:0 14px;background:#e53935;color:#fff;font-weight:700;cursor:pointer;}
.inv-btn:hover{background:#ce2f2c;}
.inv-row.low{box-shadow:0 0 0 2px #ffd6cf inset;}
.inv-footer-note{color:#8a97a8;font-size:12px;margin-top:10px}
.pagination-wrapper{display:flex;justify-content:center;margin-top:20px}
.pagination-wrapper .pagination{display:flex;gap:8px;list-style:none;padding:0}
.pagination-wrapper a{padding:6px 10px;border:1px solid #dfe7ef;border-radius:8px;text-decoration:none;color:#334155}
.pagination-wrapper .current{background:#1f2937;color:#fff;border-color:#1f2937;border-radius:8px;padding:6px 10px}

.btn-xs {
  padding: 6px 10px;
  border: 1px solid #111827;
  border-radius: 8px;
  background: #111827;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s ease-in-out;
}
.btn-xs:hover {
  background: #0b0f19;
}