@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&display=swap');

:root{
  /* Core palette — deep ink navy + warm gold accent */
  --navy:#101a33;
  --navy-dark:#0a1224;
  --ink:#161b2c;
  --accent:#b8903f;
  --accent-2:#8c6a24;
  --accent-light:#faf3e4;
  --blue:#3d5ce0;
  --blue-light:#eef1fd;

  --bg:#f6f5f2;
  --card:#ffffff;
  --text:#1e2333;
  --muted:#6b7180;
  --border:#e8e5df;

  --success:#0f7a4d;
  --success-bg:#e8f6ef;
  --warning:#a6650c;
  --warning-bg:#fbf1e0;
  --danger:#b3261e;
  --danger-bg:#fbeceb;
  --info:#2757c9;
  --info-bg:#eaf0ff;

  --radius:14px;
  --radius-sm:9px;
  --shadow-sm:0 1px 2px rgba(16,20,40,.04), 0 1px 1px rgba(16,20,40,.03);
  --shadow-md:0 6px 20px rgba(16,20,40,.06), 0 2px 6px rgba(16,20,40,.04);
  --shadow-lg:0 24px 60px rgba(8,12,28,.16);

  --font-body:'Plus Jakarta Sans','Segoe UI',Roboto,Arial,sans-serif;
  --font-display:'Fraunces','Georgia',serif;
}
*{box-sizing:border-box;}
body{
  margin:0;
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  font-size:14px;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--blue);text-decoration:none;}
a:hover{text-decoration:underline;}

/* ---------- Auth page ---------- */
.auth-wrap{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(900px 500px at 12% -10%, rgba(184,144,63,.18), transparent 60%),
    linear-gradient(160deg,var(--navy),var(--navy-dark) 70%);
  padding:20px;
}
.auth-card{
  position:relative;
  background:var(--card);
  width:100%;
  max-width:380px;
  padding:40px 34px 32px;
  border-radius:18px;
  box-shadow:var(--shadow-lg);
  overflow:hidden;
}
.auth-card::before{
  content:"";
  position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
}
.auth-card h1{
  font-family:var(--font-display);
  font-weight:600;
  font-size:24px;
  margin:0 0 6px;
  color:var(--navy);
  letter-spacing:.01em;
}
.auth-card p.sub{color:var(--muted);margin:0 0 26px;font-size:13px;}
.auth-card .demo{
  margin-top:18px;font-size:12px;color:var(--accent-2);
  background:var(--accent-light);padding:10px 12px;border-radius:8px;
  border:1px solid #efe1c2;
}

/* ---------- Layout ---------- */
.app{display:flex;min-height:100vh;position:relative;}
.sidebar{
  width:236px;
  background:linear-gradient(190deg,var(--navy),var(--navy-dark) 85%);
  color:#c6cde3;
  flex-shrink:0;
  padding:22px 0;
  position:sticky;
  top:0;
  height:100vh;
  overflow-y:auto;
}
.sidebar .brand{
  font-family:var(--font-display);
  color:#fff;font-weight:600;font-size:19px;letter-spacing:.02em;
  padding:0 24px 22px;
  border-bottom:1px solid rgba(255,255,255,.09);
  margin-bottom:14px;
}
.sidebar .brand span{
  display:block;
  font-family:var(--font-body);
  color:var(--accent);
  font-size:11px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;
  margin-top:3px;
}
.sidebar nav a{
  display:flex;align-items:center;gap:12px;
  color:#b7c0dc;padding:11px 22px;font-size:13.5px;font-weight:500;
  border-left:3px solid transparent;
  transition:background .15s ease,color .15s ease;
}
.sidebar nav a:hover{background:rgba(255,255,255,.06);color:#fff;text-decoration:none;}
.sidebar nav a.active{
  background:rgba(184,144,63,.14);
  border-left-color:var(--accent);
  color:#fff;font-weight:600;
}
.sidebar .icon{width:18px;display:inline-block;text-align:center;opacity:.9;}

.main{flex:1;display:flex;flex-direction:column;min-width:0;}
.topbar{
  height:64px;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(8px);
  border-bottom:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 26px;
  position:sticky;
  top:0;
  z-index:100;
  box-shadow:0 1px 0 rgba(16,20,40,.02);
}
.topbar h2{font-family:var(--font-display);font-weight:600;font-size:19px;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:26px;flex:1;}

/* ---------- Cards / stats ---------- */
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:26px;}
.stat-grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-bottom:26px;}
.stat-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:26px;}
.stat-card{
  position:relative;
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:19px 20px 20px;
  box-shadow:var(--shadow-sm);
  transition:box-shadow .15s ease, transform .15s ease;
}
.stat-card:hover{box-shadow:var(--shadow-md);transform:translateY(-1px);}
.stat-card::before{
  content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:3px;
  background:linear-gradient(180deg,var(--accent),var(--accent-2));
}
.stat-card .label{font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px;font-weight:600;}
.stat-card .value{font-family:var(--font-display);font-size:26px;font-weight:600;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:22px;margin-bottom:22px;
  box-shadow:var(--shadow-sm);
}
.card h3{margin:0 0 16px;font-size:15px;font-weight:700;color:var(--navy);letter-spacing:.01em;}
.card-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;flex-wrap:wrap;gap:12px;}
.card-head h3{margin:0;}

/* ---------- Tables ---------- */
.table-scroll{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;}
table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:600px;}
th,td{padding:12px 13px;text-align:left;border-bottom:1px solid var(--border);}
th{color:var(--muted);font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.05em;background:#fbfaf8;}
tbody tr{transition:background .12s ease;}
tbody tr:hover{background:#faf8f4;}
td.num, th.num{text-align:right;}

/* ---------- Badges ---------- */
.badge{padding:4px 11px;border-radius:20px;font-size:11px;font-weight:700;display:inline-block;letter-spacing:.02em;}
.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:#eeece7;color:#666;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 18px;border-radius:9px;border:1px solid transparent;
  font-size:13.5px;font-weight:600;cursor:pointer;background:var(--navy);color:#fff;text-decoration:none;
  transition:background .15s ease, transform .1s ease, box-shadow .15s ease;
  box-shadow:var(--shadow-sm);
}
.btn:hover{background:var(--navy-dark);text-decoration:none;color:#fff;transform:translateY(-1px);box-shadow:var(--shadow-md);}
.btn:active{transform:translateY(0);}
.btn-sm{padding:7px 12px;font-size:12.5px;}
.btn-outline{background:#fff;border-color:var(--border);color:var(--text);box-shadow:none;}
.btn-outline:hover{background:#f7f6f2;color:var(--text);border-color:#d8d4ca;}
.btn-danger{background:var(--danger);}
.btn-danger:hover{background:#8f1e18;}
.btn-success{background:var(--success);}
.btn-success:hover{background:#0b5c3a;}
.btn-group{display:flex;gap:8px;flex-wrap:wrap;}

/* An accent "primary" action reads gold instead of navy where markup opts into .btn-accent */
.btn-accent{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;}
.btn-accent:hover{background:linear-gradient(135deg,#a67f37,#7c5c1f);}

/* ---------- Forms ---------- */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.form-group{margin-bottom:16px;}
.form-group.full{grid-column:1/-1;}
label{display:block;font-size:12.5px;font-weight:700;color:var(--navy);margin-bottom:6px;letter-spacing:.01em;}
input[type=text],input[type=email],input[type=password],input[type=number],
input[type=date],input[type=tel],select,textarea{
  width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:var(--radius-sm);
  font-size:13.5px;font-family:inherit;background:#fff;color:var(--text);
  transition:border-color .15s ease, box-shadow .15s ease;
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(184,144,63,.14);}
textarea{resize:vertical;min-height:70px;}

/* ---------- Alerts ---------- */
.alert{padding:12px 15px;border-radius:var(--radius-sm);font-size:13.5px;margin-bottom:16px;border:1px solid transparent;}
.alert-success{background:var(--success-bg);color:var(--success);border-color:#cdead9;}
.alert-danger{background:var(--danger-bg);color:var(--danger);border-color:#f2d3d1;}

/* ---------- Invoice items table (form) ---------- */
#items-table input{padding:8px 10px;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:7px 0;font-size:13.5px;}
.totals-box .row.grand{font-weight:700;font-size:17px;color:var(--navy);border-top:2px solid var(--border);margin-top:6px;padding-top:12px;font-family:var(--font-display);}

/* ---------- Invoice print view alignment fixes ---------- */
.invoice-doc{background:#fff;max-width:800px;margin:0 auto;padding:44px;border:1px solid var(--border);border-radius:var(--radius);position:relative;}
.invoice-doc::before{
  content:"";position:absolute;left:44px;right:44px;top:0;height:4px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  border-radius:0 0 4px 4px;
}
.invoice-doc .top{display:flex;justify-content:space-between;margin-bottom:32px;padding-top:6px;}
.invoice-doc .top h1{font-family:var(--font-display);margin:0;font-size:28px;font-weight:600;color:var(--navy);letter-spacing:.06em;}
.invoice-doc .company{font-weight:700;font-size:16.5px;color:var(--navy);}
.invoice-doc .muted{color:var(--muted);font-size:13px;}

.invoice-doc .parties{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 30px;
  align-items: start;
  margin-bottom: 28px;
}
.invoice-doc .parties .block h4{margin:0 0 7px;font-size:10.5px;color:var(--accent-2);text-transform:uppercase;letter-spacing:.08em;font-weight:700;}
.invoice-doc table{margin-bottom:20px;}
.invoice-doc .meta-table{width: auto; border-collapse: collapse; background: transparent !important;}
.invoice-doc .meta-table td{padding: 4px 16px 4px 0; font-size:13px; border:none;}
.invoice-doc .meta-table td:first-child{color:var(--muted);padding-right:14px;}
.invoice-doc .meta-table td:last-child{text-align: right; font-weight: 600;}

@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;}
  .invoice-doc::before{left:0;right:0;}
}

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

/* ---------- Mobile nav & layouts ---------- */
.hamburger{display:none;background:none;border:none;cursor:pointer;color:var(--navy);padding:4px 8px;}
.hamburger svg{width:22px;height:22px;display:block;}
.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;
    height:100%;
  }
  .sidebar.open{transform:translateX(0);box-shadow:0 0 30px rgba(0,0,0,.35);}
  .sidebar-overlay{
    display:none;position:fixed;inset:0;background:rgba(10,15,30,.5);z-index:150;
    backdrop-filter:blur(2px);
  }
  .sidebar-overlay.open{display:block;}
  .main{width:100%;}
  .topbar{padding:0 14px;height:56px;flex-wrap:nowrap;}
  .topbar h2{font-size:15.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .topbar .user{font-size:12px;gap:8px;}
  .content{padding:14px;}

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

  .card{padding:15px;border-radius:12px;}
  .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;}
  
  .filter-form{display:flex;flex-direction:column;gap:10px;width:100%;}
  .filter-form input, .filter-form select, .filter-form .date-range-group{width:100% !important;}
  .filter-form .btn, .filter-form a.btn{width:100%;text-align:center;}
  
  form.form-grid select, form.form-grid input[type=text]{width:100%;}

  .table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  table{font-size:12.5px;}
  th,td{padding:9px 8px;white-space:nowrap;}

  .form-grid{grid-template-columns:1fr;gap:10px;}
  .btn-group{flex-wrap:wrap;}
  .btn{padding:11px 14px;width:100%;justify-content:center;}
  .btn-sm{width:auto;}

  /* --- Updated Invoice Mobile Styles --- */
  .invoice-doc{padding:18px;}
  .invoice-doc::before{left:18px;right:18px;}
  .invoice-doc .top{flex-direction:column;gap:14px;}
  .invoice-doc .top > div:last-child{text-align:left;}
  
  .invoice-doc .parties{
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  
  /* Forces metadata table to fill mobile width safely without clipping */
  .invoice-doc .meta-table{
    width: 100%;
  }
  .invoice-doc .meta-table td{
    padding: 4px 0;
  }
  .invoice-doc .meta-table td:last-child{
    text-align: right;
  }
  
  .totals-box{max-width:100%;}
}

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

/* ---------- Inline icon helper (replaces emoji glyphs) ---------- */
.i{width:15px;height:15px;display:inline-block;vertical-align:-2.5px;stroke:currentColor;margin-right:2px;flex-shrink:0;}
h3 .i{width:16px;height:16px;vertical-align:-3px;color:var(--accent-2);}

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