@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&family=Poppins:wght@400;500;600;700&display=swap');

:root{
  --forest:#0B3218;
  --dark-green:#123F1C;
  --lime:#8BCF00;
  --bright-green:#58A900;
  --charcoal:#151A18;
  --off-white:#F5F5E8;
  --white:#FFFFFF;
  --gold:#F4C400;
  --red:#C91F25;
}

*{box-sizing:border-box;}

body{
  background:var(--forest);
  background-image: radial-gradient(circle at 10% 10%, rgba(139,207,0,0.06), transparent 40%),
                     radial-gradient(circle at 90% 80%, rgba(88,169,0,0.08), transparent 45%);
  color:var(--off-white);
  font-family:'Poppins', sans-serif;
  min-height:100vh;
}

h1,h2,h3,h4,.brand-heading{
  font-family:'Oswald', sans-serif;
  letter-spacing:.5px;
  color:var(--white);
  text-transform:uppercase;
}

a{ color: var(--lime); text-decoration:none; }
a:hover{ color:var(--bright-green); }

/* ---------- Layout shell ---------- */
.app-shell{ display:flex; min-height:100vh; }

.sidebar{
  width:250px;
  background:var(--charcoal);
  border-right:1px solid rgba(139,207,0,0.15);
  display:flex;
  flex-direction:column;
  position:fixed;
  top:0; bottom:0; left:0;
  z-index:1000;
}
.sidebar .brand{
  padding:24px 20px 12px 20px;
  border-bottom:1px solid rgba(139,207,0,0.12);
}
.sidebar .brand .logo-title{
  font-family:'Oswald',sans-serif;
  font-weight:700;
  font-size:1.35rem;
  color:var(--lime);
  line-height:1.1;
}
.sidebar .brand .logo-sub{
  font-size:.65rem;
  letter-spacing:2px;
  color:var(--off-white);
  opacity:.7;
}
.sidebar nav{ flex:1; padding:14px 10px; overflow-y:auto;}
.sidebar nav a{
  display:flex; align-items:center; gap:10px;
  padding:11px 14px; margin-bottom:4px; border-radius:10px;
  color:var(--off-white); font-weight:500; font-size:.92rem;
}
.sidebar nav a:hover{ background:rgba(139,207,0,0.08); color:var(--lime); }
.sidebar nav a.active{ background:var(--lime); color:var(--charcoal); font-weight:600; }
.sidebar .user-box{
  padding:16px 20px; border-top:1px solid rgba(139,207,0,0.12);
  font-size:.8rem;
}
.sidebar .user-box .role-badge{
  display:inline-block; background:rgba(139,207,0,0.15); color:var(--lime);
  padding:2px 8px; border-radius:20px; font-size:.7rem; margin-top:4px;
}

.main-area{ margin-left:250px; flex:1; display:flex; flex-direction:column; min-height:100vh;}
.topbar{
  padding:16px 28px; display:flex; justify-content:space-between; align-items:center;
  border-bottom:1px solid rgba(139,207,0,0.1);
}
.content{ padding:24px 28px 48px 28px; }

@media (max-width: 900px){
  .sidebar{ transform:translateX(-100%); transition:.2s; }
  .sidebar.open{ transform:translateX(0); }
  .main-area{ margin-left:0; }
}

/* ---------- Cards ---------- */
.card{
  background:var(--charcoal);
  border:1px solid rgba(139,207,0,0.15);
  border-radius:16px;
  color:var(--off-white);
}
.card-header{ background:transparent; border-bottom:1px solid rgba(139,207,0,0.12); font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:.5px;}

.kpi-card{
  background:linear-gradient(160deg, var(--dark-green), var(--charcoal));
  border:1px solid rgba(139,207,0,0.2);
  border-radius:16px;
  padding:20px;
}
.kpi-card .kpi-label{ font-size:.72rem; letter-spacing:1.5px; text-transform:uppercase; opacity:.75; }
.kpi-card .kpi-value{ font-family:'Oswald',sans-serif; font-size:2rem; font-weight:700; color:var(--white); }
.kpi-card.warning .kpi-value{ color:var(--gold); }
.kpi-card.danger .kpi-value{ color:var(--red); }
.kpi-card.accent .kpi-value{ color:var(--lime); }

.quick-action{
  display:flex; align-items:center; justify-content:center; gap:8px;
  background:var(--dark-green); border:1px solid var(--lime); border-radius:12px;
  color:var(--lime); font-weight:600; padding:16px; text-align:center;
  transition:.15s;
}
.quick-action:hover{ background:var(--lime); color:var(--charcoal); }

/* ---------- Buttons ---------- */
.btn-lime{ background:var(--lime); border-color:var(--lime); color:var(--charcoal); font-weight:600; }
.btn-lime:hover{ background:var(--bright-green); border-color:var(--bright-green); color:var(--white); }
.btn-outline-lime{ border-color:var(--lime); color:var(--lime); }
.btn-outline-lime:hover{ background:var(--lime); color:var(--charcoal); }
.btn-gold{ background:var(--gold); border-color:var(--gold); color:var(--charcoal); font-weight:600; }
.btn-danger-llc{ background:var(--red); border-color:var(--red); color:var(--white); }

/* ---------- Status pills ---------- */
.status-pill{ display:inline-block; padding:3px 12px; border-radius:20px; font-size:.72rem; font-weight:700; letter-spacing:.5px; text-transform:uppercase; }
.status-active{ background:rgba(88,169,0,0.2); color:var(--bright-green); border:1px solid var(--bright-green);}
.status-expiringsoon{ background:rgba(244,196,0,0.18); color:var(--gold); border:1px solid var(--gold);}
.status-expired{ background:rgba(201,31,37,0.18); color:var(--red); border:1px solid var(--red);}
.status-exhausted{ background:rgba(200,200,200,0.15); color:#c9c9c9; border:1px solid #999;}
.status-cancelled{ background:rgba(120,0,0,0.25); color:#e08080; border:1px solid #802020;}

/* ---------- Tables ---------- */
.table{ color:var(--off-white); }
.table thead th{ color:var(--lime); border-bottom:1px solid rgba(139,207,0,0.25); text-transform:uppercase; font-size:.75rem; letter-spacing:.5px;}
.table td, .table th{ border-color:rgba(139,207,0,0.08); vertical-align:middle;}
.table-hover>tbody>tr:hover{ background:rgba(139,207,0,0.06); color:var(--white);}

/* ---------- Forms ---------- */
.form-label{ color:var(--off-white); font-size:.85rem; font-weight:500;}
.form-control, .form-select{
  background:var(--dark-green); border:1px solid rgba(139,207,0,0.25); color:var(--white);
}
.form-control:focus, .form-select:focus{
  background:var(--dark-green); border-color:var(--lime); color:var(--white);
  box-shadow:0 0 0 .2rem rgba(139,207,0,0.2);
}
.form-control::placeholder{ color:rgba(245,245,232,0.4); }

/* ---------- POS ---------- */
.pos-product-card{
  background:var(--dark-green); border:1px solid rgba(139,207,0,0.2); border-radius:12px;
  padding:14px; cursor:pointer; transition:.15s; height:100%;
}
.pos-product-card:hover{ border-color:var(--lime); transform:translateY(-2px); }
.pos-cart{ background:var(--charcoal); border:1px solid var(--lime); border-radius:16px; padding:16px; position:sticky; top:16px; }

/* ---------- Login ---------- */
.login-wrap{ min-height:100vh; display:flex; align-items:center; justify-content:center; }
.login-card{
  background:var(--charcoal); border:1px solid var(--lime); border-radius:20px;
  padding:40px; width:100%; max-width:400px; text-align:center;
}

/* ---------- Misc ---------- */
.section-title{ font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:1px; color:var(--lime); font-size:1rem; margin-bottom:12px;}
.text-gold{ color:var(--gold) !important; }
.text-red-llc{ color:var(--red) !important; }
.leaf-divider{ height:2px; background:linear-gradient(90deg, var(--lime), transparent); border:none; margin:16px 0; }