*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --primary: #5B6EF5; --primary-light: #7C8DF7; --primary-dark: #3B4FD8;
  --success: #4CAF7D; --danger: #F56565; --warning: #F5A623;
  --bg: #0F1117; --bg2: #161B27; --bg3: #1E2535;
  --card-border: rgba(255,255,255,0.1);
  --text: #F0F2FF; --text2: #9BA3C8; --text3: #6B7399;
  --glass: rgba(30,37,53,0.85); --glass-light: rgba(255,255,255,0.07);
  --shadow: 0 8px 32px rgba(0,0,0,0.4); --radius: 16px; --radius-sm: 10px; --tr: 0.2s ease;
}
body { font-family:'Vazirmatn',sans-serif; background:var(--bg); color:var(--text); direction:rtl; min-height:100vh; overflow-x:hidden; }
body::before { content:''; position:fixed; inset:0; background: radial-gradient(ellipse 60% 50% at 10% 20%,rgba(91,110,245,.15) 0%,transparent 60%), radial-gradient(ellipse 50% 60% at 90% 80%,rgba(245,166,35,.08) 0%,transparent 60%); pointer-events:none; z-index:0; }
#app { min-height:100vh; position:relative; z-index:1; }
.app-layout { display:flex; min-height:100vh; }
.sidebar { width:240px; min-height:100vh; background:var(--glass); backdrop-filter:blur(20px); border-left:1px solid var(--card-border); display:flex; flex-direction:column; position:fixed; right:0; top:0; bottom:0; z-index:100; }
.sidebar-logo { padding:22px 20px; border-bottom:1px solid var(--card-border); }
.sidebar-logo h1 { font-size:16px; font-weight:700; color:var(--text); }
.sidebar-logo span { font-size:11px; color:var(--text3); }
.sidebar-nav { flex:1; padding:14px 12px; overflow-y:auto; }
.sidebar-nav ul { list-style:none; }
.sidebar-nav li { margin-bottom:3px; }
.sidebar-nav a,.sidebar-nav button { display:flex; align-items:center; gap:10px; padding:10px 14px; border-radius:var(--radius-sm); color:var(--text2); text-decoration:none; font-size:13px; font-weight:500; cursor:pointer; border:none; background:transparent; width:100%; font-family:'Vazirmatn',sans-serif; transition:all var(--tr); }
.sidebar-nav a:hover,.sidebar-nav button:hover { background:var(--glass-light); color:var(--text); }
.sidebar-nav a.active { background:linear-gradient(135deg,rgba(91,110,245,.2),rgba(91,110,245,.05)); color:var(--primary-light); border:1px solid rgba(91,110,245,.2); }
.nav-icon { width:20px; text-align:center; font-size:15px; }
.sidebar-user { padding:14px 18px; border-top:1px solid var(--card-border); display:flex; align-items:center; gap:10px; }
.user-avatar { width:34px; height:34px; border-radius:50%; background:linear-gradient(135deg,var(--primary),var(--primary-dark)); display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; color:white; flex-shrink:0; }
.user-name { font-size:13px; font-weight:600; }
.user-role { font-size:10px; color:var(--text3); }
.logout-btn { background:none; border:none; color:var(--text3); cursor:pointer; font-size:15px; padding:4px; transition:color var(--tr); margin-right:auto; }
.logout-btn:hover { color:var(--danger); }
.main-content { flex:1; margin-right:240px; min-height:100vh; }
.topbar { height:58px; background:var(--glass); backdrop-filter:blur(20px); border-bottom:1px solid var(--card-border); display:flex; align-items:center; padding:0 24px; position:sticky; top:0; z-index:50; }
.topbar-title { font-size:15px; font-weight:600; flex:1; }
.page-content { padding:22px 24px; }
.page-header { margin-bottom:20px; }
.page-header h2 { font-size:20px; font-weight:700; }
.page-header p { font-size:12px; color:var(--text3); margin-top:3px; }
.card { background:var(--glass-light); backdrop-filter:blur(16px); border:1px solid var(--card-border); border-radius:var(--radius); padding:18px; }
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:20px; }
.stat-card { background:var(--glass-light); backdrop-filter:blur(16px); border:1px solid var(--card-border); border-radius:var(--radius); padding:18px; transition:transform var(--tr); cursor:default; }
.stat-card:hover { transform:translateY(-2px); }
.stat-icon { font-size:22px; margin-bottom:10px; }
.stat-value { font-size:24px; font-weight:800; margin-bottom:2px; line-height:1; }
.stat-label { font-size:12px; color:var(--text3); }
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.table-container { background:var(--glass-light); border:1px solid var(--card-border); border-radius:var(--radius); overflow:hidden; }
.table-header { padding:14px 18px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--card-border); }
.table-title { font-size:14px; font-weight:600; }
table { width:100%; border-collapse:collapse; }
th { padding:10px 14px; text-align:right; font-size:11px; color:var(--text3); font-weight:600; border-bottom:1px solid var(--card-border); }
td { padding:12px 14px; font-size:13px; border-bottom:1px solid rgba(255,255,255,.04); }
tr:last-child td { border-bottom:none; }
tr:hover td { background:rgba(255,255,255,.02); }
.badge { display:inline-flex; align-items:center; gap:4px; padding:3px 10px; border-radius:20px; font-size:11px; font-weight:600; }
.badge-success { background:rgba(76,175,125,.15); color:var(--success); }
.badge-danger { background:rgba(245,101,101,.15); color:var(--danger); }
.badge-warning { background:rgba(245,166,35,.15); color:var(--warning); }
.badge-primary { background:rgba(91,110,245,.15); color:var(--primary-light); }
.btn { display:inline-flex; align-items:center; gap:7px; padding:9px 16px; border-radius:var(--radius-sm); font-size:13px; font-weight:600; cursor:pointer; border:none; font-family:'Vazirmatn',sans-serif; transition:all var(--tr); white-space:nowrap; }
.btn-primary { background:linear-gradient(135deg,var(--primary),var(--primary-dark)); color:white; }
.btn-primary:hover { box-shadow:0 4px 15px rgba(91,110,245,.4); transform:translateY(-1px); }
.btn-secondary { background:var(--glass-light); color:var(--text); border:1px solid var(--card-border); }
.btn-secondary:hover { background:rgba(255,255,255,.1); }
.btn-danger { background:rgba(245,101,101,.12); color:var(--danger); border:1px solid rgba(245,101,101,.2); }
.btn-danger:hover { background:rgba(245,101,101,.22); }
.btn-success { background:rgba(76,175,125,.12); color:var(--success); border:1px solid rgba(76,175,125,.2); }
.btn-sm { padding:5px 11px; font-size:12px; }
.form-group { margin-bottom:13px; }
label { display:block; font-size:12px; color:var(--text2); margin-bottom:5px; font-weight:500; }
input,select,textarea { width:100%; padding:10px 13px; background:rgba(255,255,255,.05); border:1px solid var(--card-border); border-radius:var(--radius-sm); color:var(--text); font-size:13px; font-family:'Vazirmatn',sans-serif; transition:border-color var(--tr); outline:none; }
input:focus,select:focus,textarea:focus { border-color:var(--primary); background:rgba(91,110,245,.05); }
input::placeholder { color:var(--text3); }
select option { background:var(--bg2); }
textarea { resize:vertical; min-height:70px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:13px; }
.form-row-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:13px; }
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.65); backdrop-filter:blur(8px); z-index:1000; display:flex; align-items:center; justify-content:center; padding:20px; opacity:0; visibility:hidden; transition:all var(--tr); }
.modal-overlay.active { opacity:1; visibility:visible; }
.modal { background:var(--bg2); border:1px solid var(--card-border); border-radius:20px; width:100%; max-width:580px; max-height:90vh; overflow-y:auto; box-shadow:0 25px 60px rgba(0,0,0,.5); transform:scale(.95); transition:transform var(--tr); }
.modal-overlay.active .modal { transform:scale(1); }
.modal-header { padding:17px 20px; border-bottom:1px solid var(--card-border); display:flex; align-items:center; justify-content:space-between; }
.modal-header h3 { font-size:16px; font-weight:700; }
.modal-body { padding:20px; }
.modal-footer { padding:14px 20px; border-top:1px solid var(--card-border); display:flex; gap:10px; justify-content:flex-end; }
.close-btn { background:none; border:none; color:var(--text3); font-size:20px; cursor:pointer; padding:4px 8px; border-radius:6px; transition:all var(--tr); }
.close-btn:hover { background:var(--glass-light); color:var(--text); }
.toolbar { display:flex; gap:10px; align-items:center; margin-bottom:14px; flex-wrap:wrap; }
.toolbar input[type=text] { flex:1; min-width:160px; }
.auth-page { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px; }
.auth-card { background:var(--glass); backdrop-filter:blur(20px); border:1px solid var(--card-border); border-radius:24px; padding:36px; width:100%; max-width:400px; box-shadow:var(--shadow); }
.auth-logo { text-align:center; margin-bottom:26px; }
.auth-logo-icon { font-size:44px; margin-bottom:8px; }
.auth-logo h1 { font-size:20px; font-weight:800; }
.auth-logo p { font-size:12px; color:var(--text3); margin-top:3px; }
.toast-container { position:fixed; bottom:22px; left:22px; z-index:9999; display:flex; flex-direction:column; gap:8px; }
.toast { background:var(--bg2); border:1px solid var(--card-border); border-radius:var(--radius-sm); padding:12px 15px; font-size:13px; min-width:230px; box-shadow:var(--shadow); display:flex; align-items:center; gap:8px; animation:slideIn .3s ease; }
.toast.success { border-color:rgba(76,175,125,.3); }
.toast.error { border-color:rgba(245,101,101,.3); }
@keyframes slideIn { from{transform:translateX(120%)} to{transform:translateX(0)} }
.loading { display:flex; align-items:center; justify-content:center; padding:60px; }
.spinner { width:34px; height:34px; border:3px solid var(--card-border); border-top-color:var(--primary); border-radius:50%; animation:spin .7s linear infinite; }
@keyframes spin { to{transform:rotate(360deg)} }
.empty-state { text-align:center; padding:50px 20px; }
.empty-icon { font-size:44px; margin-bottom:12px; opacity:.4; }
.empty-title { font-size:16px; font-weight:600; margin-bottom:5px; }
.empty-text { font-size:12px; color:var(--text3); }
.chart-wrap { height:150px; display:flex; align-items:flex-end; gap:5px; padding:8px 0 0; }
.chart-bar-g { flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; height:100%; justify-content:flex-end; }
.chart-bar { width:100%; border-radius:5px 5px 0 0; background:linear-gradient(180deg,var(--primary),rgba(91,110,245,.3)); min-height:3px; }
.chart-lbl { font-size:9px; color:var(--text3); text-align:center; }
.report-tabs { display:flex; gap:8px; margin-bottom:18px; }
.tab-btn { padding:7px 15px; border-radius:20px; border:1px solid var(--card-border); background:transparent; color:var(--text2); font-family:'Vazirmatn',sans-serif; font-size:13px; font-weight:500; cursor:pointer; transition:all var(--tr); }
.tab-btn.active { background:linear-gradient(135deg,var(--primary),var(--primary-dark)); color:white; border-color:transparent; }
.tab-btn:hover:not(.active) { background:var(--glass-light); color:var(--text); }
::-webkit-scrollbar { width:5px; }
::-webkit-scrollbar-thumb { background:var(--card-border); border-radius:3px; }
.divider { border:none; border-top:1px solid var(--card-border); margin:14px 0; }
.text-success { color:var(--success); } .text-danger { color:var(--danger); } .text-warning { color:var(--warning); } .text-muted { color:var(--text3); } .text-primary { color:var(--primary-light); }
.fw-bold { font-weight:700; }
.mt-1{margin-top:8px} .mt-2{margin-top:16px} .mt-3{margin-top:22px}
.mb-1{margin-bottom:8px} .mb-2{margin-bottom:16px} .mb-3{margin-bottom:22px}
.invoice-line { display:flex; align-items:center; gap:8px; background:rgba(255,255,255,.03); border:1px solid var(--card-border); border-radius:var(--radius-sm); padding:10px 12px; margin-bottom:8px; }
.remove-line { background:none; border:none; color:var(--danger); cursor:pointer; font-size:18px; padding:0 4px; margin-right:auto; }
.summary-row { display:flex; justify-content:space-between; align-items:center; padding:6px 0; font-size:13px; }
.summary-row.total { font-size:16px; font-weight:700; border-top:1px solid var(--card-border); padding-top:12px; margin-top:4px; }
@media print { .sidebar,.topbar,.toolbar,.btn,.modal-overlay { display:none!important; } .main-content { margin:0!important; } body { background:white; color:black; } }