:root{
  --navy:#1b2b4b;
  --navy-dark:#121d33;
  --accent:#3d6cf6;
  --accent-light:#eaf0ff;
  --bg:#f4f6fb;
  --card:#ffffff;
  --text:#1f2937;
  --muted:#6b7280;
  --border:#e5e9f2;
  --success:#16a34a;
  --success-bg:#e8f8ee;
  --warning:#d97706;
  --warning-bg:#fef3e2;
  --danger:#dc2626;
  --danger-bg:#fdecec;
  --info:#2563eb;
  --info-bg:#e8f0fe;
  --radius:10px;
}
*{box-sizing:border-box;}
body{
  margin:0;
  font-family:'Segoe UI',Roboto,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  font-size:14px;
}
a{color:var(--accent);text-decoration:none;}
a:hover{text-decoration:underline;}

/* ---------- Auth page ---------- */
.auth-wrap{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,var(--navy),var(--navy-dark));
}
.auth-card{
  background:var(--card);
  width:360px;
  padding:36px 32px;
  border-radius:var(--radius);
  box-shadow:0 20px 50px rgba(0,0,0,.25);
}
.auth-card h1{
  font-size:20px;
  margin:0 0 4px;
  color:var(--navy);
}
.auth-card p.sub{color:var(--muted);margin:0 0 24px;font-size:13px;}
.auth-card .demo{
  margin-top:18px;font-size:12px;color:var(--muted);
  background:var(--accent-light);padding:10px 12px;border-radius:8px;
}

/* ---------- Layout ---------- */
.app{display:flex;min-height:100vh;}
.sidebar{
  width:230px;
  background:var(--navy);
  color:#cfd8ee;
  flex-shrink:0;
  padding:20px 0;
}
.sidebar .brand{
  color:#fff;font-weight:700;font-size:17px;
  padding:0 22px 20px;
  border-bottom:1px solid rgba(255,255,255,.08);
  margin-bottom:12px;
}
.sidebar .brand span{color:#8fb0ff;}
.sidebar nav a{
  display:flex;align-items:center;gap:10px;
  color:#cfd8ee;padding:11px 22px;font-size:14px;
  border-left:3px solid transparent;
}
.sidebar nav a:hover{background:rgba(255,255,255,.06);text-decoration:none;}
.sidebar nav a.active{
  background:rgba(255,255,255,.09);
  border-left-color:var(--accent);
  color:#fff;font-weight:600;
}
.sidebar .icon{width:18px;display:inline-block;text-align:center;}

.main{flex:1;display:flex;flex-direction:column;min-width:0;}
.topbar{
  height:60px;background:var(--card);border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 24px;
}
.topbar h2{font-size:17px;margin:0;color:var(--navy);}
.topbar .user{display:flex;align-items:center;gap:14px;font-size:13px;color:var(--muted);}
.topbar .user a{color:var(--danger);}
.content{padding:24px;flex:1;}

/* ---------- Cards / stats ---------- */
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px;}
.stat-card{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:18px 20px;
}
.stat-card .label{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px;}
.stat-card .value{font-size:24px;font-weight:700;color:var(--navy);}
.stat-card .value.warning{color:var(--warning);}
.stat-card .value.danger{color:var(--danger);}
.stat-card .value.success{color:var(--success);}

.card{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:20px;margin-bottom:20px;
}
.card h3{margin:0 0 16px;font-size:15px;color:var(--navy);}
.card-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;}
.card-head h3{margin:0;}

/* ---------- Tables ---------- */
table{width:100%;border-collapse:collapse;font-size:13.5px;}
th,td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--border);}
th{color:var(--muted);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.03em;}
tbody tr:hover{background:#fafbfe;}
td.num, th.num{text-align:right;}

/* ---------- Badges ---------- */
.badge{padding:4px 10px;border-radius:20px;font-size:11.5px;font-weight:600;display:inline-block;}
.badge-success{background:var(--success-bg);color:var(--success);}
.badge-warning{background:var(--warning-bg);color:var(--warning);}
.badge-danger{background:var(--danger-bg);color:var(--danger);}
.badge-info{background:var(--info-bg);color:var(--info);}
.badge-muted{background:#eee;color:#666;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block;padding:9px 16px;border-radius:8px;border:1px solid transparent;
  font-size:13.5px;font-weight:600;cursor:pointer;background:var(--accent);color:#fff;
}
.btn:hover{background:#2f5adf;text-decoration:none;color:#fff;}
.btn-sm{padding:6px 11px;font-size:12.5px;}
.btn-outline{background:#fff;border-color:var(--border);color:var(--text);}
.btn-outline:hover{background:#f5f7fb;color:var(--text);}
.btn-danger{background:var(--danger);}
.btn-danger:hover{background:#b91c1c;}
.btn-success{background:var(--success);}
.btn-success:hover{background:#128a3e;}
.btn-group{display:flex;gap:8px;}

/* ---------- Forms ---------- */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.form-group{margin-bottom:14px;}
.form-group.full{grid-column:1/-1;}
label{display:block;font-size:12.5px;font-weight:600;color:var(--navy);margin-bottom:5px;}
input[type=text],input[type=email],input[type=password],input[type=number],
input[type=date],input[type=tel],select,textarea{
  width:100%;padding:9px 11px;border:1px solid var(--border);border-radius:7px;
  font-size:13.5px;font-family:inherit;background:#fff;color:var(--text);
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);}
textarea{resize:vertical;min-height:70px;}

/* ---------- Alerts ---------- */
.alert{padding:11px 14px;border-radius:8px;font-size:13.5px;margin-bottom:16px;}
.alert-success{background:var(--success-bg);color:var(--success);}
.alert-danger{background:var(--danger-bg);color:var(--danger);}

/* ---------- Invoice items table (form) ---------- */
#items-table input{padding:7px 9px;font-size:13px;}
#items-table td{vertical-align:top;}
.remove-item{color:var(--danger);cursor:pointer;font-weight:700;background:none;border:none;font-size:16px;}
.totals-box{max-width:320px;margin-left:auto;}
.totals-box .row{display:flex;justify-content:space-between;padding:6px 0;font-size:13.5px;}
.totals-box .row.grand{font-weight:700;font-size:16px;color:var(--navy);border-top:2px solid var(--border);margin-top:6px;padding-top:10px;}

/* ---------- Invoice print view ---------- */
.invoice-doc{background:#fff;max-width:800px;margin:0 auto;padding:40px;border:1px solid var(--border);border-radius:var(--radius);}
.invoice-doc .top{display:flex;justify-content:space-between;margin-bottom:30px;}
.invoice-doc .top h1{margin:0;font-size:26px;color:var(--navy);letter-spacing:.05em;}
.invoice-doc .company{font-weight:700;font-size:16px;color:var(--navy);}
.invoice-doc .muted{color:var(--muted);font-size:13px;}
.invoice-doc .parties{display:flex;justify-content:space-between;margin-bottom:26px;}
.invoice-doc .parties .block h4{margin:0 0 6px;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;}
.invoice-doc table{margin-bottom:20px;}
.invoice-doc .meta-table td{padding:4px 0;font-size:13px;border:none;}
.invoice-doc .meta-table td:first-child{color:var(--muted);padding-right:14px;}

@media print{
  .sidebar,.topbar,.no-print{display:none !important;}
  .content{padding:0;}
  .main{width:100%;}
  body{background:#fff;}
  .invoice-doc{border:none;box-shadow:none;padding:0;}
}

@media (max-width:900px){
  .stat-grid{grid-template-columns:repeat(2,1fr);}
  .form-grid{grid-template-columns:1fr;}
}

/* ---------- Mobile nav ---------- */
.hamburger{display:none;background:none;border:none;font-size:22px;cursor:pointer;color:var(--navy);padding:4px 8px;}
.sidebar-overlay{display:none;}

@media (max-width:760px){
  .app{display:block;}
  .hamburger{display:inline-block;}
  .sidebar{
    position:fixed;top:0;left:0;bottom:0;z-index:200;
    width:250px;transform:translateX(-100%);
    transition:transform .22s ease;
    overflow-y:auto;
  }
  .sidebar.open{transform:translateX(0);box-shadow:0 0 30px rgba(0,0,0,.35);}
  .sidebar .brand, .sidebar nav a span.label{display:inline;}
  .sidebar-overlay{
    display:none;position:fixed;inset:0;background:rgba(10,15,30,.45);z-index:150;
  }
  .sidebar-overlay.open{display:block;}
  .main{width:100%;}
  .topbar{padding:0 14px;height:54px;flex-wrap:nowrap;}
  .topbar h2{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .topbar .user{font-size:12px;gap:8px;}
  .topbar .user span{display:none;}
  .content{padding:14px;}

  .stat-grid{grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px;}
  .stat-card{padding:14px;}
  .stat-card .value{font-size:19px;}

  .card{padding:14px;border-radius:8px;}
  .card-head{flex-direction:column;align-items:flex-start;gap:10px;}
  .card-head form{width:100%;flex-wrap:wrap;}
  .card-head form input[type=text]{width:100% !important;}

  /* Tables scroll horizontally instead of squishing/wrapping */
  .table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -14px;padding:0 14px;}
  table{font-size:12.5px;}
  th,td{padding:8px 8px;white-space:nowrap;}

  .form-grid{grid-template-columns:1fr;gap:10px;}
  .btn-group{flex-wrap:wrap;}
  .btn{padding:10px 14px;}

  .invoice-doc{padding:18px;}
  .invoice-doc .top{flex-direction:column;gap:14px;}
  .invoice-doc .top > div:last-child{text-align:left;}
  .invoice-doc .parties{flex-direction:column;gap:16px;}
  .totals-box{max-width:100%;}
}

@media (max-width:400px){
  .stat-grid{grid-template-columns:1fr;}
}

/* ---------- Collections report bars ---------- */
.mini-bar{background:var(--border);border-radius:5px;height:8px;overflow:hidden;margin-top:4px;}
.mini-bar-fill{background:var(--accent);height:100%;border-radius:5px;}