:root{
  --ink:#161514;
  --charcoal:#232220;
  --sidebar:#1c1b1a;
  --cream:#f7f5f0;
  --brass:#b08d57;
  --brass-dark:#8f7143;
  --text:#2b2a28;
  --muted:#83807a;
  --border:#e7e3da;
  --success:#3c8a5b;
  --danger:#c0453a;
  --warning:#c98a2c;
  --radius:10px;
}
*{box-sizing:border-box;}
body{
  margin:0;
  font-family:'Inter','Segoe UI',Roboto,sans-serif;
  background:var(--cream);
  color:var(--text);
  font-size:14px;
}
a{ text-decoration:none; color:inherit; }
.layout{ display:flex; min-height:100vh; }

/* ---------- Sidebar ---------- */
.sidebar{
  width:250px;
  background:var(--sidebar);
  color:#d8d4c8;
  flex-shrink:0;
  position:fixed;
  top:0; left:0; bottom:0;
  overflow-y:auto;
  z-index:100;
  transition:transform .25s ease;
}
.sidebar-brand{
  display:flex;
  align-items:center;
  gap:10px;
  padding:20px 18px;
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.sidebar-brand .logo-dot{
  width:36px;height:36px;border-radius:50%;
  border:1px solid var(--brass);
  display:flex;align-items:center;justify-content:center;
  font-family:'Georgia',serif;color:var(--brass);font-size:14px;
}
.sidebar-brand .co-name{ font-weight:600; font-size:14px; color:#fff; }
.sidebar-brand .co-phone{ font-size:11px; color:#928d80; }

.company-switch{
  margin:14px 14px 8px;
}
.company-switch select{
  width:100%;
  padding:8px 10px;
  border-radius:8px;
  background:#2a2926;
  color:#fff;
  border:1px solid rgba(255,255,255,0.1);
  font-size:13px;
}

.btn-create-sale{
  margin:10px 14px 18px;
  display:block;
}
.btn-create-sale > button{
  width:100%;
  background:var(--brass);
  color:#1c1b1a;
  border:none;
  padding:10px;
  border-radius:8px;
  font-weight:600;
  font-size:13px;
  cursor:pointer;
  position:relative;
}
.create-sale-menu{
  display:none;
  position:absolute;
  left:14px; right:14px;
  background:#2a2926;
  border-radius:8px;
  margin-top:4px;
  overflow:hidden;
  box-shadow:0 8px 20px rgba(0,0,0,0.3);
  z-index:50;
}
.create-sale-menu.open{ display:block; }
.create-sale-menu a{
  display:block;
  padding:10px 14px;
  font-size:13px;
  color:#e5e1d5;
  border-bottom:1px solid rgba(255,255,255,0.05);
}
.create-sale-menu a:hover{ background:#38352f; color:var(--brass); }

.nav-section-label{
  font-size:10px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:#6f6b5e;
  padding:14px 18px 6px;
}
.nav-link{
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 18px;
  font-size:13.5px;
  color:#c9c5b8;
  border-left:3px solid transparent;
}
.nav-link:hover{ background:rgba(255,255,255,0.04); color:#fff; }
.nav-link.active{
  background:rgba(176,141,87,0.12);
  color:var(--brass);
  border-left-color:var(--brass);
  font-weight:600;
}
.nav-icon{ width:18px; text-align:center; opacity:0.9; }

.sidebar-footer{
  padding:16px 18px;
  font-size:11px;
  color:#6f6b5e;
  border-top:1px solid rgba(255,255,255,0.08);
  margin-top:10px;
}

/* ---------- Topbar (mobile) ---------- */
.topbar{
  display:none;
  align-items:center;
  justify-content:space-between;
  background:#fff;
  border-bottom:1px solid var(--border);
  padding:12px 16px;
  position:sticky;
  top:0;
  z-index:60;
}
.topbar .hamburger{
  font-size:22px;
  background:none;
  border:none;
  cursor:pointer;
  color:var(--ink);
}
.sidebar-overlay{
  display:none;
  position:fixed; inset:0;
  background:rgba(0,0,0,0.4);
  z-index:90;
}

/* ---------- Main content ---------- */
.main{
  margin-left:250px;
  flex:1;
  min-width:0;
  padding:24px 28px 60px;
}
.page-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:20px;
}
.page-header h1{
  font-size:22px;
  margin:0;
  color:var(--ink);
}

/* ---------- Cards / grid ---------- */
.card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:20px;
}
.grid{ display:grid; gap:16px; }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-2{ grid-template-columns:repeat(2,1fr); }
@media(max-width:900px){ .grid-3{grid-template-columns:1fr 1fr;} }
@media(max-width:600px){ .grid-3, .grid-2{grid-template-columns:1fr;} }

.stat-label{ font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.5px;}
.stat-value{ font-size:26px; font-weight:700; margin-top:6px; color:var(--ink); }
.stat-value.positive{ color:var(--success); }
.stat-value.negative{ color:var(--danger); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:9px 16px;
  border-radius:8px;
  border:1px solid var(--border);
  background:#fff;
  color:var(--text);
  font-size:13.5px;
  cursor:pointer;
  font-weight:500;
}
.btn-primary{ background:var(--brass); border-color:var(--brass); color:#1c1b1a; font-weight:600; }
.btn-primary:hover{ background:var(--brass-dark); }
.btn-danger{ background:#fdecea; border-color:#f5c6c1; color:var(--danger); }
.btn-sm{ padding:6px 10px; font-size:12.5px; }

/* ---------- Table ---------- */
.table-wrap{ overflow-x:auto; }
table.data-table{ width:100%; border-collapse:collapse; background:#fff; }
table.data-table th{
  text-align:left;
  font-size:11.5px;
  text-transform:uppercase;
  letter-spacing:.4px;
  color:var(--muted);
  padding:10px 12px;
  border-bottom:2px solid var(--border);
  white-space:nowrap;
}
table.data-table td{
  padding:12px;
  border-bottom:1px solid var(--border);
  font-size:13.5px;
  white-space:nowrap;
}
table.data-table tr:hover td{ background:#faf9f6; }

.badge{
  display:inline-block;
  padding:3px 10px;
  border-radius:20px;
  font-size:11px;
  font-weight:600;
}
.badge-paid{ background:#e5f3ea; color:var(--success); }
.badge-unpaid{ background:#fdecea; color:var(--danger); }
.badge-partial{ background:#fdf2e0; color:var(--warning); }
.badge-draft{ background:#eee; color:var(--muted); }

/* ---------- Forms ---------- */
.form-group{ margin-bottom:14px; }
.form-group label{ display:block; font-size:12.5px; font-weight:600; margin-bottom:5px; color:var(--text); }
.form-control{
  width:100%;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:8px;
  font-size:13.5px;
  background:#fff;
  color:var(--text);
}
.form-control:focus{ outline:none; border-color:var(--brass); }
textarea.form-control{ resize:vertical; min-height:80px; }

/* ---------- Modal ---------- */
.modal-backdrop{
  display:none;
  position:fixed; inset:0;
  background:rgba(20,18,15,0.5);
  z-index:200;
  align-items:center;
  justify-content:center;
  padding:16px;
}
.modal-backdrop.open{ display:flex; }
.modal-box{
  background:#fff;
  border-radius:12px;
  width:100%;
  max-width:520px;
  max-height:90vh;
  overflow-y:auto;
  padding:24px;
}
.modal-box h3{ margin-top:0; }
.modal-close{ float:right; cursor:pointer; font-size:20px; color:var(--muted); }

/* ---------- Login page ---------- */
.auth-wrap{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:radial-gradient(ellipse at 50% 0%, #26241f 0%, var(--ink) 55%);
  padding:20px;
}
.auth-box{
  background:#fff;
  border-radius:14px;
  padding:36px 30px;
  width:100%;
  max-width:400px;
  box-shadow:0 20px 60px rgba(0,0,0,0.3);
}
.auth-logo{
  width:56px;height:56px;border-radius:50%;
  border:1px solid var(--brass-dark);
  display:flex;align-items:center;justify-content:center;
  font-family:'Georgia',serif;color:var(--brass-dark);
  margin:0 auto 16px;
}
.auth-box h2{ text-align:center; margin:0 0 4px; font-size:20px; }
.auth-box p.sub{ text-align:center; color:var(--muted); font-size:13px; margin-bottom:24px; }
.otp-inputs{ display:flex; gap:8px; justify-content:center; margin:20px 0; }
.otp-inputs input{
  width:42px;height:50px;
  text-align:center;
  font-size:20px;
  border:1px solid var(--border);
  border-radius:8px;
}
.alert{
  padding:10px 14px;
  border-radius:8px;
  font-size:13px;
  margin-bottom:14px;
}
.alert-error{ background:#fdecea; color:var(--danger); }
.alert-success{ background:#e5f3ea; color:var(--success); }

/* ---------- Responsive ---------- */
@media(max-width:880px){
  .sidebar{ transform:translateX(-100%); }
  .sidebar.open{ transform:translateX(0); }
  .sidebar-overlay.open{ display:block; }
  .main{ margin-left:0; padding:18px 16px 50px; }
  .topbar{ display:flex; }
  table.data-table{ font-size:12.5px; }
}