/* Pallet Piks — Dark Theme (Mist Green) — Spacing & Layout Refinements */
:root{
  /* Palette */
  --bg:#0b1220; --surface:#111827; --surface-2:#0f172a;
  --ink:#e5e7eb; --muted:#9aa5b1; --line:#1f2937;
  --brand:#88d4ab; --brand-600:#74c49c; --brand-700:#5ab387;
  --danger:#ef4444;

  /* Layout / radius / shadows */
  --container-w: 1200px; /* was 1100, gives grids more breathing room */
  --pad: 20px;
  --gap: 16px;
  --gap-lg: 24px;
  --radius-lg:16px; --radius-md:12px;
  --shadow-lg:0 10px 30px rgba(0,0,0,.35);
  --shadow-sm:0 4px 12px rgba(0,0,0,.25);
}

/* Base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;
  color:var(--ink);
  background:radial-gradient(1200px 800px at 80% -10%, #0e1729 0%, var(--bg) 45%, #09101d 100%);
}
a{color:var(--brand);text-decoration:none}
a:hover{color:var(--brand-600)}
.container{width:min(var(--container-w), 92vw);margin:0 auto}

/* Global vertical rhythm: everything in main gets evenly spaced */
main.container{
  padding: calc(var(--pad) + 6px) 0 var(--pad);
  display:grid;
  row-gap: var(--gap-lg);
}
h1,h2,h3{margin: 0 0 8px}
p{margin: 0 0 10px}
.muted{color:var(--muted)}

/* Header / nav */
.site-header{
  background:rgba(17,24,39,.9);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:20;
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between;
  gap: var(--gap); padding: 12px 0;
}
.brand{font-weight:800;font-size:18px;color:#f1f5f9}
.nav{display:flex; align-items:center; gap: 10px; flex-wrap:wrap}
.nav a{
  color:#d1d5db; padding:8px 12px; border-radius:12px;
}
.nav a:hover{background:var(--surface-2); color:#fff}

/* Dropdown */
.dropdown{position:relative}
.dropbtn{
  border:1px solid var(--line); background:var(--surface);
  color:var(--ink); border-radius:var(--radius-md);
  padding:8px 12px; box-shadow:var(--shadow-sm)
}
.dropdown-content{
  display:none; position:absolute; right:0;
  background:var(--surface); min-width:220px; padding:6px;
  border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); z-index:30
}
.dropdown:hover .dropdown-content{display:block}
.dropdown-content a{display:block; padding:10px; border-radius:10px; color:var(--ink)}
.dropdown-content a:hover{background:var(--surface-2)}

/* Footer */
.site-footer{
  border-top:1px solid var(--line);
  padding: 20px 0; background:var(--surface);
  margin-top: 8px; color:#cbd5e1
}

/* Panels / cards */
.panel,.card{
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
  border:1px solid var(--line); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
}
.panel{padding:16px}
.card{overflow:hidden}
.card-body{padding:12px}
.card .title{font-weight:700; margin-bottom:6px; color:#f3f4f6}
.card .price{font-weight:800; color:#e2e8f0}

/* Home & catalog grids */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); /* a touch wider */
  gap: var(--gap-lg);
  margin: 4px 0;
}
.card img{
  width:100%; height:200px; object-fit:cover;
  background:#0b1220; filter:saturate(.96) contrast(1.05)
}

/* Product page layout */
.product{
  display:grid;
  grid-template-columns: 1.1fr .9fr; /* more bias to image */
  gap: var(--gap-lg);
}
.product-img{
  width:100%; height:460px; object-fit:cover;
  border-radius:var(--radius-lg); border:1px solid var(--line); background:#0b1220; box-shadow:var(--shadow-lg)
}
.product-info{display:grid; align-content:start; gap: 10px}
.product-info .price.big{font-size:30px; margin:2px 0; color:#f8fafc}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 16px; border:1px solid var(--line);
  border-radius:14px;
  background:linear-gradient(180deg, #162235 0%, #0f1a2b 100%);
  color:#e5e7eb; box-shadow:var(--shadow-sm);
  transition:transform .06s ease, background .2s ease, border-color .2s ease;
}
.btn:hover{ transform:translateY(-1px); border-color:#28364d }
.btn:active{ transform:translateY(0) scale(.98) }
.btn.primary{
  background:linear-gradient(180deg, var(--brand) 0%, var(--brand-600) 100%);
  border-color:transparent; color:#0b1220; font-weight:700;
}
.btn.primary:hover{ background:linear-gradient(180deg, var(--brand-600) 0%, var(--brand-700) 100%) }
.btn.ghost{ background:transparent; border-color:var(--brand-700); color:var(--brand) }
.btn.ghost:hover{ background:rgba(136,212,171,.08) }
.btn.danger{ background:linear-gradient(180deg, #f87171, #ef4444); border-color:#ef4444; color:#0b1220; font-weight:700 }

/* Actions row */
.actions{display:flex; gap:12px; flex-wrap:wrap; margin-top: 8px}

/* Forms */
.grid-form{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); /* wider inputs */
  gap: var(--gap);
}
.grid-form label{display:flex; flex-direction:column; gap:6px}
.grid-form input,.grid-form textarea,.grid-form select{
  border:1px solid var(--line); border-radius:12px; padding:12px;
  background:#0e1628; color:#e5e7eb
}
.grid-form input:focus,.grid-form textarea:focus,.grid-form select:focus{
  outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(136,212,171,.15)
}

/* Tables */
.table{
  width:100%; border-collapse:separate; border-spacing:0;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:var(--shadow-lg);
}
.table thead th{
  background:linear-gradient(180deg, #142035, #101a2c);
  color:#cbd5e1; letter-spacing:.02em; font-weight:700;
  border-bottom:1px solid var(--line)
}
.table th,.table td{padding:14px}
.table tbody tr{border-bottom:1px solid var(--line)}
.table tbody tr:nth-child(odd){background:#0f1524}
.table tbody tr:hover{background:#121c30}
.table tfoot td{font-weight:800; color:#f1f5f9}

/* Admin dashboard: stat tiles */
.stats{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap: var(--gap);
  margin: 0; /* balanced by main grid gap */
}
.stat{
  background:linear-gradient(180deg, #0f1a2b, #0c1525);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:18px; text-align:center; color:#cbd5e1
}
.stat-num{font-weight:900; font-size:30px; color:#e5fff1}

/* Auth / alerts */
.auth .panel{max-width:460px; margin:10vh auto; background:var(--surface)}
.alert.error{
  background:#2a1212; border:1px solid #7f1d1d; color:#fecaca;
  border-radius:10px; padding:10px; margin:10px 0
}

/* Receipt layout */
.receipt .receipt-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:12px}

/* Responsive */
@media (max-width:1000px){
  .product{grid-template-columns:1fr}
  .product-img{height:360px}
  .nav{gap:6px}
}
@media (max-width:640px){
  .table th,.table td{padding:10px}
  .btn{padding:9px 14px}
}