/* ============ فونت فارسی محلی (Vazirmatn) — بدون وابستگی به اینترنت ============ */
@font-face{
  font-family:'Vazirmatn';
  src:url('/fonts/Vazirmatn-UI-FD-Regular.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Vazirmatn';
  src:url('/fonts/Vazirmatn-UI-FD-Medium.woff2') format('woff2');
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Vazirmatn';
  src:url('/fonts/Vazirmatn-UI-FD-SemiBold.woff2') format('woff2');
  font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Vazirmatn';
  src:url('/fonts/Vazirmatn-UI-FD-Bold.woff2') format('woff2');
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Vazirmatn';
  src:url('/fonts/Vazirmatn-UI-FD-ExtraBold.woff2') format('woff2');
  font-weight:800; font-style:normal; font-display:swap;
}

/* ============ توکن‌های رنگ (سیستمی، الهام از اپل) ============ */
:root{
  --bg:#f2f2f7;              /* systemGroupedBackground */
  --bg-elevated:#ffffff;      /* secondarySystemGroupedBackground */
  --card:#ffffff;
  --ink:#1c1c1e;               /* label */
  --muted:#6e6e73;             /* secondaryLabel */
  --muted-2:#8e8e93;           /* tertiaryLabel */
  --border:rgba(60,60,67,0.13);
  --border-strong:rgba(60,60,67,0.22);
  --accent:#0a84ff;            /* systemBlue */
  --accent-ink:#ffffff;
  --accent-soft:rgba(10,132,255,0.10);
  --success:#30a46c;
  --success-soft:rgba(48,164,108,0.10);
  --danger:#ff3b30;
  --danger-soft:rgba(255,59,48,0.08);
  --shadow-sm:0 1px 2px rgba(0,0,0,0.04), 0 1px 1px rgba(0,0,0,0.03);
  --shadow-md:0 8px 24px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.04);
  --shadow-lg:0 20px 48px rgba(0,0,0,0.14), 0 6px 16px rgba(0,0,0,0.06);
  --radius-sm:10px;
  --radius-md:16px;
  --radius-lg:22px;
  --header-h:64px;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark){
  :root{
    --bg:#000000;
    --bg-elevated:#1c1c1e;
    --card:#1c1c1e;
    --ink:#f5f5f7;
    --muted:#98989d;
    --muted-2:#6e6e73;
    --border:rgba(255,255,255,0.10);
    --border-strong:rgba(255,255,255,0.16);
    --accent:#0a84ff;
    --accent-soft:rgba(10,132,255,0.18);
    --success:#32d17a;
    --success-soft:rgba(50,209,122,0.14);
    --danger:#ff453a;
    --danger-soft:rgba(255,69,58,0.14);
    --shadow-sm:0 1px 2px rgba(0,0,0,0.5);
    --shadow-md:0 8px 24px rgba(0,0,0,0.5);
    --shadow-lg:0 20px 48px rgba(0,0,0,0.6);
  }
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'Vazirmatn', Tahoma, 'Segoe UI', sans-serif;
  -webkit-font-smoothing:antialiased;
  letter-spacing:-0.005em;
  min-height:100vh;
}
::selection{ background:var(--accent-soft); }

.app{ max-width:1080px; margin:0 auto; padding:0 20px 64px; }

/* ============ هدر بالای صفحه (شبیه navigation bar اپل) ============ */
header.top{
  position:sticky; top:0; z-index:20;
  margin:0 -20px 24px;
  padding:14px 20px;
  background:color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
}
header.top .brand{ display:flex; align-items:center; gap:10px; }
header.top .brand .logo-dot{
  width:34px; height:34px; border-radius:10px;
  background:linear-gradient(145deg, #0a84ff, #5e5ce6);
  box-shadow:var(--shadow-sm);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:700; font-size:15px;
}
header.top h1{ font-size:17px; margin:0; font-weight:700; color:var(--ink); }
header.top .user-box{ display:flex; align-items:center; gap:10px; }
header.top .user-name{ font-size:13px; color:var(--muted); }
header.top form{ margin:0; }

nav.tabs{
  display:flex; gap:2px; background:rgba(120,120,128,0.12);
  padding:3px; border-radius:12px; flex-wrap:wrap;
}
nav.tabs a{
  text-decoration:none; color:var(--muted); padding:7px 16px; border-radius:9px;
  cursor:pointer; font-size:13.5px; font-family:inherit; font-weight:600;
  transition:background .18s ease, color .18s ease;
}
nav.tabs a:hover{ color:var(--ink); }
nav.tabs a.active{ background:var(--card); color:var(--ink); box-shadow:var(--shadow-sm); }

main{ padding:4px 0 40px; }

/* ============ کارت‌ها ============ */
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:22px 24px;
  margin-bottom:20px;
  box-shadow:var(--shadow-sm);
}
h2{
  font-size:15.5px; margin:0 0 18px; color:var(--ink); font-weight:700;
  display:flex; align-items:center; gap:8px;
}
h2::before{
  content:''; width:4px; height:16px; border-radius:4px;
  background:linear-gradient(180deg, var(--accent), #5e5ce6);
  display:inline-block;
}

.grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
@media(max-width:560px){ .grid{ grid-template-columns:1fr; } }

label{
  font-size:12px; color:var(--muted); display:block; margin-bottom:6px; font-weight:600;
}
input,select{
  width:100%; padding:11px 13px; border-radius:var(--radius-sm); border:1px solid var(--border-strong);
  background:var(--bg); color:var(--ink); font-family:inherit; font-size:14px;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
input::placeholder{ color:var(--muted-2); }
input:focus, select:focus{
  outline:none; border-color:var(--accent); background:var(--card);
  box-shadow:0 0 0 4px var(--accent-soft);
}

/* ============ دکمه‌ها ============ */
button.btn, a.btn{
  background:var(--accent); color:var(--accent-ink); border:none; padding:11px 20px; border-radius:12px;
  cursor:pointer; font-size:14px; font-weight:700; font-family:inherit; text-decoration:none;
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  transition:transform .12s ease, opacity .15s ease, box-shadow .15s ease;
  box-shadow:0 1px 3px rgba(10,132,255,0.35);
}
button.btn:hover, a.btn:hover{ opacity:0.92; }
button.btn:active, a.btn:active{ transform:scale(0.97); }
button.btn.secondary, a.btn.secondary{
  background:rgba(120,120,128,0.12); color:var(--ink); box-shadow:none; border:1px solid var(--border);
}
button.btn.danger{
  background:var(--danger-soft); color:var(--danger); border:1px solid transparent; box-shadow:none;
}
button.btn.danger:hover{ background:var(--danger); color:#fff; }

/* ============ جدول‌ها ============ */
table{ width:100%; border-collapse:collapse; font-size:13.5px; }
th,td{ border-bottom:1px solid var(--border); padding:11px 10px; text-align:center; }
th{ color:var(--muted); font-weight:700; font-size:12px; text-transform:none; background:transparent; }
tbody tr{ transition:background .12s ease; }
tbody tr:hover{ background:rgba(120,120,128,0.06); }
.overflow{ overflow-x:auto; border-radius:var(--radius-sm); }
.row-actions{ display:flex; gap:6px; justify-content:center; }
.small{ font-size:12.5px; padding:7px 13px; border-radius:9px; }

/* ============ آیتم‌های لیست (فاکتورها) ============ */
.list-item{
  display:flex; justify-content:space-between; align-items:center; gap:12px; padding:16px 18px;
  border:1px solid var(--border); border-radius:var(--radius-md); margin-bottom:10px;
  background:var(--bg-elevated); box-shadow:var(--shadow-sm);
  transition:box-shadow .15s ease, transform .12s ease;
}
.list-item:hover{ box-shadow:var(--shadow-md); transform:translateY(-1px); }
.muted{ color:var(--muted); font-size:12.5px; }
.empty{ text-align:center; color:var(--muted); padding:48px 0; font-size:14px; }
.flexend{ display:flex; justify-content:flex-end; gap:10px; margin-top:16px; }
.badge{
  background:var(--accent-soft); color:var(--accent); padding:3px 10px; border-radius:20px;
  font-size:11px; font-weight:700;
}
.total-box{ display:flex; justify-content:flex-end; margin-top:6px; }
.total-table{ width:300px; font-size:13.5px; }
.total-table td{ border:none; padding:7px 4px; }
.total-table tr td:first-child{ color:var(--muted); }
.total-table tr td:last-child{ text-align:left; font-weight:700; }
.total-table tr:last-child td{ border-top:1px solid var(--border); padding-top:12px; font-size:15px; }
.total-table tr:last-child td:last-child{ color:var(--accent); }
form{ margin:0; }

/* ============ صفحه ورود ============ */
.login-wrap{
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px;
  background:
    radial-gradient(1100px 600px at 15% -10%, rgba(10,132,255,0.16), transparent 60%),
    radial-gradient(900px 500px at 110% 10%, rgba(94,92,230,0.14), transparent 55%),
    var(--bg);
}
.login-card{
  width:100%; max-width:380px; background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:36px 30px; box-shadow:var(--shadow-lg);
  text-align:center;
}
.login-card .logo-dot{
  width:56px; height:56px; border-radius:16px; margin:0 auto 18px;
  background:linear-gradient(145deg, #0a84ff, #5e5ce6);
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:24px; font-weight:800;
  box-shadow:var(--shadow-md);
}
.login-card h1{ font-size:19px; margin:0 0 4px; }
.login-card p.sub{ color:var(--muted); font-size:13px; margin:0 0 26px; }
.login-card label{ text-align:right; }
.login-card .field{ margin-bottom:14px; }
.login-card button.btn{ width:100%; padding:13px; font-size:15px; margin-top:6px; }
.login-error{
  background:var(--danger-soft); color:var(--danger); border-radius:10px; padding:10px 14px;
  font-size:13px; margin-bottom:16px; font-weight:600;
}

/* ============ صفحه چاپ ============ */
.p-wrap{
  font-family:'Vazirmatn', Tahoma, sans-serif; direction:rtl; font-size:12px; color:#000;
  max-width:900px; margin:20px auto; padding:0 16px;
}
.p-title{ text-align:center; font-weight:800; font-size:17px; margin:10px 0; letter-spacing:-0.01em; }
.p-box{ border:1px solid #d0d0d5; border-radius:10px; margin-bottom:8px; overflow:hidden; }
.p-box .hd{ background:#f2f2f7; padding:6px 10px; font-weight:700; border-bottom:1px solid #d0d0d5; }
.p-box .bd{ padding:8px 10px; line-height:2; }
.p-table{ width:100%; border-collapse:collapse; margin-top:8px; }
.p-table th,.p-table td{ border:1px solid #d0d0d5; padding:5px 6px; font-size:11px; text-align:center; }
.p-table th{ background:#f2f2f7; font-weight:700; }
.p-sign{ display:flex; justify-content:space-between; margin-top:34px; font-size:11.5px; }
.p-actions{ text-align:center; margin:16px 0; display:flex; gap:10px; justify-content:center; }
@media print{
  .p-actions{ display:none; }
  body{ background:#fff; }
}