/* Gulf Fashion — لوحة أداء البائعين والمعارض
   ثيم داكن مطابق للنموذج المرفق من المستخدم (بطاقات داكنة، تدرجات بنفسجي/تركواز،
   شارات ذهبي/فضي/برونزي). كل الأرقام هنا حقيقية من أوشن + إعدادات الأهداف
   المحلية — راجع app.py وREADME لمعرفة أي افتراض قابل للتعديل لاحقًا. */

:root{
  --bg-0:#0a0e1a;
  --bg-1:#0e1424;
  --card:#141a30;
  --card-2:#171e38;
  --border:#242c4a;
  --text:#eef1fb;
  --text-dim:#8d96b8;
  --text-mute:#5f6890;
  --accent-a:#7c5cff;
  --accent-b:#22d3b6;
  --gold:#f5b942;
  --gold-dim:#8a6a2a;
  --silver:#c7ccd6;
  --bronze:#d98c4a;
  --danger:#ef5a6f;
  --good:#22d3b6;
  --radius:16px;
}

*{box-sizing:border-box}
/* ملاحظة إصلاح 2026-09-08: كان body{height:100%} يُثبِّت ارتفاع الخلفية على
   ارتفاع الشاشة فقط، فتتكرر (background-repeat الافتراضي) بقعة التوهج
   البنفسجي بأسفل الصفحة عند المحتوى الطويل (شهري بجدول صدارة/بوب-أب طويل) —
   الحل: يمتد body بارتفاع محتواه الفعلي (min-height) بدل تثبيته، مع منع أي
   تكرار للتدرّج صراحةً. */
html{height:100%}
body{
  margin:0;
  min-height:100%;
  font-family:-apple-system,'Segoe UI',Tahoma,Arial,sans-serif;
  background:radial-gradient(1200px 800px at 15% -10%, #1a2140 0%, var(--bg-0) 55%), var(--bg-0);
  background-repeat:no-repeat;
  background-attachment:fixed;
  color:var(--text);
  direction:rtl;
}

/* ---------- شاشة الدخول ---------- */
body.login-body{
  display:flex; align-items:center; justify-content:center; min-height:100vh;
}
.login-card{
  background:var(--card); border:1px solid var(--border); border-radius:20px;
  padding:36px 32px; width:100%; max-width:360px; text-align:center;
  box-shadow:0 20px 60px rgba(0,0,0,.45);
}
.login-logo{font-size:38px; margin-bottom:6px}
.login-card h1{margin:0; font-size:20px; letter-spacing:1px; color:var(--text)}
.login-card .subtitle{color:var(--text-dim); font-size:13px; margin:4px 0 22px}
.login-card label{display:block; text-align:right; font-size:12.5px; color:var(--text-dim); margin:12px 0 6px}
.login-card input{
  width:100%; padding:11px 12px; border-radius:10px; border:1px solid var(--border);
  background:var(--bg-1); color:var(--text); font-size:14px;
}
.login-card button{
  width:100%; margin-top:20px; padding:12px; border:0; border-radius:10px;
  background:linear-gradient(135deg,var(--accent-a),var(--accent-b));
  color:#0a0e1a; font-weight:800; font-size:14.5px; cursor:pointer;
}
.error-box{
  background:rgba(239,90,111,.12); color:#ff8c9b; border:1px solid rgba(239,90,111,.35);
  border-radius:10px; padding:9px 12px; font-size:12.5px; margin-bottom:6px;
}

/* ---------- الشاشة الرئيسية ---------- */
.topbar{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px;
  padding:14px 20px; border-bottom:1px solid var(--border);
  background:linear-gradient(180deg, rgba(124,92,255,.08), transparent);
}
.topbar .brand{display:flex; align-items:center; gap:10px}
.topbar .brand .mark{
  width:34px; height:34px; border-radius:10px;
  background:linear-gradient(135deg,var(--accent-a),var(--accent-b));
  display:flex; align-items:center; justify-content:center; font-size:17px;
}
.topbar h1{font-size:16px; margin:0}
.topbar .meta{font-size:11.5px; color:var(--text-mute)}
.topbar .right{display:flex; align-items:center; gap:10px; flex-wrap:wrap}

.select-pill, select.select-pill{
  background:var(--card-2); color:var(--text); border:1px solid var(--border);
  border-radius:10px; padding:8px 12px; font-size:12.5px; cursor:pointer;
}
.period-toggle{display:flex; background:var(--card-2); border:1px solid var(--border); border-radius:10px; overflow:hidden}
.period-toggle button{
  border:0; background:transparent; color:var(--text-dim); padding:8px 16px; font-size:12.5px; cursor:pointer;
}
.period-toggle button.active{background:linear-gradient(135deg,var(--accent-a),var(--accent-b)); color:#0a0e1a; font-weight:800}

.icon-btn{
  background:var(--card-2); border:1px solid var(--border); color:var(--text-dim);
  border-radius:10px; padding:8px 12px; font-size:12.5px; text-decoration:none; cursor:pointer;
}
.icon-btn:hover{color:var(--text)}
.user-badge{font-size:11.5px; color:var(--text-mute)}

.wrap{max-width:1180px; margin:0 auto; padding:18px 20px 40px}
.status-line{font-size:12.5px; color:var(--text-dim); margin-bottom:12px}
.status-line.err{color:var(--danger)}

/* ---------- ملء الشاشات الكبيرة (طلب المستخدم 2026-09-08) ----------
   على الشاشات الواسعة، بدل بقاء المحتوى بعرض ثابت وسط فراغ كبير على
   الجانبين، يتّسع المحتوى تدريجيًا مع تكبير مريح للبطاقات والخط، دون أن يصل
   لعرض غير مريح للقراءة على الشاشات فائقة الاتساع. */
@media (min-width:1440px){
  .wrap{max-width:1620px; padding:26px 32px 48px}
  .grid-top{gap:20px; margin-bottom:20px}
  .card{padding:24px 26px}
  .hero-gauge .arc-wrap{max-width:380px}
  .hero-gauge .arc-num{font-size:40px}
  .two-stat{gap:20px}
  .two-stat .value{font-size:23px}
  .section-title{font-size:16.5px; margin:28px 0 14px}
  .leaderboard{gap:16px}
  .lb-card{padding:20px}
  .lb-card .avatar{width:52px; height:52px; font-size:21px}
  .lb-card .name{font-size:15px}
  .lb-card .sales{font-size:13px}
  .stat-row{gap:16px; margin-bottom:20px}
  .stat-tile{padding:18px}
  .stat-tile .arc-wrap{width:140px}
  .stat-tile .arc-num{font-size:22px}
  .stat-tile .stat-label{font-size:13px}
  .bottom-grid{gap:20px}
  .dept-row, .update-row{font-size:14px}
}
@media (min-width:1800px){
  .wrap{max-width:1880px}
}

.grid-top{display:grid; grid-template-columns:1.3fr .9fr; gap:14px; margin-bottom:14px}
@media (max-width:820px){ .grid-top{grid-template-columns:1fr} }

.card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  padding:18px 20px;
}
.card h3{margin:0 0 4px; font-size:13.5px; color:var(--text-dim); font-weight:600}

.hero-gauge{display:flex; flex-direction:column; align-items:center; padding-top:6px}
.hero-gauge .arc-wrap{position:relative; width:100%; max-width:320px; aspect-ratio:320/170}
.hero-gauge .arc-num{
  position:absolute; left:0; right:0; bottom:14%; text-align:center;
  font-size:34px; font-weight:800;
}
.hero-gauge .arc-cap{text-align:center; font-size:12px; color:var(--text-mute); margin-top:-6px}

.two-stat{display:flex; flex-direction:column; gap:14px; justify-content:center; height:100%}
.two-stat .row{display:flex; align-items:center; justify-content:space-between; gap:10px}
.two-stat .label{font-size:12.5px; color:var(--text-dim); display:flex; align-items:center; gap:8px}
.two-stat .label .ico{
  width:26px; height:26px; border-radius:8px; display:flex; align-items:center; justify-content:center;
  background:rgba(124,92,255,.14); font-size:13px;
}
.two-stat .value{font-size:19px; font-weight:800}
.two-stat .value.good{color:var(--good)}
.two-stat .value.bad{color:var(--danger)}
.two-stat hr{border:none; border-top:1px solid var(--border); margin:0}

.section-title{font-size:14.5px; font-weight:700; margin:22px 0 10px}

.leaderboard{display:grid; grid-template-columns:1.15fr 1fr 1fr; gap:12px; margin-bottom:8px}
@media (max-width:820px){ .leaderboard{grid-template-columns:1fr} }
.lb-card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  padding:16px; position:relative; overflow:hidden;
}
.lb-card.rank-1{border-color:rgba(245,185,66,.55); background:linear-gradient(160deg, rgba(245,185,66,.10), var(--card) 55%)}
.lb-card .rank-pill{
  position:absolute; top:12px; left:12px; font-size:11px; padding:3px 9px; border-radius:20px;
  background:var(--card-2); color:var(--text-dim); border:1px solid var(--border);
}
.lb-card.rank-1 .rank-pill{background:rgba(245,185,66,.16); color:var(--gold); border-color:rgba(245,185,66,.4)}
.lb-card .who{display:flex; align-items:center; gap:10px; margin-bottom:12px}
.lb-card .avatar{
  width:44px; height:44px; border-radius:50%; background:var(--card-2); border:2px solid var(--border);
  display:flex; align-items:center; justify-content:center; font-size:18px; font-weight:800; color:var(--text-dim);
  overflow:hidden;
}
.lb-card .avatar img{width:100%; height:100%; object-fit:cover; border-radius:50%}
.lb-card.rank-1 .avatar{border-color:var(--gold); color:var(--gold)}
.lb-card .name{font-size:13.5px; font-weight:700}
.lb-card .name small{display:block; color:var(--text-mute); font-weight:400; font-size:11px}
.lb-progress{height:8px; border-radius:6px; background:var(--card-2); overflow:hidden; margin-bottom:8px}
.lb-progress .fill{height:100%; border-radius:6px; background:linear-gradient(90deg,var(--accent-a),var(--accent-b))}
.lb-progress .fill.gold{background:linear-gradient(90deg,#f5b942,#ffd873)}
.lb-progress .fill.silver{background:linear-gradient(90deg,#9aa4b2,#dfe4ec)}
.lb-progress .fill.bronze{background:linear-gradient(90deg,#c97b3d,#e8a86b)}
.lb-card .pct{font-size:12px; color:var(--text-dim); display:flex; justify-content:space-between}
.lb-card .sales{font-size:12px; color:var(--text-mute); margin-top:8px}
.badge-chip{font-size:10.5px; padding:2px 8px; border-radius:20px; font-weight:700}
.badge-chip.gold{background:rgba(245,185,66,.18); color:var(--gold)}
.badge-chip.silver{background:rgba(199,204,214,.16); color:var(--silver)}
.badge-chip.bronze{background:rgba(217,140,74,.18); color:var(--bronze)}
.empty-note{color:var(--text-mute); font-size:12.5px; padding:14px 4px}

.stat-row{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:14px}
@media (max-width:900px){ .stat-row{grid-template-columns:repeat(2,1fr)} }
.stat-tile{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  padding:14px; text-align:center;
}
.stat-tile .arc-wrap{position:relative; width:120px; aspect-ratio:120/90; margin:0 auto}
.stat-tile .arc-num{position:absolute; inset:0; display:flex; align-items:flex-end; justify-content:center; padding-bottom:10px; font-size:19px; font-weight:800}
.stat-tile .stat-label{font-size:12px; color:var(--text-dim); margin-top:6px}
.stat-tile .stat-ref{font-size:11px; color:var(--text-mute); margin-top:2px}

.bottom-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media (max-width:820px){ .bottom-grid{grid-template-columns:1fr} }
.dept-row{display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-bottom:1px solid var(--border); font-size:13px}
.dept-row:last-child{border-bottom:0}
.dept-row .dname{display:flex; align-items:center; gap:8px}
.dept-row .drank{
  width:22px; height:22px; border-radius:6px; background:var(--card-2); display:flex; align-items:center;
  justify-content:center; font-size:11px; color:var(--text-dim);
}
.update-row{display:flex; align-items:flex-start; gap:10px; padding:9px 0; border-bottom:1px solid var(--border); font-size:12.8px}
.update-row:last-child{border-bottom:0}
.update-row .uicon{font-size:15px}
.update-row .utext b{color:var(--text)}
.update-row .utext .uval{color:var(--good); font-weight:700}

.footer-strip{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;
  margin-top:16px; padding:12px 16px; border-radius:12px; background:var(--card-2);
  border:1px solid var(--border); font-size:12px; color:var(--text-dim);
}

/* ---------- أفضل الأصناف مبيعًا (بوب-أب) ---------- */
.top-items-card{margin-top:14px}
.top-items-head{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px}
.ti-hint{font-size:12px; color:var(--text-mute)}

.modal-overlay{
  display:none; position:fixed; inset:0; z-index:50; background:rgba(6,8,16,.72);
  align-items:center; justify-content:center; padding:20px;
}
.modal-overlay.open{display:flex}
.modal-box{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  width:100%; max-width:640px; max-height:82vh; display:flex; flex-direction:column;
  box-shadow:0 30px 80px rgba(0,0,0,.5);
}
.modal-head{
  display:flex; align-items:center; justify-content:space-between; padding:16px 20px;
  border-bottom:1px solid var(--border); font-size:15px; font-weight:700;
}
.modal-body{padding:14px 20px 20px; overflow-y:auto}

.ti-table{width:100%; border-collapse:collapse; font-size:13px}
.ti-table th{text-align:right; color:var(--text-dim); font-weight:600; font-size:12px; padding:8px 6px; border-bottom:1px solid var(--border)}
.ti-table td{padding:8px 6px; border-bottom:1px solid var(--border); vertical-align:middle}
.ti-table tr:last-child td{border-bottom:0}
.ti-desc{font-size:11px; color:var(--text-mute); margin-top:2px}
.ti-thumb{width:46px; height:46px; object-fit:cover; border-radius:8px; border:1px solid var(--border); cursor:zoom-in}
.ti-noimg{font-size:11px; color:var(--text-mute)}

.lightbox-overlay{
  display:none; position:fixed; inset:0; z-index:60; background:rgba(0,0,0,.85);
  align-items:center; justify-content:center; padding:30px; cursor:zoom-out;
}
.lightbox-overlay.open{display:flex}
.lightbox-overlay img{max-width:92vw; max-height:88vh; border-radius:12px; box-shadow:0 20px 60px rgba(0,0,0,.6); cursor:default}

/* ---------- شاشة الكونترول (تعاد استخدام مظهر داكن مبسّط) ---------- */
.ctl-wrap{max-width:1100px; margin:18px auto; padding:0 16px}
.ctl-status{padding:9px 12px; border-radius:8px; font-size:13px; margin-bottom:12px; background:var(--card-2); color:var(--text-dim)}
.ctl-status.ok{color:var(--good)}
.ctl-status.err{color:var(--danger)}
.ctl-addbar{position:relative; margin-bottom:16px}
.ctl-search{width:100%; padding:10px 12px; border:1px solid var(--border); border-radius:10px; font-size:14px; background:var(--card-2); color:var(--text)}
.ctl-results{
  position:absolute; z-index:5; top:calc(100% + 4px); right:0; left:0; background:var(--card);
  border:1px solid var(--border); border-radius:10px; max-height:260px; overflow-y:auto; display:none;
}
.ctl-results .opt{padding:10px 12px; font-size:13.5px; cursor:pointer; border-bottom:1px solid var(--border)}
.ctl-results .opt:hover{background:var(--card-2)}
.ctl-results .empty{padding:10px 12px; font-size:13px; color:var(--text-mute)}
.ctl-userbox{background:var(--card); border:1px solid var(--border); border-radius:12px; padding:14px 16px; margin-bottom:12px}
.ctl-userbox h3{margin:0 0 10px; font-size:15px; display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.ctl-company{margin-bottom:10px}
.ctl-company .clabel{font-size:12.5px; font-weight:700; color:var(--text-dim); margin-bottom:5px}
.ctl-branches{display:flex; flex-wrap:wrap; gap:6px; max-height:150px; overflow-y:auto; border:1px solid var(--border); border-radius:8px; padding:8px}
.ctl-branches label{display:flex; align-items:center; gap:4px; background:var(--card-2); border-radius:6px; padding:4px 8px; font-size:12.5px; cursor:pointer}
.ctl-targets{display:flex; gap:16px; flex-wrap:wrap; margin:10px 0; font-size:12.5px}
.ctl-targets .tgroup{display:flex; flex-direction:column; gap:6px}
.ctl-targets input{padding:7px 9px; border-radius:8px; border:1px solid var(--border); background:var(--card-2); color:var(--text); width:130px}
.ctl-devcfg{display:flex; align-items:center; gap:8px; margin-bottom:10px; font-size:13px}
.ctl-devcfg input{width:70px; padding:6px 8px; border-radius:8px; border:1px solid var(--border); background:var(--card-2); color:var(--text)}
.ctl-row-actions{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:8px}
button.ctl-save{background:var(--good); color:#06251f; border:0; border-radius:8px; padding:8px 16px; font-weight:700; cursor:pointer; font-size:13px}
button.ctl-remove{background:rgba(239,90,111,.16); color:var(--danger); border:0; border-radius:8px; padding:8px 14px; font-weight:600; cursor:pointer; font-size:13px}
.ctl-saved-note{font-size:12px; color:var(--good); display:none}
.ctl-emptylist{color:var(--text-mute); font-size:13.5px; padding:8px 2px}
.ctl-hint{color:var(--text-mute); font-size:12px}

/* ---------- لوحة صور البائعين ---------- */
#empPhotoList{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px}
.ctl-empbox{
  background:var(--card-2); border:1px solid var(--border); border-radius:12px;
  padding:12px; display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center;
}
.ctl-empphoto{
  width:64px; height:64px; border-radius:50%; overflow:hidden; background:var(--bg-1);
  border:2px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:26px;
}
.ctl-empphoto img{width:100%; height:100%; object-fit:cover}
.ctl-empname{font-size:12.5px; font-weight:700}
.ctl-empfile{width:100%; font-size:11px; color:var(--text-dim)}
.ctl-empactions{display:flex; gap:6px; flex-wrap:wrap; justify-content:center}
.ctl-empactions button{padding:5px 10px; font-size:11.5px}