@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;700&display=swap');
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:           #f4f5f7;
  --bg-card:      #ffffff;
  --bg-secondary: #f8f9fa;
  --border:       rgba(0,0,0,0.08);
  --border-hover: rgba(0,0,0,0.16);
  --text:         #1a1a1a;
  --text-secondary:#6b7280;
  --text-muted:   #9ca3af;
  --green:        #1D9E75;
  --green-dark:   #0F6E56;
  --green-bg:     #E1F5EE;
  --green-text:   #085041;
  --amber:        #B45309;
  --amber-bg:     #FEF3C7;
  --amber-text:   #633806;
  --red:          #DC2626;
  --red-bg:       #FEE2E2;
  --red-text:     #7f1d1d;
  --blue-bg:      #EFF6FF;
  --blue-text:    #1e40af;
  --purple-bg:    #EDE9FE;
  --purple-text:  #4c1d95;
  --radius:       8px;
  --radius-lg:    12px;
  --shadow:       0 1px 4px rgba(0,0,0,0.08);
  --shadow-md:    0 4px 16px rgba(0,0,0,0.1);
}

html, body { height:100%; font-family:'Vazirmatn',sans-serif; direction:rtl; background:var(--bg); color:var(--text); font-size:14px; }
#app { display:flex; height:100vh; overflow:hidden; }

/* ─── Sidebar ─────────────────────────────────────── */
.sidebar { width:52px; background:var(--bg-card); border-left:1px solid var(--border); display:flex; flex-direction:column; align-items:center; padding:12px 0; gap:2px; flex-shrink:0; z-index:10; overflow-y:auto; }
.sb-logo { width:36px; height:36px; background:var(--green); border-radius:var(--radius); display:flex; align-items:center; justify-content:center; cursor:pointer; margin-bottom:8px; flex-shrink:0; }
.sb-logo i { color:#fff; font-size:20px; }
.sb-divider { width:24px; height:1px; background:var(--border); margin:4px 0; flex-shrink:0; }
.sb-btn { width:38px; height:38px; border:none; background:transparent; border-radius:var(--radius); cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--text-secondary); font-size:19px; transition:all .15s; position:relative; flex-shrink:0; }
.sb-btn:hover { background:var(--bg-secondary); color:var(--text); }
.sb-btn.active { background:var(--green-bg); color:var(--green-dark); }
.sb-tip { position:absolute; right:46px; top:50%; transform:translateY(-50%); background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:4px 10px; font-size:12px; white-space:nowrap; color:var(--text); display:none; z-index:100; box-shadow:var(--shadow); }
.sb-btn:hover .sb-tip { display:block; }

/* ─── Layout ──────────────────────────────────────── */
.main { flex:1; display:flex; flex-direction:column; overflow:hidden; min-width:0; }
.topbar { height:48px; background:var(--bg-card); border-bottom:1px solid var(--border); display:flex; align-items:center; padding:0 1.25rem; justify-content:space-between; flex-shrink:0; }
.page-title { font-size:14px; font-weight:500; }
.topbar-right { display:flex; align-items:center; gap:12px; }
.alert-badge { background:var(--red-bg); color:var(--red-text); font-size:11px; padding:3px 10px; border-radius:20px; border:1px solid #fca5a5; display:flex; align-items:center; gap:4px; cursor:pointer; }
.user-info { display:flex; align-items:center; gap:7px; }
.user-circle { width:30px; height:30px; border-radius:50%; background:var(--green-bg); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:500; color:var(--green-text); }
.content { flex:1; overflow-y:auto; padding:1.25rem; }

/* ─── Pages ───────────────────────────────────────── */
.page { display:none; animation:fadeIn .2s ease; }
.page.active { display:block; }
@keyframes fadeIn { from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:none} }

/* ─── Cards ───────────────────────────────────────── */
.card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:1rem 1.25rem; margin-bottom:1rem; }
.card-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:1rem; gap:8px; flex-wrap:wrap; }
.card-title { font-size:13px; font-weight:500; display:flex; align-items:center; gap:6px; }

/* ─── Stats ───────────────────────────────────────── */
.stats-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:10px; margin-bottom:1.25rem; }
.stat-card { background:var(--bg-secondary); border-radius:var(--radius); padding:12px; border:1px solid var(--border); transition:box-shadow .15s; }
.stat-card:hover { box-shadow:var(--shadow-md); }
.sl { font-size:11px; color:var(--text-secondary); margin-bottom:5px; }
.sv { font-size:18px; font-weight:500; line-height:1.2; word-break:break-all; }
.ss { font-size:11px; color:var(--text-muted); margin-top:3px; }
.sv.ok { color:var(--green-dark); }
.sv.warn { color:var(--amber); }
.sv.err { color:var(--red); }

/* ─── Two-column ──────────────────────────────────── */
.two-col { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:1rem; }
@media (max-width:700px) { .two-col { grid-template-columns:1fr; } }

/* ─── Buttons ─────────────────────────────────────── */
.btn { font-family:'Vazirmatn',sans-serif; font-size:12px; padding:6px 12px; border:1px solid var(--border-hover); border-radius:var(--radius); background:transparent; color:var(--text); cursor:pointer; display:inline-flex; align-items:center; gap:5px; transition:all .15s; white-space:nowrap; text-decoration:none; }
.btn:hover { background:var(--bg-secondary); }
.btn.primary { background:var(--green); border-color:var(--green); color:#fff; }
.btn.primary:hover { background:var(--green-dark); }
.btn.danger { color:var(--red); border-color:#fca5a5; }
.btn.danger:hover { background:var(--red-bg); }
.btn.xs { padding:3px 8px; font-size:11px; }
.btn-group { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.btn-close { background:none; border:none; cursor:pointer; color:var(--text-secondary); font-size:18px; padding:2px; }
.btn-close:hover { color:var(--text); }
.btn-icon-del { background:none; border:none; cursor:pointer; color:var(--text-muted); font-size:16px; padding:2px 4px; border-radius:4px; display:flex; align-items:center; }
.btn-icon-del:hover { color:var(--red); background:var(--red-bg); }

/* ─── Forms ───────────────────────────────────────── */
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:1rem; }
.form-grid.cols3 { grid-template-columns:1fr 1fr 1fr; }
@media (max-width:600px) { .form-grid, .form-grid.cols3 { grid-template-columns:1fr; } }
.form-group { display:flex; flex-direction:column; gap:4px; }
.form-group.full { grid-column:1/-1; }
label { font-size:11px; color:var(--text-secondary); font-weight:500; }
input, select, textarea { font-family:'Vazirmatn',sans-serif; font-size:13px; padding:7px 10px; border:1px solid var(--border-hover); border-radius:var(--radius); background:var(--bg-card); color:var(--text); direction:rtl; width:100%; transition:border .15s; }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--green); box-shadow:0 0 0 3px rgba(29,158,117,.1); }
textarea { resize:vertical; }
.form-actions { display:flex; gap:8px; margin-top:1rem; flex-wrap:wrap; }
.check-label { display:flex; align-items:center; gap:7px; cursor:pointer; font-size:12px; }
.check-label input { width:auto; }

/* ─── Table ───────────────────────────────────────── */
table { width:100%; border-collapse:collapse; font-size:12px; }
th { font-weight:500; color:var(--text-secondary); padding:8px; text-align:right; border-bottom:2px solid var(--border); font-size:11px; white-space:nowrap; }
td { padding:9px 8px; border-bottom:1px solid var(--border); vertical-align:middle; }
tr:last-child td { border-bottom:none; }
tbody tr:hover td { background:var(--bg-secondary); }
.empty-row { text-align:center; color:var(--text-muted); padding:28px !important; font-size:13px; }

/* ─── Badges ──────────────────────────────────────── */
.badge { display:inline-block; padding:2px 8px; border-radius:20px; font-size:11px; font-weight:500; white-space:nowrap; }
.badge-g { background:var(--green-bg); color:var(--green-text); }
.badge-a { background:var(--amber-bg); color:var(--amber-text); }
.badge-r { background:var(--red-bg); color:var(--red-text); }
.badge-b { background:var(--blue-bg); color:var(--blue-text); }
.badge-p { background:var(--purple-bg); color:var(--purple-text); }
.badge-gray { background:var(--bg-secondary); color:var(--text-secondary); }

/* ─── Alerts ──────────────────────────────────────── */
.alert { padding:9px 14px; border-radius:var(--radius); font-size:12px; margin-bottom:8px; display:flex; align-items:center; gap:8px; }
.alert-warn { background:var(--amber-bg); color:var(--amber-text); border:1px solid #fcd34d; }
.alert-err  { background:var(--red-bg);   color:var(--red-text);   border:1px solid #fca5a5; }
.alert-ok   { background:var(--green-bg); color:var(--green-text); border:1px solid #6ee7b7; }
.alert-info { background:var(--blue-bg);  color:var(--blue-text);  border:1px solid #93c5fd; }

/* ─── Search row ──────────────────────────────────── */
.search-row { display:flex; gap:8px; margin-bottom:1rem; align-items:center; flex-wrap:wrap; }
.search-row input { flex:1; min-width:140px; }
.info-box { background:var(--green-bg); color:var(--green-text); border-radius:var(--radius); padding:8px 14px; font-size:12px; margin-bottom:10px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }

/* ─── Barcode ─────────────────────────────────────── */
.barcode-section { margin:12px 0; padding:14px; background:var(--bg-secondary); border-radius:var(--radius); border:1px solid var(--border); }
.barcode-box { text-align:center; }
.barcode-box canvas { max-width:100%; }
.bc-label { font-size:12px; color:var(--text); margin-top:4px; }
.barcode-scan-box { display:flex; align-items:center; gap:10px; background:var(--bg-secondary); border-radius:var(--radius); padding:8px 12px; margin-bottom:.5rem; border:2px solid var(--border); transition:border .15s; }
.barcode-scan-box:focus-within { border-color:var(--green); }
.barcode-scan-box i { color:var(--text-muted); font-size:20px; flex-shrink:0; }
.barcode-scan-box input { border:none; background:transparent; font-size:13px; flex:1; padding:0; }
.barcode-scan-box input:focus { box-shadow:none; }

/* ─── Invoice rows ────────────────────────────────── */
.inv-row-header { display:grid; grid-template-columns:2.5fr 65px 110px 55px 90px 28px; gap:6px; font-size:10px; font-weight:500; color:var(--text-secondary); margin-bottom:4px; padding:0 2px; }
.inv-row { display:grid; grid-template-columns:2.5fr 65px 110px 55px 90px 28px; gap:6px; margin-bottom:6px; align-items:center; padding:6px; background:var(--bg-secondary); border-radius:var(--radius); }
.inv-row input, .inv-row select { padding:5px 7px; font-size:12px; background:var(--bg-card); }
.inv-row-total { font-size:12px; font-weight:500; color:var(--green-dark); text-align:center; }
@media (max-width:600px) { .inv-row, .inv-row-header { grid-template-columns:1fr; } }

/* ─── Totals ──────────────────────────────────────── */
.total-box { background:var(--bg-secondary); border-radius:var(--radius); padding:12px 16px; }
.total-row { display:flex; justify-content:space-between; font-size:13px; color:var(--text-secondary); padding:4px 0; align-items:center; }
.total-row.main { font-size:16px; font-weight:500; color:var(--text); border-top:1px solid var(--border); margin-top:6px; padding-top:10px; }

/* ─── Tabs ────────────────────────────────────────── */
.tabs { display:flex; border-bottom:1px solid var(--border); margin-bottom:1rem; flex-wrap:wrap; }
.tab { padding:8px 16px; font-size:12px; border:none; background:transparent; color:var(--text-secondary); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; font-family:'Vazirmatn',sans-serif; transition:all .15s; }
.tab.active { color:var(--green-dark); border-bottom-color:var(--green); font-weight:500; }

/* ─── Loans ───────────────────────────────────────── */
.loan-item { border:1px solid var(--border); border-radius:var(--radius-lg); padding:14px; margin-bottom:10px; }
.loan-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }
.loan-title { font-size:13px; font-weight:500; }
.loan-meta { font-size:11px; color:var(--text-secondary); margin-bottom:8px; display:flex; justify-content:space-between; gap:8px; flex-wrap:wrap; }
.progress-bar { height:5px; background:var(--border); border-radius:3px; overflow:hidden; }
.progress-fill { height:100%; background:var(--green); border-radius:3px; transition:width .4s; }

/* ─── Margin preview ──────────────────────────────── */
#margin-preview { padding:8px 12px; border-radius:var(--radius); font-size:12px; margin-bottom:10px; font-weight:500; }

/* ─── Modal ───────────────────────────────────────── */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.45); z-index:1000; display:none; align-items:center; justify-content:center; padding:1rem; }
.modal-overlay.open { display:flex; animation:fadeIn .15s; }
.modal { background:var(--bg-card); border-radius:var(--radius-lg); padding:1.5rem; width:100%; max-width:500px; max-height:90vh; overflow-y:auto; box-shadow:0 20px 60px rgba(0,0,0,0.2); }
.modal-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:1.25rem; font-size:15px; font-weight:500; }

/* ─── Toast ───────────────────────────────────────── */
#toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); padding:10px 20px; border-radius:var(--radius); font-size:13px; z-index:9999; display:none; white-space:nowrap; box-shadow:0 4px 20px rgba(0,0,0,.25); }
.toast-ok  { background:#1a1a1a; color:#fff; }
.toast-err { background:var(--red); color:#fff; }
.toast-warn{ background:var(--amber); color:#fff; }

/* ─── Pagination ──────────────────────────────────── */
.pagination { display:flex; gap:6px; margin-top:1rem; align-items:center; flex-wrap:wrap; }
.pg-btn { padding:4px 10px; border:1px solid var(--border-hover); border-radius:var(--radius); font-size:12px; cursor:pointer; font-family:'Vazirmatn',sans-serif; background:var(--bg-card); }
.pg-btn.active { background:var(--green); color:#fff; border-color:var(--green); }
.pg-info { font-size:11px; color:var(--text-muted); }

/* ─── Avatar ──────────────────────────────────────── */
.avatar { width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:500; flex-shrink:0; }

/* ─── P&L ─────────────────────────────────────────── */
.pl-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:1rem; }
.pl-item { background:var(--bg-secondary); border-radius:var(--radius); padding:12px; }
.pl-label { font-size:11px; color:var(--text-secondary); margin-bottom:5px; }
.pl-value { font-size:18px; font-weight:500; }
.pl-pos { color:var(--green-dark); }
.pl-neg { color:var(--red); }

/* ─── Spinner ─────────────────────────────────────── */
@keyframes spin { to { transform:rotate(360deg); } }
.spin { animation:spin 1s linear infinite; display:inline-block; }

/* ─── Print ───────────────────────────────────────── */
@media print {
  .sidebar, .topbar, .no-print { display:none !important; }
  .content { padding:0; }
  .page { display:block !important; }
  .page:not(.active) { display:none !important; }
}

/* ─── Mobile Bottom Nav (موبایل) ─────────────────────── */
@media (max-width:700px) {
  .sidebar { display:none; }
  .main { width:100%; }
  .content { padding:.75rem; padding-bottom:70px; }
  .stats-grid { grid-template-columns:repeat(2,1fr); }
  #mobile-nav { display:flex; }
  .topbar { padding:0 .75rem; }
  .inv-row-header { display:none; }
  .inv-row { grid-template-columns:1fr 1fr; }
  .modal { padding:1rem; }
}
@media (min-width:701px) {
  #mobile-nav { display:none; }
}
#mobile-nav {
  position:fixed; bottom:0; right:0; left:0; z-index:100;
  background:var(--bg-card); border-top:1px solid var(--border);
  align-items:center; justify-content:space-around;
  height:58px; padding:0 4px;
}
.mnav-btn {
  flex:1; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:2px; border:none; background:none;
  color:var(--text-secondary); font-size:10px; cursor:pointer;
  padding:4px 2px; border-top:2px solid transparent;
  font-family:'Vazirmatn',sans-serif; transition:color .15s;
  max-width:70px;
}
.mnav-btn i { font-size:20px; }
.mnav-btn.active { color:var(--green-dark); border-top-color:var(--green); }

/* ── Date Picker شمسی ─────────────────────────────── */
.jdp-wrap   { position:relative; display:inline-block; width:100%; }
.jdp-input  { width:100%; cursor:pointer; background:var(--bg-input) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") no-repeat left 10px center; }
.jdp-popup  { position:absolute; top:calc(100% + 4px); right:0; z-index:9000;
              background:var(--bg-card); border:1px solid var(--border);
              border-radius:var(--radius); box-shadow:0 8px 32px rgba(0,0,0,.12);
              padding:12px; min-width:290px; }
.jdp-popup.jdp-up { top:auto; bottom:calc(100% + 4px); }
.jdp-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.jdp-nav    { background:none; border:none; cursor:pointer; padding:4px 8px;
              border-radius:var(--radius); color:var(--text); font-size:18px; }
.jdp-nav:hover { background:var(--bg-secondary); }
.jdp-title  { font-size:14px; font-weight:600; color:var(--text); }
.jdp-grid   { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; text-align:center; }
.jdp-dow    { font-size:11px; color:var(--text-secondary); padding:4px 0; }
.jdp-day    { font-size:12px; padding:6px 2px; border-radius:6px; cursor:pointer; color:var(--text); }
.jdp-day:hover { background:var(--bg-secondary); }
.jdp-day.today  { font-weight:700; color:var(--green-dark); }
.jdp-day.selected { background:var(--green); color:#fff; font-weight:600; }
.jdp-day.empty  { pointer-events:none; }
.jdp-day.other-month { color:var(--text-secondary); opacity:.4; }
.jdp-months { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
.jdp-m-btn  { padding:8px 4px; border:1px solid var(--border); border-radius:8px; cursor:pointer;
              font-size:12px; background:none; color:var(--text); font-family:inherit; }
.jdp-m-btn:hover, .jdp-m-btn.selected { background:var(--green); color:#fff; border-color:var(--green); }
.jdp-today-btn { width:100%; margin-top:8px; padding:6px; background:var(--bg-secondary);
                 border:none; border-radius:8px; cursor:pointer; font-size:12px;
                 color:var(--text); font-family:inherit; }
.jdp-today-btn:hover { background:var(--border); }

/* ── Product search dropdown در فاکتور ────────────── */
.inv-prod-search-wrap { position:relative; }
.inv-prod-search { width:100%; }
.prod-dropdown  { position:absolute; top:100%; right:0; left:0; z-index:500;
                  background:var(--bg-card); border:1px solid var(--border);
                  border-radius:var(--radius); box-shadow:0 4px 16px rgba(0,0,0,.1);
                  max-height:220px; overflow-y:auto; }
.prod-dd-item   { padding:8px 12px; cursor:pointer; display:flex;
                  justify-content:space-between; font-size:13px; gap:8px; }
.prod-dd-item:hover { background:var(--bg-secondary); }
.prod-dd-item:not(:last-child) { border-bottom:1px solid var(--border); }

/* ── فاکتور موبایل ────────────────────────────────── */
@media (max-width:700px) {
  .inv-row { grid-template-columns:1fr 60px !important; gap:6px !important; }
  .inv-row > div:first-child { grid-column:1/-1; }
  .inv-row .inv-qty  { width:60px; }
  .inv-row .inv-price { width:100%; grid-column:1; }
  .inv-row .inv-disc  { width:60px; }
  .inv-row-total { font-size:13px; font-weight:500; }
  .inv-form-grid { grid-template-columns:1fr !important; }
  .jdp-popup { right:-10px; min-width:270px; }
  .modal { padding:.75rem; }
  .modal .form-grid { grid-template-columns:1fr !important; }
}

/* ── اقلام فاکتور ─────────────────────────────────── */
#inv-items .inv-row {
  display:grid;
  grid-template-columns:1fr 64px 110px 64px 90px 32px;
  gap:6px; align-items:center;
  padding:6px 0; border-bottom:1px solid var(--border);
}
#inv-items .inv-row:last-child { border-bottom:none; }
.inv-row-header {
  display:grid;
  grid-template-columns:1fr 64px 110px 64px 90px 32px;
  gap:6px; font-size:11px; color:var(--text-secondary);
  padding:4px 0; border-bottom:1px solid var(--border); margin-bottom:4px;
}