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

:root{
  --bg:#F4F6F7;
  --surface:#FFFFFF;
  --ink:#152026;
  --ink-soft:#5C6B73;
  --ink-faint:#8C9AA1;
  --border:#E1E6E8;
  --brand:#0E6F6A;
  --brand-dark:#0A4F4B;
  --brand-soft:#E4F2F1;
  --amber:#B5760E;
  --amber-soft:#FBF0DD;
  --red:#B3413A;
  --red-soft:#FAE6E4;
  --green:#2C8A5C;
  --green-soft:#E4F4EC;
  --blue:#2E6DA0;
  --blue-soft:#E5EFF7;
  --gray-soft:#EEF1F2;
  --sidebar-bg:#0F2224;
  --sidebar-ink:#B9CBCA;
  --sidebar-ink-dim:#7C9391;
  --radius:10px;
  --radius-lg:14px;
  --shadow: 0 1px 2px rgba(15,34,36,.04), 0 4px 16px rgba(15,34,36,.06);
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:'Vazirmatn', Tahoma, sans-serif;
  font-size:14px; line-height:1.7;
}
#app{height:100%;}

.shell{display:flex; min-height:100vh;}

/* ---------- sidebar ---------- */
.sidebar{
  width:236px; flex:none; background:var(--sidebar-bg); color:var(--sidebar-ink);
  display:flex; flex-direction:column; padding:18px 14px; gap:18px;
  position:sticky; top:0; height:100vh; overflow-y:auto;
}
.brand{display:flex; align-items:center; gap:10px; padding:4px 4px 10px; border-bottom:1px solid rgba(255,255,255,.08);}
.brand-mark{width:34px; height:34px; border-radius:9px; background:var(--brand); display:flex; align-items:center; justify-content:center; color:#fff; flex:none;}
.brand-mark .ic{width:19px; height:19px;}
.brand-name{font-weight:700; font-size:14.5px; color:#fff;}
.brand-sub{font-size:11px; color:var(--sidebar-ink-dim); margin-top:1px;}
.navlist{display:flex; flex-direction:column; gap:2px; flex:1; overflow-y:auto;}
.navitem{
  display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:8px; border:none;
  background:transparent; color:var(--sidebar-ink); font-family:inherit; font-size:13.2px; cursor:pointer;
  text-align:right; width:100%; transition:background .12s;
}
.navitem:hover{background:rgba(255,255,255,.06);}
.navitem.active{background:var(--brand); color:#fff;}
.navitem .ic{width:17px; height:17px; flex:none;}
.nav-badge{
  margin-inline-start:auto; background:var(--red); color:#fff; border-radius:99px;
  font-size:10.5px; font-weight:700; line-height:1; padding:3px 7px; min-width:18px; text-align:center;
  opacity:0; transform:scale(.6); transition:opacity .15s, transform .15s; pointer-events:none;
}
.nav-badge.show{opacity:1; transform:scale(1);}
.sidebar-foot{border-top:1px solid rgba(255,255,255,.08); padding-top:12px; display:flex; flex-direction:column; gap:8px;}
.user-chip{display:flex; align-items:center; gap:9px; padding:6px 4px;}
.avatar{width:32px; height:32px; border-radius:50%; background:var(--brand); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; flex:none;}
.user-name{font-size:12.5px; color:#fff; font-weight:600;}
.user-role{font-size:11px; color:var(--sidebar-ink-dim);}

/* ---------- main ---------- */
.main{flex:1; min-width:0; display:flex; flex-direction:column; height:100vh;}
.topbar{
  display:flex; align-items:center; justify-content:space-between; padding:16px 26px;
  background:var(--surface); border-bottom:1px solid var(--border); flex:none;
}
.topbar-title{font-size:18px; font-weight:700;}
.topbar-meta{font-size:12.5px; color:var(--ink-faint);}
.content{flex:1; overflow-y:auto; padding:22px 26px 60px;}

/* ---------- kpis ---------- */
.kpi-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(190px,1fr)); gap:12px; margin-bottom:20px;}
.kpi{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:14px 16px; box-shadow:var(--shadow);}
.kpi-label{font-size:12px; color:var(--ink-soft); margin-bottom:8px;}
.kpi-value{font-size:19px; font-weight:800; letter-spacing:-.2px;}
.kpi-value.green{color:var(--green);}
.kpi-value.amber{color:var(--amber);}
.kpi-sub{font-size:11px; color:var(--ink-faint); margin-top:4px;}

/* ---------- layout helpers ---------- */
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px;}
@media (max-width: 900px){ .grid-2{grid-template-columns:1fr;} }

.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow); margin-bottom:16px; overflow:hidden;}
.card-head{display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid var(--border);}
.card-head h3{margin:0; font-size:14.5px; font-weight:700;}

.empty{padding:34px 18px; text-align:center; color:var(--ink-faint); font-size:13px;}

/* ---------- table ---------- */
.table-wrap{overflow-x:auto;}
.tbl{width:100%; border-collapse:collapse; font-size:13px;}
.tbl th{text-align:right; padding:10px 16px; background:var(--gray-soft); color:var(--ink-soft); font-weight:600; font-size:12px; white-space:nowrap;}
.tbl td{padding:11px 16px; border-top:1px solid var(--border); white-space:nowrap;}
.tbl tr.clickable{cursor:pointer;}
.tbl tr.clickable:hover td{background:var(--brand-soft);}
.tbl td.pos{color:var(--green); font-weight:600;}
.tbl td.neg{color:var(--red); font-weight:600;}

/* ---------- badges ---------- */
.badge{display:inline-block; padding:3px 9px; border-radius:99px; font-size:11.3px; font-weight:600; white-space:nowrap;}
.badge.gray{background:var(--gray-soft); color:var(--ink-soft);}
.badge.blue{background:var(--blue-soft); color:var(--blue);}
.badge.amber{background:var(--amber-soft); color:var(--amber);}
.badge.green{background:var(--green-soft); color:var(--green);}
.badge.red{background:var(--red-soft); color:var(--red);}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border-radius:8px; border:1px solid transparent;
  font-family:inherit; font-size:13px; font-weight:600; cursor:pointer; transition:filter .12s, background .12s;
}
.btn .ic{width:15px; height:15px;}
.btn.primary{background:var(--brand); color:#fff;}
.btn.primary:hover{background:var(--brand-dark);}
.btn.ghost{background:transparent; color:var(--ink-soft); border-color:var(--border);}
.btn.ghost:hover{background:var(--gray-soft);}
.btn.danger{background:var(--red-soft); color:var(--red);}
.btn.danger:hover{filter:brightness(.95);}
.btn.block{width:100%; justify-content:center;}
.btn.small{padding:5px 10px; font-size:12px;}

.toolbar{display:flex; gap:10px; margin-bottom:14px; align-items:center;}
.action-row{display:flex; gap:10px; margin-top:4px; margin-bottom:20px;}

/* ---------- forms ---------- */
.field-label{display:block; font-size:12px; color:var(--ink-soft); margin-bottom:5px; font-weight:600;}
.input{
  width:100%; padding:9px 11px; border-radius:8px; border:1px solid var(--border); background:var(--surface);
  font-family:inherit; font-size:13px; color:var(--ink);
}
.input:focus{outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft);}
.input.readonly{background:var(--gray-soft); color:var(--ink-soft); display:flex; align-items:center;}
.input.auto{width:auto; min-width:220px;}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px 14px; margin:14px 0;}
.form-grid .span2{grid-column:1/-1;}
.price-hint{background:var(--brand-soft); border-radius:8px; padding:10px 12px; font-size:12.5px; margin-bottom:8px;}
.price-hint .total{color:var(--brand-dark); font-weight:700;}
.filter-bar{display:flex; flex-wrap:wrap; gap:8px; padding:2px 14px 10px; align-items:center;}
.filter-bar .input{min-width:150px; flex:1 1 180px;}
.filter-bar .btn{flex:0 0 auto;}
.chk{display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--ink-soft); white-space:nowrap; cursor:pointer;}
.filter-count{font-size:12px; color:var(--ink-faint); padding:0 14px 8px;}

/* ---------- modal ---------- */
#modalWrap{position:fixed; inset:0; display:none; z-index:60;}
#modalWrap.open{display:block;}
.modal-backdrop{position:fixed; inset:0; background:rgba(10,20,22,.45); display:flex; align-items:flex-start; justify-content:center; padding:40px 16px; overflow-y:auto;}
.modal{background:var(--surface); border-radius:var(--radius-lg); padding:22px 24px; width:100%; max-width:560px; box-shadow:0 20px 50px rgba(0,0,0,.25);}
.modal h3{margin:0 0 4px; font-size:16px;}
.modal-actions{display:flex; justify-content:flex-start; gap:10px; margin-top:16px; border-top:1px solid var(--border); padding-top:14px;}

/* ---------- misc widgets ---------- */
.detail-head{display:flex; align-items:center; justify-content:space-between; margin:14px 0 16px;}
.detail-head h2{margin:0 0 4px; font-size:19px;}
.muted{color:var(--ink-faint); font-size:12.5px;}
.kv{padding:16px 18px; display:grid; grid-template-columns:1fr 1fr; gap:12px 18px;}
.kv div{display:flex; flex-direction:column; gap:3px;}
.kv span{font-size:11.5px; color:var(--ink-faint);}
.kv b{font-size:13.5px; font-weight:700;}

.gauge{padding:16px 18px;}
.gauge-row{display:flex; justify-content:space-between; font-size:12.5px; color:var(--ink-soft); margin-bottom:6px;}
.gauge-bar{height:10px; border-radius:99px; background:var(--gray-soft); overflow:hidden;}
.gauge-fill{height:100%; border-radius:99px;}
.gauge-fill.green{background:var(--green);}
.gauge-fill.amber{background:var(--amber);}
.gauge-fill.red{background:var(--red);}

.barchart{padding:16px 18px; display:flex; flex-direction:column; gap:12px;}
.barrow{display:grid; grid-template-columns:130px 1fr 130px; align-items:center; gap:10px; font-size:12.5px;}
.barlabel{color:var(--ink-soft);}
.bartrack{height:9px; background:var(--gray-soft); border-radius:99px; overflow:hidden;}
.barfill{height:100%; background:var(--brand); border-radius:99px;}
.barvalue{text-align:left; color:var(--ink-soft); font-size:11.5px;}

.alert{padding:11px 16px; border-radius:10px; font-size:13px; margin-bottom:16px; font-weight:600;}
.alert.amber{background:var(--amber-soft); color:var(--amber);}

/* ---------- toast ---------- */
.toast{
  position:fixed; bottom:20px; left:50%; transform:translateX(-50%) translateY(20px); opacity:0;
  background:var(--ink); color:#fff; padding:11px 20px; border-radius:9px; font-size:13px; z-index:100;
  transition:all .18s; pointer-events:none; box-shadow:0 10px 30px rgba(0,0,0,.25);
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0);}
.toast.green{background:var(--green);}
.toast.red{background:var(--red);}
.toast.amber{background:var(--amber);}

/* ---------- login ---------- */
.login-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; background:linear-gradient(160deg,var(--sidebar-bg),#173836); padding:20px;}
.login-card{background:var(--surface); border-radius:16px; padding:32px 30px; width:100%; max-width:400px; box-shadow:0 25px 60px rgba(0,0,0,.35);}
.login-brand{display:flex; align-items:center; gap:12px; margin-bottom:16px;}
.login-brand .ic{width:26px; height:26px; color:var(--brand);}
.login-note{font-size:12.5px; color:var(--ink-soft); background:var(--brand-soft); padding:10px 12px; border-radius:8px; margin-bottom:16px;}
.login-hint{font-size:11.5px; color:var(--ink-faint); margin-top:14px; text-align:center;}

.menu-toggle{display:none;}
.sidebar-close{display:none;}
.nav-backdrop{position:fixed; top:0; right:0; bottom:0; left:0; background:rgba(10,20,22,.45); z-index:49; display:none;}
.nav-backdrop.open{display:block;}
/* ---------- responsive ---------- */
.toolbar, .action-row, .card-head, .detail-head, .modal-actions{flex-wrap:wrap;}
@media (max-width: 880px){
  .menu-toggle{display:inline-flex; width:38px; height:38px; justify-content:center;}
  .sidebar{
    position:fixed; top:0; right:0; left:auto; z-index:50;
    width:min(300px, 84vw);
    height:100vh; max-height:100vh; overflow-y:auto;
    transform:translateX(100%); transition:transform .22s ease;
    box-shadow:0 0 40px rgba(0,0,0,.35);
  }
  .sidebar.open{transform:translateX(0);}
  .sidebar-close{display:flex; align-items:center; justify-content:center; position:absolute; top:12px; left:12px; width:34px; height:34px; border-radius:8px; border:none; background:rgba(255,255,255,.1); color:#fff; font-size:17px; line-height:1; cursor:pointer;}
  .sidebar-close:hover{background:rgba(255,255,255,.2);}
  .kv{grid-template-columns:1fr;}
  .form-grid{grid-template-columns:1fr;}
  .content{padding:16px 14px 50px;}
  .topbar{padding:12px 14px;}
  .barrow{grid-template-columns:minmax(72px,110px) 1fr minmax(72px,110px);}
  .input, select, .btn, .qty-input{font-size:16px;}
}
@media (max-width: 520px){
  .kpi-grid{grid-template-columns:repeat(auto-fit, minmax(150px,1fr));}
  .login-card{padding:24px 18px;}
  .login-wrap{padding:12px;}
  .topbar-title{font-size:15px;}
  .modal-backdrop{padding:16px 10px;}
  .modal{padding:18px 14px;}
  .input.auto{min-width:140px;}
  .topbar-meta{font-size:11px;}
  .content{padding:12px 10px 46px;}
}