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

:root {
  --bg:#f0f2f5;--surface:#ffffff;--border:#e8eaed;--accent:#4361ee;--accent-lt:#eef0fd;
  --text:#1a1d2e;--muted:#8b909a;--green:#12b76a;--green-lt:#ecfdf3;
  --red:#f04438;--red-lt:#fef3f2;--orange:#f79009;--orange-lt:#fffaeb;
  --sidebar:#ffffff;--sidebar-w:240px;--radius:12px;
  --shadow:0 1px 3px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.06);
  --shadow-md:0 4px 6px rgba(0,0,0,.07),0 2px 4px rgba(0,0,0,.06);
}
*{box-sizing:border-box;margin:0;padding:0;}
body{background:var(--bg);color:var(--text);font-family:'Montserrat',sans-serif;font-size:15px;min-height:100vh;display:flex;}

/* SIDEBAR */
.sidebar{width:var(--sidebar-w);background:var(--sidebar);border-right:1px solid var(--border);display:flex;flex-direction:column;position:fixed;top:0;left:0;bottom:0;z-index:50;padding:0 0 24px;}
.sidebar-logo{display:flex;align-items:center;gap:10px;padding:22px 20px 18px;border-bottom:1px solid var(--border);}
.logo-icon{width:34px;height:34px;border-radius:10px;object-fit:cover;flex-shrink:0;}
.logo-text{font-size:15px;font-weight:700;color:var(--text);line-height:1.2;}
.logo-sub{font-size:11px;color:var(--muted);font-weight:400;}
.sidebar-section{padding:16px 12px 4px;}
.sidebar-label{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:1.2px;color:var(--muted);padding:0 8px;margin-bottom:4px;}
.nav-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;font-size:13px;font-weight:500;color:var(--muted);text-decoration:none;transition:all .15s;cursor:pointer;margin-bottom:2px;}
.nav-item:hover{background:var(--bg);color:var(--text);}
.nav-item.active{background:var(--accent-lt);color:var(--accent);font-weight:600;}
.nav-item .icon{font-size:16px;width:20px;text-align:center;flex-shrink:0;}
.sidebar-bottom{margin-top:auto;padding:0 12px;}
.nav-item.danger:hover{background:var(--red-lt);color:var(--red);}

/* MAIN */
.main{margin-left:var(--sidebar-w);flex:1;display:flex;flex-direction:column;min-height:100vh;}
.topbar{background:var(--surface);border-bottom:1px solid var(--border);padding:0 28px;height:60px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:40;}
.topbar-title{font-size:20px;font-weight:700;color:var(--text);}
.topbar-actions{display:flex;gap:10px;align-items:center;}
.period-pills{display:flex;gap:4px;background:var(--bg);border-radius:8px;padding:3px;}
.period-pill{padding:5px 14px;border-radius:6px;border:none;background:transparent;color:var(--muted);font-family:'Montserrat',sans-serif;font-size:12px;font-weight:500;cursor:pointer;transition:all .15s;}
.period-pill.active{background:var(--surface);color:var(--accent);font-weight:600;box-shadow:var(--shadow);}
.content{padding:24px 28px;flex:1;}

/* STAT CARDS */
.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px;}
.stat-card{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px;display:flex;flex-direction:column;gap:8px;}
.stat-icon{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;margin-bottom:4px;}
.stat-icon.blue{background:var(--accent-lt);}
.stat-icon.green{background:var(--green-lt);}
.stat-icon.orange{background:var(--orange-lt);}
.stat-icon.red{background:var(--red-lt);}
.stat-label{font-size:12px;color:var(--muted);font-weight:500;}
.stat-value{font-size:22px;font-weight:700;color:var(--text);line-height:1;}
.stat-value.green{color:var(--green);}
.stat-value.red{color:var(--red);}
.stat-sub{font-size:11px;color:var(--muted);}

/* MAIN GRID */
.main-grid{display:grid;grid-template-columns:300px 1fr;gap:20px;align-items:start;}

/* CARD */
.card{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;}
.card-header{padding:18px 20px 14px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;}
.card-title{font-size:15px;font-weight:600;color:var(--text);}
.card-body{padding:20px;}

/* FORM */
.form-group{margin-bottom:13px;}
.form-group label{display:block;font-size:12px;font-weight:500;color:var(--muted);margin-bottom:5px;}
.form-group input,.form-group select,.form-group textarea{width:100%;background:var(--bg);border:1.5px solid var(--border);border-radius:8px;color:var(--text);padding:9px 12px;font-family:'Montserrat',sans-serif;font-size:13px;outline:none;transition:border-color .15s,box-shadow .15s;}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(67,97,238,.12);background:#fff;}
.form-group textarea{resize:vertical;min-height:52px;}
select option{background:#fff;}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:10px;}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;gap:6px;padding:9px 18px;border-radius:8px;border:none;cursor:pointer;font-family:'Montserrat',sans-serif;font-size:13px;font-weight:600;transition:all .15s;text-decoration:none;}
.btn-primary{background:var(--accent);color:#fff;width:100%;justify-content:center;}
.btn-primary:hover{background:#3651d4;}
.btn-secondary{background:var(--bg);border:1px solid var(--border);color:var(--muted);}
.btn-secondary:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-lt);}
.btn-ghost{background:transparent;border:1px solid var(--border);color:var(--muted);}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent);}
.btn-sm{padding:6px 14px;font-size:12px;}
.btn-icon{background:transparent;border:none;color:var(--muted);padding:4px 8px;font-size:15px;cursor:pointer;border-radius:6px;}
.btn-icon:hover{background:var(--red-lt);color:var(--red);}
.btn-edit{background:var(--accent-lt);border:none;color:var(--accent);padding:4px 8px;font-size:12px;cursor:pointer;border-radius:6px;font-weight:600;font-family:'Montserrat',sans-serif;}
.btn-edit:hover{background:var(--accent);color:#fff;}

/* FILTERS */
.filters{display:flex;gap:8px;padding:14px 20px;border-bottom:1px solid var(--border);flex-wrap:wrap;align-items:center;}
.filters select,.filters input[type="date"]{background:var(--bg);border:1.5px solid var(--border);border-radius:8px;color:var(--text);padding:6px 10px;font-family:'Montserrat',sans-serif;font-size:12px;outline:none;}
.filters select:focus,.filters input[type="date"]:focus{border-color:var(--accent);}

/* TABLE */
.table-wrap{overflow-x:auto;}
table{width:100%;border-collapse:collapse;}
thead th{padding:10px 16px;text-align:left;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.8px;color:var(--muted);border-bottom:1px solid var(--border);white-space:nowrap;background:#fafbfc;}
tbody tr{border-bottom:1px solid var(--border);transition:background .1s;}
tbody tr:last-child{border-bottom:none;}
tbody tr:hover{background:#fafbfc;}
tbody td{padding:12px 16px;vertical-align:middle;}
.item-name{font-weight:500;font-size:13px;}
.empty-row td{text-align:center;color:var(--muted);padding:48px;font-size:13px;}
.money{font-variant-numeric:tabular-nums;font-size:13px;}

/* CATEGORY BADGE */
.cat-badge{display:inline-block;padding:3px 9px;border-radius:100px;font-size:11px;font-weight:600;}
.cat-shipping   {background:#eff6ff;color:#2563eb;}
.cat-storage    {background:#f5f3ff;color:#7c3aed;}
.cat-tools      {background:var(--accent-lt);color:var(--accent);}
.cat-packaging  {background:#fff7ed;color:#c2410c;}
.cat-office     {background:#f0fdf4;color:#15803d;}
.cat-other      {background:var(--bg);color:var(--muted);border:1px solid var(--border);}

/* AMOUNT */
.expense-amount{color:var(--red);font-weight:600;font-variant-numeric:tabular-nums;}

/* BREAKDOWN */
.breakdown-item{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid var(--border);font-size:13px;}
.breakdown-item:last-child{border-bottom:none;}
.breakdown-item.chh-recur-row{flex-direction:column;align-items:stretch;gap:5px;}
.chh-recur-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.chh-recur-desc{color:var(--muted);font-size:11px;}
.chh-recur-bottom{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.chh-recur-amount-group{display:flex;align-items:center;gap:8px;}
.chh-recur-stop{flex-shrink:0;display:inline-flex;align-items:center;gap:4px;border:1px solid var(--border);background:var(--surface);color:var(--red);font-size:11px;font-weight:600;padding:4px 10px;border-radius:6px;cursor:pointer;white-space:nowrap;font-family:'Montserrat',sans-serif;}
.chh-recur-stop:hover{background:var(--red-lt);border-color:var(--red);}

/* NET PROFIT HIGHLIGHT */
.net-box{background:linear-gradient(135deg,var(--accent-lt),#f0fdf4);border:1px solid var(--border);border-radius:var(--radius);padding:20px;margin-top:16px;display:flex;align-items:center;justify-content:space-between;}
.net-box-label{font-size:13px;font-weight:600;color:var(--muted);}
.net-box-value{font-size:28px;font-weight:700;}

/* MODAL */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:200;align-items:center;justify-content:center;}
.modal-overlay.open{display:flex;}
.modal{background:var(--surface);border-radius:var(--radius);width:460px;max-width:95vw;box-shadow:0 20px 60px rgba(0,0,0,.18);max-height:90vh;overflow-y:auto;}
.modal-header{padding:18px 22px;border-bottom:1px solid var(--border);font-size:16px;font-weight:700;color:var(--text);display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;background:var(--surface);}
.modal-body{padding:22px;}
.modal-footer{padding:14px 22px;border-top:1px solid var(--border);display:flex;gap:10px;justify-content:flex-end;background:var(--surface);}

/* TOAST */
.toast{position:fixed;bottom:28px;right:28px;background:var(--text);color:#fff;padding:12px 20px;border-radius:10px;font-weight:500;font-size:13px;opacity:0;transform:translateY(8px);transition:all .25s;z-index:999;pointer-events:none;box-shadow:var(--shadow-md);}
.toast.show{opacity:1;transform:translateY(0);}
.toast.error{background:var(--red);}

@media(max-width:900px){.stats-row{grid-template-columns:repeat(2,1fr);}.main-grid{grid-template-columns:1fr;}}
@media(max-width:768px){.sidebar{display:none;}.main{margin-left:0;}.content{padding:16px;}}