/* ========================================================
   نظام المبيعات - التصميم العام
======================================================== */
:root{
    --primary: #4f46e5;
    --primary-dark: #3730a3;
    --primary-light: #eef2ff;
    --accent: #06b6d4;
    --success: #16a34a;
    --success-light: #ecfdf5;
    --danger: #dc2626;
    --danger-light: #fef2f2;
    --warning: #d97706;
    --warning-light: #fffbeb;
    --dark: #1e1b3a;
    --gray-50:#f8fafc;
    --gray-100:#f1f5f9;
    --gray-200:#e2e8f0;
    --gray-300:#cbd5e1;
    --gray-500:#64748b;
    --gray-700:#334155;
    --radius: 14px;
    --shadow-sm: 0 1px 3px rgba(30,27,58,.06), 0 1px 2px rgba(30,27,58,.08);
    --shadow-md: 0 8px 24px rgba(30,27,58,.08);
    --shadow-lg: 0 16px 40px rgba(30,27,58,.12);
    --sidebar-w: 260px;
}

*{ box-sizing:border-box; margin:0; padding:0; }

body{
    font-family:'Cairo', sans-serif;
    background: var(--gray-50);
    color: var(--dark);
    -webkit-font-smoothing:antialiased;
}

a{ text-decoration:none; color:inherit; }
ul{ list-style:none; }
button{ font-family:inherit; cursor:pointer; }
input, select, textarea{ font-family:inherit; }

/* ===================== تسجيل الدخول ===================== */
.login-body{
    min-height:100vh;
    display:flex; align-items:center; justify-content:center;
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #06b6d4 100%);
    padding:20px;
}
.login-wrapper{ width:100%; max-width:420px; }
.login-card{
    background:#fff;
    border-radius:20px;
    padding:40px 32px;
    box-shadow: var(--shadow-lg);
}
.login-brand{ text-align:center; margin-bottom:28px; }
.login-logo{
    width:64px; height:64px; border-radius:16px;
    background:linear-gradient(135deg, var(--primary), var(--accent));
    color:#fff; font-size:26px;
    display:flex; align-items:center; justify-content:center;
    margin:0 auto 14px;
    box-shadow: 0 8px 20px rgba(79,70,229,.35);
}
.login-brand h1{ font-size:22px; font-weight:800; color:var(--dark); }
.login-brand p{ font-size:13.5px; color:var(--gray-500); margin-top:4px; }
.login-form .form-group{ margin-bottom:18px; }
.login-form label{ display:block; font-size:13.5px; font-weight:600; margin-bottom:7px; color:var(--gray-700); }
.input-icon{ position:relative; }
.input-icon i{ position:absolute; right:14px; top:50%; transform:translateY(-50%); color:var(--gray-300); font-size:14px; }
.input-icon input{
    width:100%; padding:12px 42px 12px 14px;
    border:1.5px solid var(--gray-200); border-radius:10px;
    font-size:14.5px; transition:.2s;
    background:var(--gray-50);
}
.input-icon input:focus{ outline:none; border-color:var(--primary); background:#fff; box-shadow:0 0 0 3px var(--primary-light); }
.btn-block{ width:100%; }
.login-hint{ margin-top:20px; text-align:center; font-size:12.5px; color:var(--gray-500); background:var(--gray-50); padding:10px; border-radius:8px; }

/* ===================== الأزرار ===================== */
.btn{
    display:inline-flex; align-items:center; gap:8px;
    padding:11px 20px; border:none; border-radius:10px;
    font-size:14px; font-weight:600; transition:.15s;
}
.btn-primary{ background:linear-gradient(135deg, var(--primary), #6d28d9); color:#fff; box-shadow:0 4px 14px rgba(79,70,229,.3); }
.btn-primary:hover{ transform:translateY(-1px); box-shadow:0 6px 18px rgba(79,70,229,.4); }
.btn-success{ background:linear-gradient(135deg,#16a34a,#059669); color:#fff; }
.btn-danger{ background:var(--danger-light); color:var(--danger); }
.btn-danger:hover{ background:var(--danger); color:#fff; }
.btn-outline{ background:#fff; border:1.5px solid var(--gray-200); color:var(--gray-700); }
.btn-outline:hover{ border-color:var(--primary); color:var(--primary); }
.btn-sm{ padding:7px 12px; font-size:12.5px; border-radius:8px; }
.btn-icon{ padding:9px; border-radius:8px; }

/* ===================== الهيكل العام ===================== */
.app-shell{ display:flex; min-height:100vh; }

.sidebar{
    width:var(--sidebar-w); flex-shrink:0;
    background: linear-gradient(180deg, #1e1b3a 0%, #2d2a5a 100%);
    color:#fff; position:fixed; top:0; right:0; bottom:0;
    display:flex; flex-direction:column;
    z-index:100; transition:transform .25s ease;
}
.sidebar-brand{
    display:flex; align-items:center; gap:12px;
    padding:22px 20px; font-weight:800; font-size:16px;
    border-bottom:1px solid rgba(255,255,255,.08);
}
.brand-icon{
    width:38px; height:38px; border-radius:10px;
    background:linear-gradient(135deg, var(--primary), var(--accent));
    display:flex; align-items:center; justify-content:center; font-size:16px;
}
.sidebar-nav{ padding:16px 12px; flex:1; overflow-y:auto; }
.nav-item{
    display:flex; align-items:center; gap:12px;
    padding:12px 14px; border-radius:10px; margin-bottom:4px;
    color:rgba(255,255,255,.7); font-size:14.5px; font-weight:500;
    transition:.15s;
}
.nav-item i{ width:18px; text-align:center; font-size:15px; }
.nav-item:hover{ background:rgba(255,255,255,.08); color:#fff; }
.nav-item.active{ background:linear-gradient(135deg, var(--primary), #6d28d9); color:#fff; box-shadow:0 4px 14px rgba(79,70,229,.35); }
.sidebar-footer{ padding:14px 12px; border-top:1px solid rgba(255,255,255,.08); }
.nav-item.logout:hover{ background:rgba(220,38,38,.2); color:#fca5a5; }

.sidebar-overlay{
    display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:99;
}

.main-content{ flex:1; margin-right:var(--sidebar-w); display:flex; flex-direction:column; min-width:0; }

.topbar{
    display:flex; align-items:center; gap:14px;
    background:#fff; padding:16px 26px;
    border-bottom:1px solid var(--gray-200);
    position:sticky; top:0; z-index:50;
}
.hamburger{ display:none; background:none; border:none; font-size:20px; color:var(--gray-700); }
.page-title{ font-size:19px; font-weight:800; flex:1; }
.topbar-user{ display:flex; align-items:center; gap:10px; }
.user-avatar{
    width:38px; height:38px; border-radius:50%;
    background:linear-gradient(135deg, var(--primary), var(--accent));
    color:#fff; display:flex; align-items:center; justify-content:center;
    font-weight:700; font-size:15px;
}
.user-info{ display:flex; flex-direction:column; line-height:1.3; }
.user-name{ font-size:13.5px; font-weight:700; }
.user-role{ font-size:11.5px; color:var(--gray-500); }

.page-content{ padding:24px; max-width:1400px; width:100%; margin:0 auto; }

/* ===================== البطاقات ===================== */
.card{
    background:#fff; border-radius:var(--radius);
    box-shadow: var(--shadow-sm); padding:22px;
    margin-bottom:20px; border:1px solid var(--gray-100);
}
.card-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; flex-wrap:wrap; gap:10px; }
.card-header h3{ font-size:16px; font-weight:800; }

/* شبكة إحصائيات */
.stats-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:16px; margin-bottom:20px; }
.stat-card{
    background:#fff; border-radius:var(--radius); padding:20px;
    box-shadow:var(--shadow-sm); border:1px solid var(--gray-100);
    display:flex; align-items:center; gap:16px;
}
.stat-icon{
    width:52px; height:52px; border-radius:14px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center; font-size:20px; color:#fff;
}
.stat-icon.blue{ background:linear-gradient(135deg,#4f46e5,#6d28d9); }
.stat-icon.green{ background:linear-gradient(135deg,#16a34a,#059669); }
.stat-icon.orange{ background:linear-gradient(135deg,#f59e0b,#d97706); }
.stat-icon.cyan{ background:linear-gradient(135deg,#06b6d4,#0891b2); }
.stat-info .stat-value{ font-size:20px; font-weight:800; }
.stat-info .stat-label{ font-size:12.5px; color:var(--gray-500); margin-top:2px; }

/* ===================== النماذج ===================== */
.form-row{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:16px; }
.form-group{ margin-bottom:16px; }
.form-group label{ display:block; font-size:13.5px; font-weight:700; margin-bottom:7px; color:var(--gray-700); }
.form-control{
    width:100%; padding:11px 14px; border:1.5px solid var(--gray-200);
    border-radius:10px; font-size:14px; background:var(--gray-50); transition:.15s;
}
.form-control:focus{ outline:none; border-color:var(--primary); background:#fff; box-shadow:0 0 0 3px var(--primary-light); }
.form-hint{ font-size:12px; color:var(--gray-500); margin-top:5px; }
textarea.form-control{ resize:vertical; min-height:80px; }

/* ===================== الجداول ===================== */
.table-wrap{ overflow-x:auto; }
table{ width:100%; border-collapse:collapse; font-size:13.5px; }
thead th{
    background:var(--gray-50); color:var(--gray-700); font-weight:700;
    text-align:right; padding:12px 14px; white-space:nowrap; border-bottom:2px solid var(--gray-200);
}
tbody td{ padding:12px 14px; border-bottom:1px solid var(--gray-100); white-space:nowrap; }
tbody tr:hover{ background:var(--gray-50); }
.text-muted{ color:var(--gray-500); }
.badge{ display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:20px; font-size:11.5px; font-weight:700; }
.badge-success{ background:var(--success-light); color:var(--success); }
.badge-danger{ background:var(--danger-light); color:var(--danger); }
.badge-warning{ background:var(--warning-light); color:var(--warning); }
.badge-info{ background:var(--primary-light); color:var(--primary); }
.actions-cell{ display:flex; gap:6px; }

/* ===================== التنبيهات ===================== */
.alert{ display:flex; align-items:center; gap:10px; padding:13px 16px; border-radius:10px; font-size:13.5px; font-weight:600; margin-bottom:18px; }
.alert-success{ background:var(--success-light); color:var(--success); }
.alert-danger{ background:var(--danger-light); color:var(--danger); }
.alert-warning{ background:var(--warning-light); color:var(--warning); }

/* ===================== فاتورة - جدول البنود ===================== */
.invoice-items-table input{
    width:100%; padding:8px 10px; border:1.5px solid var(--gray-200); border-radius:8px; font-size:13.5px; background:#fff;
}
.invoice-items-table input:focus{ outline:none; border-color:var(--primary); }
.invoice-items-table .price-usd-input,
.invoice-items-table .price-iqd-input{
    min-width:150px; padding:12px 10px; font-size:16px; font-weight:700; text-align:center;
}
@media (max-width: 640px){
    .invoice-items-table .price-usd-input,
    .invoice-items-table .price-iqd-input{ min-width:140px; font-size:16px; padding:13px 8px; }
    .invoice-items-table .qty-input{ min-width:46px; }
}
.qty-control{ display:flex; align-items:center; gap:6px; }
.qty-btn{
    width:28px; height:28px; border-radius:7px; border:1.5px solid var(--gray-200);
    background:#fff; display:flex; align-items:center; justify-content:center; font-size:13px; color:var(--gray-700);
}
.qty-btn:hover{ background:var(--primary-light); border-color:var(--primary); color:var(--primary); }
.qty-control input{ width:52px; text-align:center; }
.remove-row-btn{ color:var(--danger); background:var(--danger-light); border:none; width:30px; height:30px; border-radius:8px; }

.invoice-summary{
    background:var(--primary-light); border-radius:var(--radius); padding:18px 22px;
    display:flex; flex-wrap:wrap; gap:24px; justify-content:flex-end; margin-top:14px;
}
.summary-item{ text-align:left; }
.summary-item .label{ font-size:12.5px; color:var(--gray-500); font-weight:600; }
.summary-item .value{ font-size:22px; font-weight:800; color:var(--primary); }

/* ===================== طباعة الفاتورة ===================== */
.invoice-print{ max-width:800px; margin:0 auto; background:#fff; padding:30px; }
.invoice-print-header{ display:flex; justify-content:space-between; align-items:flex-start; border-bottom:2px solid var(--dark); padding-bottom:16px; margin-bottom:16px; }

/* ===================== شبكة عامة ===================== */
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.mt-2{ margin-top:16px; } .mb-2{ margin-bottom:16px; }

/* ===================== استجابة الشاشات ===================== */
@media (max-width: 992px){
    .sidebar{ transform:translateX(100%); box-shadow: -10px 0 30px rgba(0,0,0,.2); }
    .sidebar.open{ transform:translateX(0); }
    .sidebar-overlay.show{ display:block; }
    .main-content{ margin-right:0; }
    .hamburger{ display:flex; align-items:center; justify-content:center; }
    .grid-2{ grid-template-columns:1fr; }
}
@media (max-width: 640px){
    .page-content{ padding:14px; }
    .topbar{ padding:12px 16px; }
    .page-title{ font-size:16px; }
    .card{ padding:16px; border-radius:12px; }
    .user-info{ display:none; }
    .login-card{ padding:28px 20px; }
    .stat-card{ padding:16px; }
    .invoice-summary{ justify-content:center; }
    thead th, tbody td{ padding:10px 8px; font-size:12.5px; }
}