/* =====================================================================
   إدارة بيانات العملاء — تصميم احترافي فاتح (RTL)
   الخط: Tajawal
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&display=swap');

:root{
  --bg:#f4f6fb;
  --surface:#ffffff;
  --surface-2:#f7f9fc;
  --text:#141a2e;
  --muted:#6b7280;
  --line:#e6eaf3;
  --primary:#4f46e5;
  --primary-2:#7c73f5;
  --primary-d:#3f37c9;
  --primary-soft:#eef0fe;
  --green:#0f9d6b; --green-soft:#e7f7f0;
  --red:#e5484d;   --red-soft:#fdeaea;
  --shadow-sm:0 1px 2px rgba(20,28,50,.05);
  --shadow:0 2px 6px rgba(20,28,50,.05), 0 10px 30px rgba(20,28,50,.07);
  --shadow-lg:0 18px 50px rgba(40,44,110,.18);
  --radius:18px; --radius-sm:11px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:'IBM Plex Sans Arabic','Segoe UI','Noto Sans Arabic',Tahoma,system-ui,sans-serif;
  background:
    radial-gradient(1100px 520px at 100% -8%, #e9ecff 0%, transparent 55%),
    radial-gradient(900px 500px at -8% 4%, #e6f2ff 0%, transparent 52%),
    var(--bg);
  color:var(--text); min-height:100vh; display:flex; flex-direction:column; line-height:1.65;
  letter-spacing:-.005em;
}
a{color:var(--primary); text-decoration:none; transition:color .15s}
a:hover{color:var(--primary-d)}

/* ---------- Top bar ---------- */
.topbar{
  position:sticky; top:0; z-index:30;
  display:flex; align-items:center; justify-content:space-between;
  padding:15px 30px; background:rgba(255,255,255,.82);
  border-bottom:1px solid var(--line); backdrop-filter:blur(12px) saturate(1.4);
}
.brand{display:flex; align-items:center; gap:12px; font-weight:800; font-size:1.18rem; color:var(--text); text-decoration:none}
.brand:hover{text-decoration:none}
.brand-logo{height:40px; width:auto; display:block; object-fit:contain}
.brand .logo{
  display:inline-grid; place-items:center; width:36px; height:36px; border-radius:11px;
  background:linear-gradient(135deg,var(--primary),var(--primary-2)); color:#fff; font-size:1.1rem;
  box-shadow:0 6px 16px rgba(79,70,229,.4);
}
.nav{display:flex; align-items:center; gap:20px}
.nav a{color:var(--muted); font-weight:700; font-size:.92rem}
.nav a:hover{color:var(--text)}
.nav .user{color:var(--text); font-size:.9rem; font-weight:700}

/* ---------- Layout ---------- */
.container{width:100%; max-width:1140px; margin:0 auto; padding:34px 26px; flex:1}
.footer{text-align:center; padding:24px; color:var(--muted); font-size:.85rem; border-top:1px solid var(--line)}

/* ---------- Sidebar (يسار) ---------- */
.sidebar{
  position:fixed; top:0; left:0; bottom:0; width:240px; z-index:40;
  background:#fff; border-right:1px solid var(--line);
  display:flex; flex-direction:column; padding:22px 16px; gap:6px;
  box-shadow:2px 0 18px rgba(20,28,50,.05);
}
.side-brand{display:block; text-align:center; padding:4px 8px 18px; border-bottom:1px solid var(--line); margin-bottom:12px}
.side-brand:hover{text-decoration:none}
.side-logo{height:46px; width:auto; max-width:180px; object-fit:contain; display:inline-block}
.side-nav{display:flex; flex-direction:column; gap:4px; flex:1}
.side-nav a{
  display:flex; align-items:center; gap:11px; padding:11px 14px; border-radius:11px;
  color:var(--text); font-weight:700; font-size:.95rem; transition:.14s;
}
.side-nav a:hover{background:var(--surface-2); text-decoration:none}
.side-nav a.active{background:var(--primary-soft); color:var(--primary-d)}
.side-nav .ic{width:20px; text-align:center; color:var(--primary); font-size:1rem}
.side-foot{border-top:1px solid var(--line); padding-top:14px; margin-top:8px}
.side-user{font-weight:700; font-size:.9rem; margin-bottom:8px; color:var(--text)}
.side-logout{display:block; text-align:center; padding:9px; border-radius:10px; border:1px solid var(--line); color:var(--text); font-weight:700}
.side-logout:hover{background:var(--surface-2); text-decoration:none; color:var(--text)}

body.has-side .main-wrap{margin-left:240px; min-height:100vh; display:flex; flex-direction:column}
body.no-side .main-wrap{min-height:100vh; display:flex; flex-direction:column}
.main-wrap .container{flex:1}

@media(max-width:800px){
  .sidebar{position:static; width:100%; flex-direction:row; flex-wrap:wrap; align-items:center;
    border-right:none; border-bottom:1px solid var(--line); padding:12px 14px}
  .side-brand{border-bottom:none; margin:0; padding:0 0 0 10px}
  .side-logo{height:34px}
  .side-nav{flex-direction:row; flex-wrap:wrap; flex:1; gap:2px}
  .side-nav a{padding:8px 12px}
  .side-foot{border-top:none; padding:0; margin:0 0 0 auto; display:flex; align-items:center; gap:10px}
  .side-user{margin:0}
  body.has-side .main-wrap{margin-left:0}
}

/* ---------- Cards ---------- */
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:28px; margin-bottom:24px; box-shadow:var(--shadow);
}
.card h2{font-size:1.25rem; font-weight:800; margin-bottom:6px; letter-spacing:-.02em}
.muted{color:var(--muted); font-size:.9rem}
.center{text-align:center}

/* ---------- Stats ---------- */
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:20px; margin-bottom:24px}
.stat-card{
  position:relative; overflow:hidden;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:26px 28px; box-shadow:var(--shadow); transition:transform .18s, box-shadow .18s;
}
.stat-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-lg)}
.stat-card::before{
  content:""; position:absolute; inset-inline-start:0; top:0; bottom:0; width:5px;
  background:linear-gradient(180deg,var(--primary),var(--primary-2));
}
.stat-card::after{
  content:""; position:absolute; inset-inline-end:-10px; bottom:-10px; width:96px; height:96px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234f46e5' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='6' rx='8' ry='3'/%3E%3Cpath d='M4 6v6c0 1.7 3.6 3 8 3s8-1.3 8-3V6'/%3E%3Cpath d='M4 12v6c0 1.7 3.6 3 8 3s8-1.3 8-3v-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-size:contain; opacity:.07;
}
.stat-num{font-size:2.6rem; font-weight:900; color:var(--text); letter-spacing:-.03em; line-height:1.05}
.stat-label{color:var(--muted); margin-top:6px; font-weight:700; font-size:.92rem}

/* ---------- Auth ---------- */
.auth-wrap{display:flex; justify-content:center; align-items:center; min-height:80vh}
.auth-card{
  background:var(--surface); border:1px solid var(--line); border-radius:22px;
  padding:40px 36px; width:100%; max-width:415px; box-shadow:var(--shadow-lg);
}
.auth-card h1{font-size:1.7rem; font-weight:800; margin-bottom:4px; letter-spacing:-.03em}
.auth-logo{display:block; height:56px; width:auto; max-width:200px; object-fit:contain; margin-bottom:20px}
form label{display:block; margin:16px 0 7px; font-size:.88rem; color:var(--text); font-weight:700}
input[type=text],input[type=email],input[type=password],textarea{
  width:100%; padding:13px 15px; border-radius:var(--radius-sm); border:1px solid var(--line);
  background:var(--surface-2); color:var(--text); font-family:inherit; font-size:.95rem; transition:.15s;
}
textarea{resize:vertical; min-height:130px; line-height:1.8}
input::placeholder,textarea::placeholder{color:#a7adc0}
input:focus,textarea:focus{outline:none; border-color:var(--primary); background:#fff; box-shadow:0 0 0 4px var(--primary-soft)}

/* ---------- Buttons ---------- */
button,.btn-primary,.btn-sm,.btn-ghost{font-family:inherit; cursor:pointer}
.btn-primary{
  width:100%; margin-top:24px; padding:14px; border:none; border-radius:var(--radius-sm);
  background:linear-gradient(135deg,var(--primary),var(--primary-2)); color:#fff; font-weight:800; font-size:1rem;
  box-shadow:0 10px 24px rgba(79,70,229,.3); transition:.16s;
}
.btn-primary:hover{filter:brightness(1.07); transform:translateY(-1px); box-shadow:0 14px 30px rgba(79,70,229,.38)}
.btn-primary:disabled{opacity:.55; cursor:not-allowed; box-shadow:none; transform:none}
.btn-sm{
  display:inline-block; padding:8px 15px; border-radius:9px; background:var(--primary);
  color:#fff; font-size:.83rem; font-weight:700; border:none; transition:.15s;
}
.btn-sm:hover{background:var(--primary-d); color:#fff}
.btn-ghost{background:#fff; border:1px solid var(--line); color:var(--text)}
.btn-ghost:hover{background:var(--surface-2); border-color:#cdd4e6; color:var(--text)}

/* ---------- Flash ---------- */
.flash{padding:14px 17px; border-radius:var(--radius-sm); font-size:.92rem; margin-bottom:14px; border:1px solid transparent; font-weight:700}
.flash-success{background:var(--green-soft); border-color:#bfe9d7; color:#0a7d55}
.flash-error{background:var(--red-soft); border-color:#f6c9cb; color:#c0343a}
.flash-info{background:var(--primary-soft); border-color:#d5d8fb; color:var(--primary-d)}

/* ---------- Dropzone ---------- */
.dropzone{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:11px; padding:42px; border:2px dashed #ccd4e8; border-radius:var(--radius);
  background:var(--surface-2); cursor:pointer; transition:.16s; text-align:center; margin-top:16px;
}
.dropzone:hover,.dropzone.drag{border-color:var(--primary); background:var(--primary-soft)}
.dz-icon{
  display:grid; place-items:center; width:52px; height:52px; border-radius:50%;
  background:#fff; color:var(--primary); font-size:1.6rem; box-shadow:var(--shadow);
}
.dz-text{color:var(--muted); font-weight:700}
.file-list{display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; justify-content:center}
.file-chip{background:#fff; border:1px solid var(--line); padding:6px 14px; border-radius:20px; font-size:.82rem; font-weight:700; box-shadow:var(--shadow-sm)}

/* ---------- Tables ---------- */
.table-wrap{overflow-x:auto; margin-top:18px; border:1px solid var(--line); border-radius:var(--radius-sm); background:#fff}
.data-table{width:100%; border-collapse:collapse; font-size:.9rem; white-space:nowrap}
.data-table th,.data-table td{padding:14px 17px; text-align:right; border-bottom:1px solid var(--line)}
.data-table thead th{background:var(--surface-2); color:var(--muted); font-weight:800; position:sticky; top:0; font-size:.82rem}
.data-table tbody tr:last-child td{border-bottom:none}
.data-table tbody tr{transition:background .12s}
.data-table tbody tr:hover{background:var(--primary-soft)}
.badge{background:var(--primary-soft); border:1px solid #dcdffb; color:var(--primary-d); padding:3px 12px; border-radius:20px; font-size:.76rem; font-weight:800}
.pill{display:inline-block; padding:4px 12px; border-radius:20px; font-size:.78rem; font-weight:800; white-space:nowrap}
.pill-green{background:var(--green-soft); color:#0a7d55; border:1px solid #bfe9d7}
.pill-amber{background:#fdf3e3; color:var(--amber); border:1px solid #f2d9ad}
.page-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:22px; flex-wrap:wrap; gap:12px}
.page-head h1{font-size:1.7rem; font-weight:800; letter-spacing:-.02em}
.filters{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:8px}
.filters input[type=text]{max-width:340px}
select{padding:12px 14px; border-radius:var(--radius-sm); border:1px solid var(--line); background:var(--surface-2); color:var(--text); font-family:inherit; font-size:.92rem; cursor:pointer}
select:focus{outline:none; border-color:var(--primary); box-shadow:0 0 0 4px var(--primary-soft)}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:2px 18px; margin-bottom:4px}
@media(max-width:640px){.form-grid{grid-template-columns:1fr}}
.actions{display:flex; gap:6px; flex-wrap:wrap}

/* ---------- Misc ---------- */
.empty{padding:44px; text-align:center; color:var(--muted); font-weight:600}
.crumbs{display:flex; gap:8px; align-items:center; margin-bottom:18px; color:var(--muted); font-size:.9rem; font-weight:700}
.crumbs a{color:var(--primary)}
.ds-head{display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:12px}
.ds-actions{display:flex; gap:8px}
.search-bar{display:flex; gap:8px; margin:18px 0; align-items:center}
.search-bar input{max-width:360px}
.pager{display:flex; gap:14px; align-items:center; justify-content:center; margin-top:18px}

@media(max-width:640px){
  .topbar{flex-direction:column; gap:10px; padding:14px}
  .container{padding:20px 14px}
  .stat-num{font-size:2.1rem}
}

/* ---------- إضافات: المنطقة، أقسام النموذج، ترقيم الصفحات ---------- */
.pill-soft{background:var(--primary-soft); color:var(--primary-d); border:1px solid #dcdffb}
.pill-wa{background:#e8f8f0; color:#0a7d55; border:1px solid #bfe9d7}
.pill-wa:hover{background:#d7f3e6; text-decoration:none}
.form-section{margin:22px 0 8px; font-size:.98rem; font-weight:800; color:var(--primary-d);
  border-right:3px solid var(--primary); padding-right:10px}
.pager{justify-content:space-between; flex-wrap:wrap}
.pages{display:flex; gap:6px; align-items:center; flex-wrap:wrap}
.pages a,.pages .cur,.pages .gap{min-width:38px; height:38px; display:inline-flex; align-items:center;
  justify-content:center; padding:0 10px; border-radius:10px; font-weight:700; font-size:.9rem}
.pages a{background:var(--surface-2); color:var(--text); border:1px solid var(--line); transition:.14s}
.pages a:hover{background:var(--primary-soft); color:var(--primary-d); border-color:var(--primary); text-decoration:none}
.pages .cur{background:var(--primary); color:#fff; border:1px solid var(--primary)}
.pages .gap{color:var(--muted)}
@media(max-width:640px){.pager{justify-content:center}}

/* ---------- لوحة العملاء المتقدمة ---------- */
.toolbar{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.filters-row{display:flex; gap:10px; align-items:center; flex-wrap:wrap; width:100%; margin-bottom:10px}
.filters-row input[type=text]{flex:1; min-width:240px; max-width:520px}
.filters .lbl{color:var(--muted); font-size:.86rem; font-weight:700}
input[type=date]{padding:11px 12px; border-radius:var(--radius-sm); border:1px solid var(--line);
  background:var(--surface-2); font-family:inherit; font-size:.9rem; color:var(--text)}
input[type=date]:focus{outline:none; border-color:var(--primary); box-shadow:0 0 0 4px var(--primary-soft)}

/* جدول بهيدر ثابت وترتيب بالأعمدة */
.table-wrap{max-height:68vh; overflow:auto; border:1px solid var(--line); border-radius:12px}
.data-table thead th{position:sticky; top:0; background:var(--surface-2); z-index:2;
  box-shadow:0 1px 0 var(--line)}
.data-table th a{color:inherit; display:inline-flex; gap:4px; align-items:center; white-space:nowrap}
.data-table th a:hover{color:var(--primary-d); text-decoration:none}
.data-table th .arr{font-size:.68rem; color:var(--primary)}
.data-table input[type=checkbox]{width:16px; height:16px; accent-color:var(--primary); cursor:pointer}

/* شريط الإجراءات الجماعية */
.bulk-bar{display:none; align-items:center; gap:14px; background:var(--red-soft);
  border:1px solid #f3c2c4; color:#b3262b; border-radius:12px; padding:10px 16px;
  margin:0 0 12px; font-weight:700}
.bulk-bar.on{display:flex}
.btn-danger{background:var(--red); color:#fff; border:none; border-radius:10px; padding:9px 18px;
  font-weight:800; cursor:pointer; font-family:inherit; font-size:.88rem; transition:.14s}
.btn-danger:hover{filter:brightness(.93)}

/* لينك الواتساب في الجدول */
.wa{margin-inline-start:6px; text-decoration:none; font-size:.95rem}
.wa:hover{transform:scale(1.15); display:inline-block}

/* ---------- أيقونات Lucide ---------- */
.lic{width:17px; height:17px; vertical-align:-3px; display:inline-block}
h1 .lic,h2 .lic{width:22px; height:22px; vertical-align:-4px; color:var(--primary)}
h3 .lic{width:19px; height:19px; vertical-align:-4px; color:var(--primary)}
.side-nav .lic{width:19px; height:19px; color:var(--primary)}
.btn-sm .lic,.btn-primary .lic{width:15px; height:15px; vertical-align:-2px}
.side-logout .lic,.side-user .lic{width:15px; height:15px; vertical-align:-2px}

/* ---------- كروت الإحصائيات بأيقونات ---------- */
.stat-ic{width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  background:var(--primary-soft); color:var(--primary); margin-bottom:10px}
.stat-ic .lic{width:21px; height:21px}
.stat-ic.sc-green{background:var(--green-soft); color:var(--green)}
.stat-ic.sc-amber{background:#fdf3e3; color:#b45309}
.stat-ic.sc-red{background:var(--red-soft); color:var(--red)}
.pill-red{background:var(--red-soft); color:#b3262b; border:1px solid #f3c2c4}

/* ---------- لوحة اختيار الأعمدة ---------- */
.cols-panel{display:none; background:var(--surface-2); border:1px solid var(--line); border-radius:12px;
  padding:14px 16px; margin-bottom:12px}
.cols-panel.on{display:block}
.cols-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:8px 14px; margin-bottom:8px}
.col-opt{display:flex; gap:7px; align-items:center; font-size:.88rem; font-weight:600; cursor:pointer}
.col-opt input{accent-color:var(--primary); width:15px; height:15px}
.col-hide{display:none !important}

/* ---------- اختيار الحالة (راديو أنيق) ---------- */
.status-picker{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:6px}
.status-picker .st{cursor:pointer}
.status-picker input{display:none}
.status-picker .st span{display:inline-block; padding:9px 22px; border-radius:12px; font-weight:800; font-size:.92rem;
  border:2px solid var(--line); background:var(--surface-2); color:var(--muted); transition:.15s}
.status-picker .st-open   input:checked + span{background:#fdf3e3; border-color:#e5a94d; color:#b45309}
.status-picker .st-done   input:checked + span{background:var(--green-soft); border-color:var(--green); color:#0a7d55}
.status-picker .st-rejected input:checked + span{background:var(--red-soft); border-color:var(--red); color:#b3262b}

/* ---------- شريط تقدم الاستيراد ---------- */
.progress{height:14px; background:var(--surface-2); border:1px solid var(--line); border-radius:20px; overflow:hidden}
.progress-bar{height:100%; width:0; border-radius:20px; transition:width .3s;
  background:linear-gradient(90deg,var(--primary),var(--primary-2))}

/* ---------- شبكة الرسوم البيانية ---------- */
.charts-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:18px}
.chart-card h3{margin-bottom:12px}
.chart-wide{grid-column:1 / -1}
.chart-box{position:relative}
.chart-line svg{width:100%; height:300px}
@media(max-width:900px){.charts-grid{grid-template-columns:1fr}}

/* دونات */
.dn-wrap{display:flex; align-items:center; gap:20px; flex-wrap:wrap}
.dn-svg{width:210px; height:210px; flex:0 0 auto}
.dn-total{font-size:1.5rem; font-weight:800; fill:var(--text); font-family:inherit}
.dn-sub{font-size:.72rem; fill:var(--muted); font-family:inherit}
.dn-legend{flex:1; min-width:170px; display:flex; flex-direction:column; gap:7px; max-height:230px; overflow:auto}
.dn-item{display:flex; align-items:center; gap:8px; font-size:.88rem; font-weight:600}
.dn-dot{width:11px; height:11px; border-radius:4px; flex:0 0 auto}
.dn-lbl{flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.dn-val{color:var(--muted); font-size:.8rem; white-space:nowrap}

/* أعمدة أفقية */
.hb-wrap{display:flex; flex-direction:column; gap:9px}
.hb-row{display:flex; align-items:center; gap:10px}
.hb-lbl{flex:0 0 128px; font-size:.86rem; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.hb-track{flex:1; height:16px; background:var(--surface-2); border-radius:9px; overflow:hidden}
.hb-fill{display:block; height:100%; border-radius:9px; transition:width .5s ease; opacity:.85}
.hb-val{flex:0 0 58px; text-align:left; font-size:.82rem; color:var(--muted); font-weight:700}

/* الخط الزمني */
.ln-svg{width:100%; height:300px}
.ln-tick{font-size:11px; fill:var(--muted); font-family:inherit}

/* ---------- كروت التحليل الذكي ---------- */
.insight-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:14px; margin:10px 0}
.insight{display:flex; gap:12px; background:var(--surface-2); border:1px solid var(--line);
  border-radius:14px; padding:14px 16px; line-height:1.75; font-size:.93rem}
.in-ic{flex:0 0 38px; width:38px; height:38px; border-radius:11px; display:flex; align-items:center; justify-content:center;
  background:var(--primary-soft); color:var(--primary)}
.in-ic .lic{width:19px; height:19px}
.in-ic.sc-green{background:var(--green-soft); color:var(--green)}
.in-ic.sc-red{background:var(--red-soft); color:var(--red)}
.in-ic.sc-amber{background:#fdf3e3; color:#b45309}
.in-action{margin-top:6px; color:var(--primary-d); font-weight:700; font-size:.88rem}
.ai-summary{background:linear-gradient(135deg,var(--primary-soft),#f4f0ff); border:1px solid #dcdffb;
  border-radius:14px; padding:16px 18px; font-weight:600; line-height:1.9}

/* ---------- جودة الداتا ---------- */
.quality-row{display:flex; gap:16px; flex-wrap:wrap; margin:12px 0}
.q-item{background:var(--surface-2); border:1px solid var(--line); border-radius:12px; padding:12px 18px; min-width:160px}
.q-item b{display:block; font-size:1.3rem; color:var(--primary-d)}
.q-item span{color:var(--muted); font-size:.85rem}