@import url('https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/Vazirmatn-font-face.css');

:root{
  --bg: #F4F5F9;
  --card-flat: #EEF0F6;
  --sidebar-bg: #FFFFFF;
  --border: #E5E7F0;
  --text: #1F2430;
  --text-muted: #8A8FA3;
  --accent: #5B4FE8;
  --accent-dark: #4338CA;
  --accent-soft: #EFEDFE;
  --green: #16A34A;
  --green-soft: #E7F7EC;
  --amber: #D97706;
  --red: #DC2626;
  --red-soft: #FDEDED;
  --chart-green: #10B981;
  --chart-purple: #6366F1;
  --radius: 16px;
  --radius-sm: 10px;
}

*{ box-sizing: border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family: 'Vazirmatn', Tahoma, sans-serif;
  background: var(--bg);
  color: var(--text);
  direction: rtl;
  font-size: 14px;
}
a{ text-decoration:none; color: inherit; }
button{ font-family: inherit; }

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

/* ---------- Sidebar ---------- */
.sidebar{
  width: 240px;
  background: var(--sidebar-bg);
  border-left: 1px solid var(--border);
  padding: 22px 16px;
  display:flex;
  flex-direction:column;
  position: sticky; top:0; height:100vh;
}
.brand{ padding: 4px 6px 20px; border-bottom: 1px solid var(--border); margin-bottom: 14px; }
.brand-name{ font-weight:700; font-size:18px; color: var(--accent-dark); }
.brand-sub{ font-size:12px; color: var(--text-muted); margin-top:2px; }

.nav{ display:flex; flex-direction:column; gap:2px; flex:1; overflow-y:auto; }
.nav a{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px; border-radius: var(--radius-sm);
  color: var(--text); font-size:13.5px; font-weight:500;
}
.nav a:hover{ background: var(--bg); }
.nav a.active{ background: var(--accent-soft); color: var(--accent-dark); font-weight:700; }
.nav .ico{ opacity:.85; }

.logout-link{ margin-top:12px; padding-top:12px; border-top:1px solid var(--border); color: var(--red); font-weight:600; text-align:center; padding:10px; border-radius:var(--radius-sm); }
.logout-link:hover{ background: var(--red-soft); }

/* ---------- Main ---------- */
.main{ flex:1; padding: 26px 30px; max-width: 100%; overflow-x:hidden; }
.page-header{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:20px; flex-wrap:wrap; gap:10px; }
.page-title{ font-size:20px; font-weight:800; margin:0; }
.page-sub{ color: var(--text-muted); font-size:13px; margin-top:4px; }

.btn{
  display:inline-flex; align-items:center; gap:6px;
  border:none; border-radius: var(--radius-sm); padding:10px 18px;
  font-weight:700; font-size:13.5px; cursor:pointer;
}
.btn-primary{ background: var(--accent); color:#fff; }
.btn-primary:hover{ background: var(--accent-dark); }
.btn-dark{ background:#1F2430; color:#fff; }
.btn-outline{ background:#fff; border:1px solid var(--border); color: var(--text); }
.btn-sm{ padding:6px 12px; font-size:12.5px; }

/* ---------- Shared card look (shadow + soft gradient + hover animation) ---------- */
.stat-card, .highlight-card, .chart-card, .panel-card{
  box-shadow: 0 2px 6px rgba(31,36,48,0.05), 0 10px 24px -12px rgba(91,79,232,0.12);
  transition: transform .18s ease, box-shadow .18s ease;
  will-change: transform;
}
.stat-card:hover, .highlight-card:hover, .chart-card:hover, .panel-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 6px 14px rgba(31,36,48,0.07), 0 16px 32px -14px rgba(91,79,232,0.20);
}
.stat-card{ background: linear-gradient(155deg, #F5F3FF 0%, var(--card-flat) 60%); }
.highlight-card{ background: linear-gradient(155deg, #F5F3FF 0%, var(--card-flat) 65%); }
.chart-card, .panel-card{ background: linear-gradient(160deg, #FFFFFF 0%, #FBFBFE 100%); }

/* ---------- Stat cards ---------- */
.stat-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap:16px; margin-bottom:20px; }
.stat-card{ border-radius: var(--radius); padding:20px; }
.stat-label{ color: var(--text-muted); font-size:13px; }
.stat-value{ font-size:26px; font-weight:800; margin-top:8px; }
.stat-delta{ font-size:12px; color: var(--green); margin-top:6px; font-weight:600; }
.stat-value.money{ color: var(--green); }

.highlight-card{ border-radius: var(--radius); padding:26px; text-align:center; margin-bottom:20px; }
.highlight-card .label{ color: var(--text-muted); font-size:13px; margin-bottom:6px; }
.highlight-card .name{ font-weight:700; font-size:16px; }
.highlight-card .value{ color: var(--green); font-weight:800; font-size:18px; margin-top:8px; }

/* ---------- Charts row ---------- */
.chart-row{ display:grid; grid-template-columns: 1fr 1fr; gap:16px; margin-bottom:20px; }
.chart-card{ border:1px solid var(--border); border-radius: var(--radius); padding:18px; }
.chart-card-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; flex-wrap:wrap; gap:8px; }
.chart-title{ font-weight:700; font-size:14px; }
.pill-group{ display:flex; gap:4px; background: var(--bg); padding:4px; border-radius:10px; }
.pill{ border:none; background:transparent; padding:6px 12px; border-radius:8px; font-size:12.5px; font-weight:600; color: var(--text-muted); cursor:pointer; }
.pill.active{ background: var(--accent); color:#fff; }

/* ---------- Table card ---------- */
.panel-card{ border:1px solid var(--border); border-radius: var(--radius); padding:18px; margin-bottom:18px; }
.filters{ display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; margin-bottom:14px; }
.field{ display:flex; flex-direction:column; gap:6px; }
.field label{ font-size:12px; color: var(--text-muted); }
.field input, .field select{
  border:1px solid var(--border); border-radius: var(--radius-sm);
  padding:9px 12px; font-size:13px; font-family:inherit; min-width:150px; background:#fff;
}
.field.grow{ flex:1; min-width:220px; }
.field.grow input{ width:100%; }

table{ width:100%; border-collapse: collapse; font-size:13px; }
thead th{ text-align:right; color: var(--text-muted); font-weight:600; padding:10px 8px; border-bottom:1px solid var(--border); white-space:nowrap; }
tbody td{ padding:12px 8px; border-bottom:1px solid var(--border); white-space:nowrap; }
tbody tr:hover{ background: var(--bg); }

.badge{ display:inline-block; padding:4px 12px; border-radius:20px; font-size:12px; font-weight:700; }
.badge-green{ background: var(--green-soft); color: var(--green); }
.badge-red{ background: var(--red-soft); color: var(--red); }
.badge-gray{ background:#F1F2F6; color: var(--text-muted); }
.badge-purple{ background: var(--accent-soft); color: var(--accent-dark); }

.empty-state{ text-align:center; padding:50px 20px; color: var(--text-muted); }

.pagination{ display:flex; justify-content:center; gap:6px; margin-top:16px; }
.pagination a, .pagination span{ padding:7px 13px; border-radius:8px; border:1px solid var(--border); font-size:12.5px; }
.pagination a.active{ background: var(--accent); color:#fff; border-color: var(--accent); }

/* ---------- Login ---------- */
.login-wrap{ min-height:100vh; display:flex; align-items:center; justify-content:center; background: var(--bg); }
.login-card{ background:#fff; border:1px solid var(--border); border-radius: var(--radius); padding:38px 34px; width:360px; }
.login-card h1{ font-size:19px; text-align:center; margin:0 0 4px; }
.login-card p{ text-align:center; color: var(--text-muted); font-size:12.5px; margin:0 0 22px; }
.login-card .field{ margin-bottom:14px; }
.login-card input{ width:100%; }
.error-box{ background: var(--red-soft); color: var(--red); border-radius: var(--radius-sm); padding:10px 12px; font-size:12.5px; margin-bottom:14px; text-align:center; }

@media (max-width: 900px){
  .stat-grid{ grid-template-columns: repeat(2,1fr); }
  .chart-row{ grid-template-columns: 1fr; }
  .sidebar{ display:none; }
  .main{ padding:16px; }
}