@font-face {
    font-family: 'Vazirmatn';
    src: url('https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/fonts/webfonts/Vazirmatn-Regular.woff2') format('woff2');
}

:root {
    --app-font: 'Vazirmatn', sans-serif;
}

/* وقتی زبان انگلیسی است، فونت تغییر کند */
[lang="en"] {
    --app-font: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

body { 
    font-family: var(--app-font); 
    background-color: #f1f5f9; 
    color: #1e293b; 
    margin: 0; 
    height: 100vh; 
    overflow: hidden; 
}

/* اسکرول بار سفارشی */
.custom-scrollbar::-webkit-scrollbar { width: 4px; height: 4px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
.custom-scrollbar:hover::-webkit-scrollbar-thumb { background: #94a3b8; }

/* استایل‌های عمومی */
.input-field { width: 100%; padding: 0.5rem 0.75rem; border: 1px solid #cbd5e1; border-radius: 0.75rem; outline: none; transition: all 0.2s; font-size: 0.875rem; background: white; }
.input-field:focus { border-color: #0d9488; box-shadow: 0 0 0 2px #ccfbf1; }
.btn { display: flex; align-items: center; justify-content: center; padding: 0.5rem 1rem; border-radius: 0.75rem; font-weight: 700; font-size: 0.875rem; cursor: pointer; border: none; transition: transform 0.1s; }
.btn:active { transform: scale(0.95); }
.btn-primary { background-color: #0d9488; color: white; }
.btn-secondary { background-color: #e2e8f0; color: #334155; }
.btn-white { background-color: white; }

/* تب‌ها */
.nav-tabs { display: flex; justify-content: center; gap: 0.5rem; padding: 0.5rem; background: white; border-bottom: 1px solid #e2e8f0; overflow-x: auto; }
.tab-btn { padding: 0.5rem 1rem; border-radius: 0.75rem; color: #64748b; font-weight: 700; font-size: 0.875rem; border: none; background: transparent; cursor: pointer; white-space: nowrap; }
.tab-btn.active { background-color: #0f766e; color: white; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }

/* دیگر اجزا */
.status-badge { font-size: 10px; background-color: #ecfdf5; color: #059669; padding: 4px 8px; border-radius: 999px; border: 1px solid #a7f3d0; display: flex; align-items: center; gap: 4px; }
.modal-overlay { position: fixed; inset: 0; background-color: rgba(15, 23, 42, 0.9); backdrop-filter: blur(4px); z-index: 50; display: none; align-items: center; justify-content: center; padding: 1rem; }
.modal-content { background: white; width: 100%; border-radius: 1rem; overflow: hidden; display: flex; flex-direction: column; max-height: 90vh; }
.app-header { padding: 0.75rem 1rem; background: white; border-bottom: 1px solid #e2e8f0; display: flex; justify-content: space-between; align-items: center; }

#loading-screen { position: fixed; inset: 0; background: #0f172a; z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: center; color: white; }
.spinner { width: 40px; height: 40px; border: 4px solid #334155; border-top-color: #14b8a6; border-radius: 50%; animation: spin 1s linear infinite; margin-bottom: 1rem; }
@keyframes spin { 100% { transform: rotate(360deg); } }

.currency-toggle { display: flex; background: #f1f5f9; padding: 3px; border-radius: 8px; border: 1px solid #cbd5e1; height: 36px; }
.currency-btn { flex: 1; border: none; background: transparent; color: #64748b; font-size: 10px; font-weight: bold; border-radius: 6px; cursor: pointer; transition: all 0.2s; padding: 0 8px; }
.currency-btn.active { background: white; color: #0f766e; box-shadow: 0 1px 2px rgba(0,0,0,0.1); }
.currency-btn[data-val="rial"].active { color: #d97706; }

/* اصلاح جهت برای زبان انگلیسی */
[dir="ltr"] .input-field { text-align: left; }
[dir="ltr"] .pr-8 { padding-right: 2rem; padding-left: 0.75rem; }
[dir="ltr"] .pl-8 { padding-left: 2rem; padding-right: 0.75rem; }
[dir="ltr"] .border-r-4 { border-right-width: 0; border-left-width: 4px; }

@media print { 
    body { background: white; height: auto; overflow: visible; } 
    body * { visibility: hidden; } 
    #print-modal, #print-modal * { visibility: visible; } 
    #print-modal { position: absolute; inset: 0; background: white; display: block !important; }
    .no-print { display: none !important; }
    .modal-content { box-shadow: none; border: none; max-width: none; height: auto; overflow: visible; }
    #print-area { overflow: visible; padding: 0; }
}

.flex { display: flex !important; }
.hidden { display: none !important; }