:root{
  --green:#0f4f2b;
  --green2:#176b3a;
  --gold:#d7a536;
  --cream:#fff8e8;
  --soft:#f7f1dc;
  --dark:#1b1b1b;
  --muted:#666;
  --white:#fff;
  --border:#e9ddc3;
  --danger:#9f1d1d;
  --shadow:0 14px 35px rgba(0,0,0,.08);
}

*{box-sizing:border-box}

body{
  margin:0;
  font-family:Arial,sans-serif;
  background:var(--cream);
  color:var(--dark);
}

/* LOGIN */
.loginPage{
  min-height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  padding:30px;
}

.loginCard{
  width:100%;
  max-width:420px;
  background:#fff;
  border-radius:24px;
  padding:32px;
  text-align:center;
  box-shadow:var(--shadow);
}

.loginCard img{
  width:120px;
  height:120px;
  object-fit:contain;
  display:block;
  margin:0 auto 18px;
}

.loginCard h1{margin:0 0 10px;color:var(--green)}
.loginCard p{color:var(--muted)}
.loginCard form{display:grid;gap:14px;margin-top:20px}

/* LAYOUT */
.adminShell{
  display:grid;
  grid-template-columns:280px 1fr;
  min-height:100vh;
}

.sidebar{
  background:var(--green);
  color:#fff;
  padding:24px;
  position:sticky;
  top:0;
  height:100vh;
  overflow-y:auto;
}

.sidebar img{
  width:100px;
  height:100px;
  object-fit:contain;
  background:#fff;
  border-radius:50%;
  display:block;
  margin:0 auto 15px;
}

.sidebar h2{text-align:center;margin-bottom:25px}

.sidebar a,
.sidebar button{
  width:100%;
  display:block;
  padding:12px 14px;
  margin-bottom:10px;
  border-radius:12px;
  text-decoration:none;
  border:none;
  cursor:pointer;
  background:rgba(255,255,255,.08);
  color:#fff;
  font-weight:700;
  text-align:left;
}

.sidebar a:hover,
.sidebar a.active,
.sidebar button:hover{
  background:rgba(255,255,255,.18);
}

.adminMain{padding:30px}
.adminTop{margin-bottom:24px}
.adminTop h1{color:var(--green);margin:0}
.adminTop p{color:var(--muted);margin:6px 0 0}

/* CARDS */
.adminGrid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
  margin-bottom:25px;
}

.summaryCard,
.adminPanel{
  background:#fff;
  border:1px solid var(--border);
  box-shadow:var(--shadow);
}

.summaryCard{
  border-radius:20px;
  padding:20px;
}

.summaryCard h3{
  margin:0 0 10px;
  color:var(--muted);
  font-size:15px;
}

.summaryCard p{
  margin:0;
  color:var(--green);
  font-size:30px;
  font-weight:900;
}

.adminPanel{
  border-radius:22px;
  padding:24px;
  margin-bottom:24px;
}

.adminPanel h2{margin-top:0;color:var(--green)}

/* BUTTONS */
.btn{
  display:inline-block;
  background:var(--green);
  color:#fff!important;
  border:none;
  border-radius:999px;
  padding:12px 20px;
  cursor:pointer;
  font-weight:800;
  text-decoration:none;
}

.btn:hover{opacity:.95}

.btn.outline{
  background:transparent;
  color:var(--green)!important;
  border:2px solid var(--green);
}

.btn-danger,
.deleteBtn{
  background:var(--danger)!important;
  color:#fff!important;
}

/* FORMS */
.adminForm{display:grid;gap:16px}

label{
  display:block;
  font-weight:800;
  color:var(--green);
  margin-bottom:7px;
}

input,
select,
textarea,
.adminForm input,
.adminForm select,
.adminForm textarea{
  width:100%;
  padding:14px;
  border-radius:14px;
  border:1px solid #ddd;
  background:#fff;
  font-size:14px;
}

textarea{min-height:120px}

.grid2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}

.formActions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

/* INVENTORY */
.adminListHead{
  display:flex;
  justify-content:space-between;
  gap:18px;
  align-items:flex-start;
  margin-bottom:16px;
}

.sectionLabel{
  display:inline-block;
  background:var(--gold);
  color:var(--green);
  padding:7px 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
}

.adminSearchInput{
  width:100%;
  margin:12px 0 18px;
  padding:14px 16px;
  border-radius:14px;
  border:1px solid var(--border);
  background:#fff;
}

/* TABLES */
.tableWrap{
  width:100%;
  overflow-x:auto;
}

.tableWrap table,
.adminTable{
  width:100%;
  border-collapse:collapse;
}

.tableWrap th,
.tableWrap td,
.adminTable th,
.adminTable td{
  padding:12px;
  border-bottom:1px solid #eee;
  text-align:left;
  vertical-align:middle;
}

.tableWrap th,
.adminTable th{
  color:var(--green);
  font-size:13px;
}

/* PRODUCT IMAGE FIX */
#productsTable img,
#productsTable .adminProductThumb,
.tableWrap img{
  width:64px!important;
  height:64px!important;
  max-width:64px!important;
  max-height:64px!important;
  object-fit:contain!important;
  background:#fff!important;
  border:1px solid var(--border);
  border-radius:12px;
  padding:4px;
  display:block;
}

#productsTable td:first-child{
  width:84px!important;
  min-width:84px!important;
  max-width:84px!important;
  text-align:center;
}

/* VARIANTS */
.variantAdminBox{
  border:1px solid var(--border);
  background:var(--cream);
  border-radius:20px;
  padding:18px;
}

.variantHeader{
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:flex-start;
  margin-bottom:16px;
}

.variantHeader h3{
  margin:0;
  color:var(--green);
}

.variantHeader p{
  margin:5px 0 0;
  color:var(--muted);
}

.upgradedVariantRow{
  display:grid;
  grid-template-columns:1.1fr 1fr .7fr .7fr 1fr 1.1fr .7fr auto;
  gap:10px;
  align-items:end;
  background:#fff;
  border:1px solid var(--border);
  border-radius:18px;
  padding:14px;
  margin-bottom:12px;
}

.variantPreviewCell img{
  width:64px!important;
  height:64px!important;
  max-width:64px!important;
  max-height:64px!important;
  object-fit:contain!important;
  background:#fff;
  border:1px solid var(--border);
  border-radius:12px;
  padding:4px;
  display:block;
}

.variantActions{
  display:flex;
  flex-direction:column;
  gap:8px;
}

/* ACTION BUTTONS */
.actionBtns{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.editBtn,
.duplicateBtn,
.deleteBtn,
.duplicateVariantBtn,
.removeVariantBtn{
  border:0;
  border-radius:999px;
  padding:8px 12px;
  font-weight:800;
  cursor:pointer;
}

.editBtn{
  background:var(--gold);
  color:var(--green);
}

.duplicateBtn,
.duplicateVariantBtn{
  background:var(--green2);
  color:#fff;
}

.removeVariantBtn{
  background:var(--danger);
  color:#fff;
}

.statusBadge{
  display:inline-block;
  margin-top:6px;
  background:var(--gold);
  color:var(--green);
  padding:4px 8px;
  border-radius:999px;
  font-size:11px;
  font-weight:900;
}

.emptyState{
  background:var(--soft);
  border:1px dashed var(--gold);
  border-radius:16px;
  padding:18px;
  color:var(--muted);
}

/* BULK UPLOAD / MODES */
.modeGrid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}

.modeCard{
  display:grid;
  gap:8px;
  border:1px solid var(--border);
  background:#fff;
  border-radius:18px;
  padding:16px;
  cursor:pointer;
}

.modeCard strong{color:var(--green)}
.modeCard span{color:var(--muted);font-size:14px}
.modeCard input{width:auto}

/* RESPONSIVE */
@media(max-width:1100px){
  .adminShell{grid-template-columns:1fr}

  .sidebar{
    position:relative;
    height:auto;
  }

  .adminGrid{grid-template-columns:repeat(2,1fr)}

  .grid2,
  .modeGrid,
  .upgradedVariantRow{
    grid-template-columns:1fr;
  }

  .variantActions{
    flex-direction:row;
    flex-wrap:wrap;
  }
}

@media(max-width:700px){
  .adminMain{padding:18px}
  .adminGrid{grid-template-columns:1fr}
  .loginCard{padding:24px}
  .sidebar img{width:80px;height:80px}
  .adminListHead{flex-direction:column}

  .tableWrap table{
    min-width:780px;
  }

  #productsTable img,
  #productsTable .adminProductThumb,
  .tableWrap img,
  .variantPreviewCell img{
    width:54px!important;
    height:54px!important;
    max-width:54px!important;
    max-height:54px!important;
  }
}