/* ===============================
   Panduranga Jewellers ERP v2
   Corporate / Luxury UI
   =============================== */

:root{
  --bg:#f5f7fb;
  --card:#ffffff;
  --dark:#0f172a;
  --sidebar:#111827;
  --text:#1f2937;
  --muted:#6b7280;
  --border:#e5e7eb;
  --gold:#d4af37;
  --gold-soft:#f3e7b3;
}

/* RESET */
*{margin:0;padding:0;box-sizing:border-box}

body{
  font-family: "Inter", system-ui, Arial;
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
}

/* ================= HEADER ================= */
.header{
  height:64px;
  background:linear-gradient(90deg,#0f172a,#111827);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 24px;
  box-shadow:0 2px 10px rgba(0,0,0,.25);
}

.logo-area{
  font-size:18px;
  font-weight:600;
  letter-spacing:.4px;
}

.header-user{
  font-size:13px;
  color:#e5e7eb;
}

.header a{
  color:var(--gold);
  text-decoration:none;
  margin-left:14px;
  font-weight:500;
}

/* ================= LAYOUT ================= */
.erp-wrapper{
  display:flex;
  min-height:calc(100vh - 64px);
}

/* ================= SIDEBAR ================= */
.sidebar{
  width:230px;
  background:var(--sidebar);
  padding:14px 0;
}

.sidebar a{
  display:flex;
  align-items:center;
  padding:12px 22px;
  color:#cbd5f5;
  text-decoration:none;
  font-size:14px;
  border-left:4px solid transparent;
  transition:.2s;
}

.sidebar a:hover{
  background:#020617;
  color:#fff;
}

.sidebar a.active{
  background:#020617;
  border-left-color:var(--gold);
  color:var(--gold);
}

/* ================= MAIN ================= */
.main{
  flex:1;
  display:flex;
  flex-direction:column;
  padding:26px;
}

/* ================= PAGE HEADER ================= */
.page-title{
  font-size:22px;
  font-weight:600;
}

.page-subtitle{
  font-size:13px;
  color:var(--muted);
  margin-top:4px;
}

/* ===============================
   ERP LOGO
   =============================== */

.logo-area{
  display:flex;
  align-items:center;
  gap:12px;
}

.erp-logo{
  height:38px;
  width:auto;
}

.erp-title{
  font-size:17px;
  font-weight:600;
  letter-spacing:.4px;
  color:#fff;
}

/* ================= KPI ================= */
.kpi-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:18px;
  margin:22px 0;
}

.kpi-card{
  background:var(--card);
  border-radius:12px;
  padding:20px;
  position:relative;
  box-shadow:0 8px 20px rgba(0,0,0,.06);
}

.kpi-card::before{
  content:"";
  position:absolute;
  left:0;top:0;
  width:5px;height:100%;
  background:linear-gradient(var(--gold),#b8962e);
  border-radius:12px 0 0 12px;
}

.kpi-title{
  font-size:13px;
  color:var(--muted);
}

.kpi-value{
  font-size:28px;
  font-weight:700;
  margin-top:6px;
}

.kpi-foot{
  font-size:12px;
  color:var(--muted);
  margin-top:6px;
}
/* ===============================
   KPI – HORIZONTAL ROW (ERP)
   =============================== */

.kpi-grid{
  display:flex;
  gap:18px;
  margin:22px 0;
  overflow-x:auto;
  padding-bottom:6px;
}

.kpi-grid::-webkit-scrollbar{
  height:6px;
}
.kpi-grid::-webkit-scrollbar-thumb{
  background:#d1d5db;
  border-radius:10px;
}

.kpi-card{
  min-width:240px;
  flex:0 0 auto;
}

/* ================= TABLE ================= */
table{
  width:100%;
  border-collapse:collapse;
  background:#fff;
  border-radius:12px;
  overflow:hidden;
}

th{
  background:#f8fafc;
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.4px;
  padding:12px;
  border-bottom:1px solid var(--border);
}

td{
  padding:12px;
  border-bottom:1px solid var(--border);
  font-size:14px;
}

/* ================= BUTTON ================= */
.btn{
  padding:10px 18px;
  background:linear-gradient(135deg,var(--gold),#b8962e);
  color:#111;
  border-radius:8px;
  text-decoration:none;
  font-weight:600;
  display:inline-block;
}

/* ================= FOOTER ================= */
.footer{
  margin-top:auto;   /* THIS is the key line */
  text-align:center;
  font-size:12px;
  color:#cbd5f5;
  padding:12px;
  background:#0f172a;
}


/* -------- RESPONSIVE -------- */
@media (max-width: 768px) {
  .sidebar {
    width: 180px;
  }

  .header {
    flex-direction: column;
    height: auto;
    padding: 10px;
  }

  .header-user {
    margin-top: 6px;
  }
}

/* ===============================
   LOGIN PAGE STYLES
   =============================== */

.login-page{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,#111,#2b2b2b);
}

.login-wrapper{
  width:100%;
  display:flex;
  justify-content:center;
}

.login-card{
  background:#fff;
  width:360px;
  padding:30px;
  border-radius:8px;
  box-shadow:0 20px 40px rgba(0,0,0,.25);
  text-align:center;
}

.login-card h2{
  margin:0 0 6px;
  font-size:20px;
  color:#111;
}

.login-sub{
  font-size:13px;
  color:#777;
  margin-bottom:20px;
}

.login-card input{
  width:100%;
  padding:10px 12px;
  margin-bottom:12px;
  border:1px solid #ccc;
  border-radius:4px;
  font-size:14px;
}

.login-card input:focus{
  border-color:#c9a24d;
  outline:none;
}

.login-btn{
  width:100%;
  padding:11px;
  background:linear-gradient(135deg,#c9a24d,#e7c76a);
  border:none;
  border-radius:4px;
  font-size:15px;
  font-weight:bold;
  cursor:pointer;
  color:#111;
}

.login-btn:hover{
  background:linear-gradient(135deg,#e7c76a,#c9a24d);
}

.login-footer{
  margin-top:16px;
  font-size:12px;
  color:#888;
}

/* ===============================
   DASHBOARD ROWS
   =============================== */
.dashboard-row{
  display:grid;
  grid-template-columns: 2fr 1fr;
  gap:20px;
}

@media(max-width:900px){
  .dashboard-row{
    grid-template-columns:1fr;
  }
}
/* ===== SIDEBAR ICON FIX (NO OVERLAP) ===== */

.sidebar a{
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;          /* IMPORTANT: row height */
  font-size: 15px;
  line-height: 1;
}

/* Icon box */
.sidebar a i{
  color: #d4af37;
  font-size: 15px;
  width: 30px;               /* fixed width */
  height: 30px;              /* fixed height */
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(212,175,55,0.18);
  border-radius: 6px;
  flex-shrink: 0;            /* prevents collapse */
}

/* Active state */
.sidebar a.active i{
  background: rgba(212,175,55,0.35);
  color: #ffd700;
}