:root{

  --rose:#3b82f6; --rose-dark:#2563eb; --rose-light:rgba(59,130,246,.12);
  --stone:#0b1220; --stone-dark:#060a13; --stone-mid:#101a30;
  --navy:#0e1b32; --navy-dark:#060c18; --green:#22c55e; --purple:#8b5cf6;
  --amber:#f59e0b; --amber-light:rgba(245,158,11,.10); --slate:#8fa3c4; --red:#ef4444;
  --teal:#3b82f6; --teal-bright:#60a5fa; --bg:#060a16; --card:rgba(255,255,255,.045); --border:rgba(255,255,255,.09); --ink:#eaf1fb;
  --mono:'JetBrains Mono',monospace;
  --shadow-sm:0 1px 3px rgba(0,0,0,.35);
  --shadow-md:0 12px 30px rgba(0,0,0,.42);
  --shadow-lg:0 24px 56px rgba(0,0,0,.55);

  /* ============== نظام الدارك/لايت مود ==============
     --ink-strong: لون العناوين البارزة (أبيض في الدارك / كحلي غامق في اللايت)
     --surface-1/2/3: طبقات الخلفية الشفافة المستخدمة في الحقول والبطاقات الفرعية
     --modal-bg: خلفية النوافذ المنبثقة
     --thead-fg: لون نص رأس الجدول */
  --ink-strong:#ffffff;
  --surface-1:rgba(255,255,255,.03);
  --surface-2:rgba(255,255,255,.05);
  --surface-3:rgba(255,255,255,.09);
  --modal-bg:rgba(13,19,33,.92);
  --thead-fg:#dff7fb;
  --flash-success-fg:#6ee7b7;
  --flash-error-fg:#fca5a5;
  --hint-fg:#fcd34d;
  --cc-b-hc-fg:#60a5fa; --cc-b-ml-fg:#c4b5fd; --cc-b-dc-fg:#fbbf24;
  --scrollbar-track:rgba(255,255,255,.04);
  --scrollbar-thumb:rgba(255,255,255,.18);
}
:root[data-theme="light"]{
  --bg:#f4f6fb; --card:rgba(15,23,42,.045); --border:rgba(15,23,42,.10); --ink:#1f2937;
  --slate:#5b6b85;
  --ink-strong:#0f172a;
  --surface-1:rgba(15,23,42,.03);
  --surface-2:rgba(15,23,42,.045);
  --surface-3:rgba(15,23,42,.08);
  --modal-bg:rgba(255,255,255,.97);
  --thead-fg:#0f4c5c;
  --flash-success-fg:#15803d;
  --flash-error-fg:#b91c1c;
  --hint-fg:#92600a;
  --cc-b-hc-fg:#1d4ed8; --cc-b-ml-fg:#6d28d9; --cc-b-dc-fg:#92600a;
  --shadow-sm:0 1px 3px rgba(15,23,42,.08);
  --shadow-md:0 12px 30px rgba(15,23,42,.10);
  --shadow-lg:0 24px 56px rgba(15,23,42,.14);
  --scrollbar-track:rgba(15,23,42,.05);
  --scrollbar-thumb:rgba(15,23,42,.22);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;font-size:16.5px}
body{
  font-family:'IBM Plex Sans Arabic',Arial,sans-serif;margin:0;color:var(--ink);
  background:
    radial-gradient(1200px 800px at 12% -8%, rgba(59,130,246,.10), transparent 60%),
    radial-gradient(1000px 700px at 105% 8%, rgba(139,92,246,.09), transparent 55%),
    radial-gradient(800px 600px at 50% 110%, rgba(59,130,246,.06), transparent 60%),
    linear-gradient(180deg,#070b16 0%, #0a1120 100%);
  background-attachment:fixed;
  -webkit-text-size-adjust:100%;
  line-height:1.55;
  transition:background-color .2s ease, color .2s ease;
  user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;
  cursor:default;
}
/* نلغي مؤشر الكتابة (I-beam) وتحديد النص في كل الموقع كما طلب — باستثناء حقول الإدخال
   (input/textarea) التي يجب أن تبقى قابلة للكتابة والتحديد بشكل طبيعي حتى تعمل. */
input,textarea,select,[contenteditable="true"]{
  user-select:text;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;
  cursor:auto;
}
input[type=button],input[type=submit],input[type=checkbox],input[type=radio],input[type=file],
select,button,a{ cursor:pointer }
[data-theme="light"] body{
  background:
    radial-gradient(1200px 800px at 12% -8%, rgba(59,130,246,.07), transparent 60%),
    radial-gradient(1000px 700px at 105% 8%, rgba(139,92,246,.06), transparent 55%),
    radial-gradient(800px 600px at 50% 110%, rgba(59,130,246,.05), transparent 60%),
    linear-gradient(180deg,#eef1f7 0%, #f6f8fc 100%);
  background-attachment:fixed;
}
/* عناصر كثيرة في الواجهة مكتوبة بألوان خلفية بيضاء شفافة ثابتة (rgba(255,255,255,x))
   لأنها صُممت أصلاً للوضع الداكن فقط. في وضع اللايت نعيد توجيه هذه الخلفيات لتتناسب
   مع خلفية فاتحة بدل أن تختفي فوق الأبيض. هذا يغطي كل الحقول والقوائم المنسدلة
   وبطاقات لوحة التحكم التي كُتب لها لون داخل السطر مباشرة (inline style). */
[data-theme="light"] [style*="rgba(255,255,255,.02"],
[data-theme="light"] [style*="rgba(255,255,255,.03"]{ background:var(--surface-1) !important; }
[data-theme="light"] [style*="rgba(255,255,255,.04"],
[data-theme="light"] [style*="rgba(255,255,255,.05"],
[data-theme="light"] [style*="rgba(255,255,255,.06"]{ background:var(--surface-2) !important; }
[data-theme="light"] [style*="rgba(255,255,255,.08"],
[data-theme="light"] [style*="rgba(255,255,255,.09"],
[data-theme="light"] [style*="rgba(255,255,255,.1)"],
[data-theme="light"] [style*="rgba(255,255,255,.10"]{ background:var(--surface-3) !important; }
[data-theme="light"] thead th{ color:var(--thead-fg) }
[data-theme="light"] .modal{ background:var(--modal-bg) }
[data-theme="light"] .flash-success{ color:var(--flash-success-fg) }
[data-theme="light"] .flash-error{ color:var(--flash-error-fg) }
[data-theme="light"] .hint-box{ color:var(--hint-fg) }
[data-theme="light"] .cc-b-hc{ color:var(--cc-b-hc-fg) }
[data-theme="light"] .cc-b-ml{ color:var(--cc-b-ml-fg) }
[data-theme="light"] .cc-b-dc{ color:var(--cc-b-dc-fg) }
[data-theme="light"] tbody tr:hover{ background:rgba(59,130,246,.07) }
[data-theme="light"] tbody tr:nth-child(even),
[data-theme="light"] .cc-rank-item:nth-child(even){ background:var(--surface-1) }
[data-theme="light"] .btn-outline,
[data-theme="light"] .filters input,[data-theme="light"] .filters select,
[data-theme="light"] .form-group input,[data-theme="light"] .form-group select,[data-theme="light"] .form-group textarea,
[data-theme="light"] .tag-link,[data-theme="light"] .filter-pill,
[data-theme="light"] .cc-funnel-track,[data-theme="light"] .cc-rank-bartrack,
[data-theme="light"] .cc-stat-title{ background:var(--surface-2) }
[data-theme="light"] .cc-hero-card{ background:linear-gradient(180deg,var(--surface-2),var(--surface-1)); border-color:var(--border) }
[data-theme="light"] .cc-hero-head{ background:var(--surface-1); border-color:var(--border) }
[data-theme="light"] .cc-hero-item{ background:var(--surface-1); border-color:var(--border) }
[data-theme="light"] ::-webkit-scrollbar-track{ background:var(--scrollbar-track) }
[data-theme="light"] ::-webkit-scrollbar-thumb{ background:var(--scrollbar-thumb) }
/* السايدبار يبقى داكناً دائماً (تصميم شائع للوحات التحكم) لضمان تباين وقراءة ثابتة
   بغضّ النظر عن الوضع المختار، فلا حاجة لتعديل ألوانه هنا. */
::-webkit-scrollbar{ height:10px; width:10px }
::-webkit-scrollbar-track{ background:var(--scrollbar-track); border-radius:10px }
::-webkit-scrollbar-thumb{ background:var(--scrollbar-thumb); border-radius:10px }
.theme-toggle{
  display:inline-flex;align-items:center;gap:.4rem;background:rgba(255,255,255,.06);
  border:1px solid var(--border);color:var(--ink-strong);width:38px;height:38px;border-radius:10px;
  font-size:1.05rem;cursor:pointer;justify-content:center;flex-shrink:0;transition:.18s ease;
}
.theme-toggle:hover{ border-color:var(--rose) }
[data-theme="light"] .theme-toggle{ background:var(--surface-2) }
.table-wrap a,.table-wrap button,.table-wrap input,.table-wrap select,
.modal a,.modal button,.modal input,.modal select,.modal textarea{ cursor:pointer }
.modal input,.modal select,.modal textarea{ cursor:auto }
/* الخرائط (Leaflet): نلغي أيقونة يد "grab" الافتراضية فوق الخريطة حتى يبقى شكل الماوس
   طبيعياً في كل النظام بلا استثناء، ولا تتعارض بصرياً مع تحديد/نسخ النص القريب منها.
   السحب لتحريك الخريطة نفسه يبقى يعمل بشكل طبيعي — فقط شكل المؤشر هو ما تغيّر. */
.leaflet-container, .leaflet-container .leaflet-grab, .leaflet-container.leaflet-touch-drag{
  cursor:default !important;
}
.leaflet-container:active{ cursor:default !important }
a{color:inherit;text-decoration:none}
img{max-width:100%}

.app{display:flex;min-height:100vh}
.sidebar{
  width:240px;color:#dceaf1;flex-shrink:0;padding:0;
  position:sticky;top:0;height:100vh;overflow-y:auto;
  background-image:linear-gradient(165deg,#060a13 0%,#0b1220 50%,#101a30 100%);
  border-left:1px solid var(--border);
  transition:right .25s ease;
}
.sidebar .brand{
  padding:1.7rem 1.5rem 1.3rem;font-weight:900;font-size:1.12rem;letter-spacing:.2px;
  border-bottom:1px solid rgba(255,255,255,.08);
  display:flex;flex-direction:column;gap:.35rem;position:relative;color:#fff;
  user-select:none;-webkit-user-select:none;cursor:default;
}
.sidebar .brand::after{content:'';display:block;width:38px;height:3px;background:linear-gradient(90deg,var(--teal-bright),var(--purple));border-radius:2px;margin-top:.5rem;box-shadow:0 0 12px rgba(59,130,246,.5)}
.sidebar .brand .sub{font-family:var(--mono);font-size:.62rem;color:#7fa8bb;font-weight:500;letter-spacing:1.8px;text-transform:uppercase}
.sidebar nav{padding:1.1rem .8rem}
.sidebar nav a{
  display:block;padding:.78rem 1.1rem;color:#a9bdd4;font-weight:600;font-size:.98rem;
  border-radius:11px;margin-bottom:.2rem;transition:.18s;
}
.sidebar nav a:hover{background:rgba(255,255,255,.06);color:#fff}
.sidebar nav a.active{background:linear-gradient(135deg,rgba(59,130,246,.20),rgba(139,92,246,.14));color:#fff;font-weight:700;box-shadow:inset 0 0 0 1px rgba(96,165,250,.28), 0 0 20px rgba(59,130,246,.10)}
.sidebar .userbox{margin-top:.5rem;padding:1.2rem 1.5rem;border-top:1px solid rgba(255,255,255,.08);font-size:.85rem;color:#7fa8bb}
.sidebar .userbox a{color:var(--teal-bright);font-weight:700}
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(2,6,14,.65);z-index:45}
.sidebar-overlay.open{display:block}
.main{flex:1;min-width:0}
.menu-toggle{display:none;background:rgba(255,255,255,.06);color:var(--ink-strong);border:1px solid var(--border);width:38px;height:38px;border-radius:10px;font-size:1.15rem;cursor:pointer;align-items:center;justify-content:center;flex-shrink:0}
.topbar{
  background:rgba(255,255,255,.03);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);padding:1.25rem 1.8rem;
  display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;z-index:20;
  gap:.8rem;box-shadow:0 2px 20px rgba(0,0,0,.22);
}
.topbar .topbar-right{display:flex;align-items:center;gap:.7rem;min-width:0}
.topbar h1{font-size:1.6rem;margin:0;font-weight:900;color:var(--ink-strong);letter-spacing:-.3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;user-select:none;-webkit-user-select:none;cursor:default}
.content{padding:1.8rem;max-width:100%;overflow-x:hidden}
.flash{padding:.9rem 1.3rem;border-radius:12px;margin-bottom:1.1rem;font-weight:500;border-right:4px solid}
.flash-success{background:rgba(52,211,153,.10);color:var(--flash-success-fg);border-color:var(--green)}
.flash-error{background:rgba(248,113,113,.10);color:var(--flash-error-fg);border-color:var(--red)}

.grid{display:grid;gap:1.1rem}
.grid-split{grid-template-columns:1.3fr 1fr}
.grid-split-wide{grid-template-columns:1.6fr 1fr}
.grid-split-map{grid-template-columns:1fr 320px}
.grid-detail{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}

.stat-cards{grid-template-columns:repeat(4,1fr);gap:1.1rem}
.stat-card{
  background:var(--card);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-radius:16px;padding:1.35rem 1.25rem;border:1px solid var(--border);
  position:relative;overflow:hidden;min-width:0;box-shadow:var(--shadow-sm);transition:.2s ease;
}
.stat-card:hover{box-shadow:0 14px 34px rgba(59,130,246,.14), var(--shadow-md);transform:translateY(-2px);border-color:rgba(96,165,250,.3)}
.stat-card::before{content:'';position:absolute;top:0;right:0;left:0;height:3px;background:var(--accent,var(--rose));box-shadow:0 0 14px var(--accent,var(--rose))}
.stat-card .val{font-family:var(--mono);font-weight:700;line-height:1;color:var(--ink-strong);font-size:clamp(1.05rem,3.6vw,2rem);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stat-card .lbl{color:var(--slate);font-size:clamp(.64rem,1.6vw,.82rem);margin-top:.55rem;font-weight:500;line-height:1.4}

.card{background:var(--card);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-radius:16px;border:1px solid var(--border);padding:1.6rem;min-width:0;box-shadow:var(--shadow-sm)}
.card h3{margin:0 0 1.15rem;font-size:1.12rem;font-weight:800;color:var(--ink-strong);display:flex;align-items:center;gap:.55rem;flex-wrap:wrap}
.card h3::before{content:'';width:4px;height:17px;background:linear-gradient(180deg,var(--teal-bright),var(--purple));border-radius:2px;display:inline-block;flex-shrink:0;box-shadow:0 0 10px rgba(59,130,246,.5)}

.table-wrap{overflow-x:auto;max-height:70vh;border-radius:10px;border:1px solid var(--border);-webkit-overflow-scrolling:touch;width:100%}
table{width:100%;min-width:640px;border-collapse:collapse;font-size:.93rem}
thead th{background:rgba(255,255,255,.05);color:var(--thead-fg);padding:.72rem .65rem;text-align:right;position:sticky;top:0;white-space:nowrap;font-weight:700;font-size:.86rem;backdrop-filter:blur(10px)}
tbody td{padding:.66rem;border-bottom:1px solid var(--border);white-space:nowrap;font-family:var(--mono);font-size:.88rem;color:var(--ink)}
tbody td:nth-child(1),tbody td.text-cell{font-family:'IBM Plex Sans Arabic',Arial,sans-serif;font-size:.92rem}
tbody tr:nth-child(even){background:rgba(255,255,255,.02)}
tbody tr:hover{background:rgba(59,130,246,.08)}

.badge{display:inline-block;padding:.32em .8em;border-radius:20px;font-size:.76rem;font-weight:700;color:#fff;font-family:'IBM Plex Sans Arabic',Arial,sans-serif;white-space:nowrap}
.bg-slate{background:#475569} .bg-amber{background:var(--amber);color:#241a02} .bg-teal{background:var(--teal);color:#04202b}
.bg-green{background:var(--green);color:#04241a} .bg-dark{background:#334155} .bg-red{background:var(--red);color:#2a0605}
.bg-navy{background:var(--navy-dark)} .bg-purple{background:var(--purple);color:#1e1240}
.btn{display:inline-flex;align-items:center;gap:.4rem;padding:.65rem 1.3rem;border-radius:24px;border:none;cursor:pointer;font-weight:700;font-family:inherit;font-size:.92rem;text-decoration:none;transition:.18s ease}
.btn-navy{background:linear-gradient(135deg,var(--teal),var(--purple) 130%);color:#04141c;box-shadow:0 8px 20px rgba(59,130,246,.28)} .btn-navy:hover{transform:translateY(-1px);box-shadow:0 10px 26px rgba(59,130,246,.38)}
.btn-green{background:var(--green);color:#04241a}
.btn-outline{background:rgba(255,255,255,.05);border:1px solid var(--border);color:var(--ink)}
.btn-outline:hover{border-color:var(--rose)}
.btn-sm{padding:.4rem .85rem;font-size:.78rem;border-radius:16px}
.btn-danger{background:var(--red);color:#2a0605}
.filters{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:1.1rem;align-items:center}
.filters input,.filters select{padding:.55rem .9rem;border:1px solid var(--border);border-radius:22px;font-family:inherit;font-size:.9rem;background:rgba(255,255,255,.05);color:var(--ink)}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}
.form-group label{display:block;font-weight:700;font-size:.86rem;margin-bottom:.35rem;color:var(--slate)}
.form-group input,.form-group select,.form-group textarea{width:100%;padding:.6rem .8rem;border:1px solid var(--border);border-radius:8px;font-family:inherit;font-size:.92rem;background:rgba(255,255,255,.04);color:var(--ink)}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:var(--rose);box-shadow:0 0 0 3px rgba(59,130,246,.15)}
.form-group input[type=file]{padding:.4rem}
.date-hint{font-family:var(--mono);font-size:.72rem;color:var(--slate);margin-top:.3rem}
#map{height:420px;border-radius:10px;border:1px solid var(--border);max-width:100%}
.photo-grid{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.6rem}
.photo-grid img{width:90px;height:90px;object-fit:cover;border-radius:8px;border:1px solid var(--border)}
.mini-stepper{display:flex;align-items:center;gap:2px}
.mini-stepper .dot{width:20px;height:20px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:.65rem;color:#fff;font-weight:800;font-family:var(--mono);flex-shrink:0}
.mini-stepper .bar{flex:1;height:2px;min-width:8px}
.modal-bg{display:none;position:fixed;inset:0;background:rgba(2,6,14,.72);z-index:100;align-items:center;justify-content:center;padding:1rem}
.modal-bg.open{display:flex}
.modal{background:var(--modal-bg);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-radius:16px;max-width:640px;width:100%;max-height:90vh;overflow-y:auto;padding:1.6rem;border:1px solid var(--border);border-top:4px solid var(--rose);box-shadow:var(--shadow-lg)}
.modal-wide{max-width:1180px}
.modal h3{margin-top:0;color:var(--ink-strong)}
.close-x{float:left;cursor:pointer;font-size:1.3rem;color:var(--slate)}
.tag-link{display:inline-flex;align-items:center;gap:.4rem;background:rgba(255,255,255,.05);border:1px solid var(--border);padding:.5rem .9rem;border-radius:20px;margin:.25rem;font-size:.85rem}
.hint-box{background:var(--amber-light);border-right:3px solid var(--amber);padding:.7rem 1rem;border-radius:8px;font-size:.82rem;color:var(--hint-fg);margin-bottom:1rem}
.filter-pill{padding:.42rem .95rem;border-radius:20px;font-size:.8rem;font-weight:700;border:1px solid var(--border);background:rgba(255,255,255,.04);color:var(--ink)}
.filter-pill.active{background:linear-gradient(135deg,var(--teal),var(--rose-dark));color:#04141c;border-color:transparent;box-shadow:0 0 16px rgba(59,130,246,.3)}

@media(max-width:1080px){
  .grid-split{grid-template-columns:1fr}
  .grid-split-wide{grid-template-columns:1fr}
  .grid-split-map{grid-template-columns:1fr}
  #map{height:340px}
}
@media(max-width:900px){
  .sidebar{position:fixed;top:0;bottom:0;right:-270px;z-index:50}
  .sidebar.open{right:0}
  .app{display:block}
  .menu-toggle{display:inline-flex}
  .content{padding:1.1rem}
  .topbar{padding:.9rem 1.1rem}
}
@media(max-width:640px){
  .stat-cards{gap:.55rem}
  .stat-card{padding:.75rem .55rem;border-radius:10px}
  .stat-card .lbl{margin-top:.3rem}
  .topbar h1{font-size:1.08rem}
  .content{padding:.85rem}
  .card{padding:1rem}
  .filters{gap:.45rem}
  .filters input,.filters select{padding:.48rem .75rem;font-size:.8rem}
  .btn{padding:.5rem 1rem;font-size:.82rem}
}
@media(max-width:420px){
  .stat-card{padding:.6rem .45rem}
  .stat-card .val{font-size:clamp(.85rem,4.6vw,1.3rem)}
}

.sec-tabs{display:flex;gap:.4rem;margin-bottom:1rem;border-bottom:1px solid var(--border);padding-bottom:0;flex-wrap:wrap}
.sec-tab{padding:.6rem 1.1rem;font-size:.85rem;font-weight:700;color:var(--slate);border-bottom:2px solid transparent;border-radius:8px 8px 0 0}
.sec-tab.active{color:var(--ink-strong);border-bottom-color:var(--teal-bright);background:rgba(59,130,246,.08)}
.sub-tabs{display:flex;gap:.5rem;background:rgba(59,130,246,.06);padding:.5rem;border-radius:10px;margin-bottom:1rem;flex-wrap:wrap}
.sub-tab{padding:.5rem .95rem;border-radius:7px;font-size:.8rem;font-weight:700;color:var(--teal-bright);background:transparent}
.sub-tab.active{background:linear-gradient(135deg,var(--teal),var(--rose-dark));color:#04141c}

.stage-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.9rem;margin-bottom:1.1rem}
.stage-card{background:var(--card);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--border);border-radius:14px;padding:1.1rem 1.2rem;cursor:pointer;transition:.18s ease;border-right:5px solid #93a4c3;box-shadow:var(--shadow-sm)}
.stage-card:hover{box-shadow:0 10px 26px rgba(0,0,0,.4);transform:translateY(-2px)}
.stage-card.active{box-shadow:0 0 0 1px rgba(59,130,246,.4), 0 10px 26px rgba(59,130,246,.2);border-color:var(--teal)}
.stage-card .sc-no{display:inline-flex;width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,var(--teal),var(--rose-dark));color:#04141c;align-items:center;justify-content:center;font-size:.78rem;font-weight:800;margin-left:.4rem}
.stage-card .sc-title{font-size:.83rem;font-weight:800;color:var(--ink)}
.stage-card .sc-val{font-size:1.7rem;font-weight:900;margin-top:.35rem;font-family:var(--mono)}
.stage-card.c1{border-right-color:#93a4c3}
.stage-card.c1 .sc-val{color:#93a4c3}
.stage-card.c2{border-right-color:#fbbf24}
.stage-card.c2 .sc-val{color:#fbbf24}
.stage-card.c3{border-right-color:#3b82f6}
.stage-card.c3 .sc-val{color:#3b82f6}
.stage-card.c4{border-right-color:#34d399}
.stage-card.c4 .sc-val{color:#34d399}

tr.row-urgent{background:rgba(248,113,113,.08)}
tr.row-urgent td{border-bottom-color:rgba(248,113,113,.25)}

.target-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:.9rem;margin-bottom:1.1rem}
.target-card{background:var(--card);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--border);border-radius:14px;padding:1.2rem;cursor:pointer;transition:.18s ease;border-right:5px solid var(--teal);box-shadow:var(--shadow-sm)}
.target-card:hover{box-shadow:0 10px 26px rgba(0,0,0,.4);transform:translateY(-2px)}
.target-card h5{margin:0 0 .5rem;font-size:.83rem;color:var(--ink);font-weight:800}
.target-card .tc-nums{display:flex;align-items:baseline;gap:.3rem}
.target-card .tc-actual{font-size:1.7rem;font-weight:900;font-family:var(--mono);color:var(--ink-strong)}
.target-card .tc-target{font-size:.85rem;color:var(--slate)}

.cc-wrap{background:var(--card);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-radius:18px;padding:1.6rem 1.7rem 1.8rem;color:var(--ink);margin-bottom:1.3rem;overflow:hidden;border:1px solid var(--border);box-shadow:var(--shadow-sm)}
.cc-header{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:1rem;padding-bottom:1.1rem;border-bottom:1px solid var(--border);margin-bottom:1.1rem}
.cc-title-row{display:flex;align-items:center;gap:.7rem}
.cc-mark{width:36px;height:36px;border-radius:10px;background:linear-gradient(160deg,var(--teal),var(--rose-dark));display:flex;align-items:center;justify-content:center;flex:0 0 36px;box-shadow:0 4px 16px rgba(59,130,246,.35)}
.cc-title{font-size:1.2rem;font-weight:800;color:var(--ink-strong);margin:0}
.cc-sub{font-size:.76rem;color:var(--slate);margin-top:.35rem;display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.cc-pulse{width:7px;height:7px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 0 rgba(59,130,246,.55);animation:ccpulse 2s infinite;display:inline-block}
@keyframes ccpulse{0%{box-shadow:0 0 0 0 rgba(59,130,246,.5)}70%{box-shadow:0 0 0 8px rgba(59,130,246,0)}100%{box-shadow:0 0 0 0 rgba(59,130,246,0)}}
.cc-update{font-size:.76rem;color:var(--slate);display:flex;align-items:center;gap:.4rem;background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:10px;padding:.55rem .95rem;white-space:nowrap}
.cc-tabs{display:flex;gap:.4rem;margin-top:.9rem}
.cc-tab{font-size:.82rem;font-weight:700;color:var(--slate);background:transparent;border:none;padding:.6rem .9rem;border-bottom:2px solid transparent;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:.4rem}
.cc-tab.active{color:var(--ink-strong);border-bottom-color:var(--teal)}
.cc-tab:hover{color:var(--ink-strong)}

.cc-filterbar{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;margin-bottom:.4rem}
.cc-filterbar label{font-size:.78rem;color:var(--slate);font-weight:700}
.cc-filterbar input[type=date]{background:rgba(255,255,255,.05);border:1px solid var(--border);color:var(--ink);border-radius:8px;padding:.45rem .7rem;font-family:var(--mono);font-size:.78rem}
.cc-clearbtn{background:transparent;border:1px solid var(--teal);color:var(--teal);border-radius:8px;padding:.5rem 1rem;font-size:.78rem;font-weight:700;cursor:pointer;font-family:inherit}
.cc-note{font-size:.72rem;color:var(--slate);margin:.4rem 0 1.1rem}

.cc-kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:.9rem;margin-bottom:1.2rem}
.cc-kpi-grid-6{display:grid;grid-template-columns:repeat(3,1fr);gap:.9rem;margin-bottom:1.2rem}
@media(max-width:900px){.cc-kpi-grid-6{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.cc-kpi-grid-6{grid-template-columns:1fr}}
.cc-kpi{background:var(--card);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--border);border-right:5px solid var(--accent,var(--teal));border-radius:14px;padding:1.15rem 1.25rem;min-width:0;box-shadow:var(--shadow-sm);transition:.18s ease}
.cc-kpi.clickable{cursor:pointer}
.cc-kpi.clickable:hover{box-shadow:0 10px 26px rgba(0,0,0,.4);transform:translateY(-2px)}
.cc-kpi .v{font-family:var(--mono);font-size:1.6rem;font-weight:900;color:var(--ink-strong);line-height:1.1}
.cc-kpi .l{font-size:.8rem;color:var(--ink);margin-top:.5rem;font-weight:800}
.cc-kpi .s{font-size:.7rem;color:var(--slate);margin-top:.3rem}
.cc-kpi.split{display:flex;justify-content:space-between;gap:.5rem}
.cc-kpi.split .col{text-align:center;flex:1;min-width:0}
.cc-kpi.split .col .v{font-size:1.1rem}
.cc-kpi.split .col .l{white-space:normal;line-height:1.3;font-size:.66rem;margin-top:.3rem}
.cc-kpi.split .divider{width:1px;background:var(--border);flex:0 0 1px}

.pi-wrap{background:var(--card);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-radius:18px;padding:1.3rem 1.5rem;color:var(--ink);margin-bottom:1.3rem;border:1px solid var(--border);box-shadow:var(--shadow-sm)}
.pi-top{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;flex-wrap:wrap;margin-bottom:1rem}
.pi-name{font-size:1.05rem;font-weight:800;color:var(--ink-strong);margin:0;max-width:640px;line-height:1.5}
.pi-circular{font-size:.74rem;color:var(--slate);margin-top:.35rem;font-family:var(--mono)}
.pi-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:.9rem;margin-bottom:1rem}
.pi-stat{background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:12px;padding:.85rem 1rem;min-width:0}
.pi-stat .v{font-family:var(--mono);font-size:.86rem;font-weight:800;color:var(--ink-strong);white-space:nowrap}
@media(max-width:720px){.pi-stat .v{white-space:normal;line-height:1.4}}
.pi-stat .l{font-size:.7rem;color:var(--slate);margin-top:.3rem;font-weight:700}
.pi-progress-wrap{display:flex;align-items:center;gap:.9rem}
.pi-progress-track{flex:1;background:rgba(255,255,255,.06);border-radius:10px;height:18px;overflow:hidden;position:relative;border:1px solid var(--border)}
.pi-progress-fill{height:100%;border-radius:10px 0 0 10px;background:linear-gradient(90deg,var(--teal),var(--green));transition:width .3s ease}
.pi-progress-label{font-size:.74rem;color:var(--slate);white-space:nowrap;font-family:var(--mono);font-weight:700}
@media(max-width:640px){.pi-progress-wrap{flex-direction:column;align-items:stretch}}

.cc-grid2{display:grid;grid-template-columns:1fr 1fr;gap:.9rem;margin-bottom:.9rem}
@media(max-width:900px){.cc-grid2{grid-template-columns:1fr}}
.cc-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:.9rem}
@media(max-width:900px){.cc-grid3{grid-template-columns:1fr}}

.cc-card{background:var(--card);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--border);border-radius:14px;padding:1.1rem 1.2rem;min-width:0;box-shadow:var(--shadow-sm)}
.cc-card h4{margin:0 0 .9rem;font-size:.85rem;font-weight:800;color:var(--ink-strong);display:flex;align-items:center;gap:.4rem}
.cc-chart-box{position:relative;height:210px;max-width:100%;overflow:hidden}
.cc-card #map{height:320px;border:1px solid var(--border)}

.cc-funnel-row{display:flex;align-items:center;gap:.8rem;margin-bottom:.6rem}
.cc-funnel-row:last-child{margin-bottom:0}
.cc-funnel-label{width:105px;flex:0 0 105px;font-size:.78rem;color:var(--slate)}
.cc-funnel-track{flex:1;background:rgba(255,255,255,.05);border-radius:8px;height:26px;overflow:hidden;position:relative}
.cc-funnel-fill{height:100%;border-radius:8px}
.cc-funnel-val{width:40px;flex:0 0 40px;text-align:left;font-family:var(--mono);font-weight:700;font-size:.8rem;color:var(--ink-strong)}

.cc-rank-list{list-style:none;margin:0;padding:0}
.cc-rank-item{display:grid;grid-template-columns:24px 1fr 90px 40px;align-items:center;gap:.6rem;padding:.6rem .5rem;border-bottom:1px solid var(--border);font-size:.78rem;text-decoration:none;color:inherit}
.cc-rank-item:nth-child(even){background:rgba(255,255,255,.03)}
.cc-rank-item:last-child{border-bottom:none}
.cc-rank-num{width:22px;height:22px;border-radius:6px;background:linear-gradient(135deg,var(--teal),var(--rose-dark));color:#04141c;font-family:var(--mono);font-size:.66rem;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.cc-rank-name{color:var(--ink);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.cc-rank-bartrack{background:rgba(255,255,255,.05);border:1px solid var(--border);border-radius:8px;height:10px;overflow:hidden}
.cc-rank-barfill{height:100%;background:linear-gradient(90deg,var(--teal),var(--teal-bright));border-radius:8px;min-width:3px;box-shadow:0 0 8px rgba(59,130,246,.5)}
.cc-rank-val{font-family:var(--mono);color:var(--ink-strong);font-weight:700;font-size:.78rem;text-align:left}

.cc-badge{display:inline-block;padding:.2em .6em;border-radius:20px;font-size:.68rem;font-weight:700}
.cc-b-hc{background:rgba(59,130,246,.15);color:var(--cc-b-hc-fg)}
.cc-b-ml{background:rgba(139,92,246,.18);color:var(--cc-b-ml-fg)}
.cc-b-dc{background:rgba(251,191,36,.16);color:var(--cc-b-dc-fg)}

.cc-insights{list-style:none;margin:0;padding:0}
.cc-insights li{font-size:.78rem;color:var(--ink);padding:.5rem 0;border-bottom:1px solid var(--border);display:flex;gap:.5rem}
.cc-insights li:last-child{border-bottom:none}
.cc-insights li::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--teal);margin-top:.5rem;flex-shrink:0;box-shadow:0 0 6px rgba(59,130,246,.6)}

.cc-section-title{display:flex;align-items:center;gap:.6rem;font-size:.95rem;font-weight:800;color:var(--ink-strong);margin:1.7rem 0 .9rem;padding-bottom:.55rem;border-bottom:2px solid var(--border)}
.cc-section-title .dot{width:11px;height:11px;border-radius:50%;flex:0 0 11px}
.cc-section-title.detect .dot{background:#3b82f6;box-shadow:0 0 8px rgba(59,130,246,.7)}
.cc-section-title.repair .dot{background:#34d399;box-shadow:0 0 8px rgba(52,211,153,.7)}
.cc-section-title small{font-weight:400;font-size:.7rem;color:var(--slate);margin-right:auto}
.cc-kpi-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:.9rem;margin-bottom:.9rem}
.cc-table-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:.7rem;margin-bottom:1rem;align-items:stretch}
@media(max-width:1400px){.cc-table-cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){.cc-table-cards{grid-template-columns:1fr}}
.cc-stat-card{background:var(--card);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--border);border-top:3px solid var(--teal);border-radius:10px;box-shadow:var(--shadow-sm);overflow:hidden;min-width:0;display:flex;flex-direction:column}
.cc-stat-title{font-size:.76rem;font-weight:800;color:var(--ink-strong);background:rgba(255,255,255,.05);padding:.55rem .8rem;border-bottom:1px solid var(--border)}
.cc-stat-body{display:flex;flex-direction:column;padding:0 .9rem .4rem}
.cc-stat-seg{padding:.5rem .15rem;border-bottom:1px solid var(--border)}
.cc-stat-val{font-family:var(--mono);font-weight:800;font-size:1.05rem;color:var(--accent,var(--ink-strong))}
.cc-stat-lbl{font-size:.68rem;color:var(--slate);margin-top:.1rem;font-weight:600}
.cc-stat-sub{font-size:.6rem;color:var(--slate);margin-top:.1rem;font-family:var(--mono)}
.cc-stat-body.grid2{display:grid;grid-template-columns:1fr 1fr;column-gap:.8rem}
.cc-stat-body.grid2 .cc-stat-seg:nth-last-child(-n+2){border-bottom:none}
.cc-stat-body.grid2 .cc-stat-seg:nth-child(odd){border-inline-end:1px solid var(--border);padding-inline-end:.7rem}
.cc-stat-body.grid3{display:grid;grid-template-columns:repeat(3,1fr);column-gap:.5rem}
.cc-stat-body.grid3 .cc-stat-seg{border-bottom:none;padding:.5rem .25rem}
.cc-stat-body.grid3 .cc-stat-seg:not(:last-child){border-inline-end:1px solid var(--border)}
.cc-stat-body.grid4{display:grid;grid-template-columns:repeat(4,1fr);column-gap:.4rem}
.cc-stat-body.grid4 .cc-stat-seg{border-bottom:none;padding:.5rem .2rem}
.cc-stat-body.grid4 .cc-stat-seg:not(:last-child){border-inline-end:1px solid var(--border)}
.cc-stat-body:not(.grid2):not(.grid3):not(.grid4) .cc-stat-seg:last-child{border-bottom:none}
.cc-stat-val{font-family:var(--mono);font-weight:800;font-size:1.5rem;color:var(--accent,var(--ink))}
.cc-stat-lbl{font-size:.78rem;color:var(--slate);margin-top:.2rem;font-weight:600}
.cc-stat-sub{font-size:.72rem;color:var(--slate);margin-top:.15rem;font-family:var(--mono)}

/* ============== بطاقات "هيرو" (رقم إجمالي كبير أعلى + تفصيل أسفل) — مطابقة لتصميم الصور ============== */
.cc-hero-card{--hc:var(--teal-bright);background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.1);border-radius:14px;box-shadow:var(--shadow-sm);overflow:hidden;min-width:0;display:flex;flex-direction:column}
.cc-hero-head{display:flex;align-items:center;justify-content:space-between;padding:.65rem .9rem;border-bottom:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.035)}
.cc-hero-head h5{margin:0;font-size:.8rem;font-weight:800;color:var(--ink-strong)}
.cc-hero-head .ico{width:18px;height:18px;flex-shrink:0;color:var(--hc);font-size:1rem;line-height:1}
.cc-hero-head .ico svg{width:100%;height:100%}
.cc-hero-mid{text-align:center;padding:.8rem .9rem .6rem}
.cc-hero-mid .lbl{font-size:.72rem;color:var(--slate);font-weight:700;margin-bottom:.2rem}
.cc-hero-mid .num{font-family:var(--mono);font-size:1.6rem;font-weight:900;color:var(--hc);line-height:1.15}
.cc-hero-mid .pct{font-family:var(--mono);font-size:.85rem;color:var(--slate);font-weight:700;margin-top:.1rem}
/* flex بدل grid: لما تضيق البطاقة وتنزل خانة لسطر جديد تكون في المنتصف (2 فوق + 1 بالمنتصف تحت) */
.cc-hero-grid{display:flex;flex-wrap:wrap;justify-content:center;align-content:flex-start;gap:.6rem;padding:0 .8rem .8rem}
.cc-hero-grid>.cc-hero-item{flex:0 0 106px}
.cc-hero-item{min-width:0;width:106px;min-height:104px;display:flex;flex-direction:column;justify-content:center;border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:.65rem .4rem;text-align:center;background:rgba(255,255,255,.02)}
.cc-hero-item .ico{width:19px;height:19px;margin:0 auto .3rem;color:var(--hc);font-size:1rem;line-height:1}
.cc-hero-item .ico svg{width:100%;height:100%}
.cc-hero-item .lbl{font-size:.7rem;color:var(--slate);font-weight:700;margin-bottom:.35rem;line-height:1.25;min-height:1.6em;display:flex;align-items:center;justify-content:center;overflow-wrap:break-word;word-break:break-word}
.cc-hero-item .val{font-family:var(--mono);font-size:1.25rem;font-weight:900;color:var(--hc)}
.cc-hero-item .pct{font-family:var(--mono);font-size:.68rem;color:var(--slate);margin-top:.12rem}
/* ==================== أعلى الصفحة (يسار): اسم المستخدم + زر تسجيل الخروج (أيقونة التشغيل) ==================== */
.topbar-left{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;justify-content:flex-end}
.user-menu{display:inline-flex;align-items:center;gap:.4rem;flex-shrink:0}
.user-chip{display:inline-flex;align-items:center;gap:.45rem;background:rgba(255,255,255,.06);border:1px solid var(--border);color:var(--ink-strong);height:38px;padding:0 .85rem;border-radius:10px;font-size:.85rem;font-weight:700;max-width:230px;cursor:default;user-select:none;-webkit-user-select:none}
.user-chip .av{font-size:1rem;line-height:1}
.user-chip .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.power-btn{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:10px;background:rgba(248,113,113,.10);border:1px solid rgba(248,113,113,.45);color:var(--red);flex-shrink:0;transition:.18s ease;cursor:pointer}
.power-btn svg{width:18px;height:18px}
.power-btn:hover{background:var(--red);color:#fff;border-color:var(--red);box-shadow:0 0 14px rgba(248,113,113,.45)}
[data-theme="light"] .user-chip{background:var(--surface-2)}
@media(max-width:900px){
  .topbar{flex-wrap:wrap}
  .topbar-left{width:100%;justify-content:flex-start}
}
@media(max-width:640px){
  .user-chip{max-width:170px}
}
/* ==================== فلتر التاريخ في القائمة الجانبية (تحت "متابعة المشروع") ==================== */
.sidebar .side-datefilter{margin:.2rem .8rem 1.2rem;padding:1rem .9rem;border:1px solid rgba(255,255,255,.1);border-radius:12px;background:rgba(255,255,255,.03)}
.sidebar .side-datefilter .sdf-title{display:flex;align-items:center;gap:.4rem;font-size:.85rem;font-weight:800;color:#fff;margin-bottom:.7rem}
.sidebar .side-datefilter label{display:block;font-size:.74rem;color:#7fa8bb;font-weight:700;margin:.45rem 0 .25rem}
.sidebar .side-datefilter input[type=date]{width:100%;box-sizing:border-box;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);color:#dceaf1;border-radius:8px;padding:.5rem .6rem;font-family:var(--mono);font-size:.8rem;color-scheme:dark}
.sidebar .side-datefilter input[type=date]:focus{outline:none;border-color:var(--teal-bright)}
.sidebar .side-datefilter .sdf-actions{display:flex;gap:.4rem;margin-top:.8rem}
.sidebar .side-datefilter .sdf-apply{flex:1;background:linear-gradient(135deg,var(--teal),var(--purple) 130%);color:#04141c;border:none;border-radius:8px;padding:.5rem;font-family:inherit;font-weight:800;font-size:.8rem;cursor:pointer}
.sidebar .side-datefilter .sdf-clear{flex:1;text-align:center;border:1px solid var(--teal-bright);color:var(--teal-bright);border-radius:8px;padding:.45rem;font-weight:700;font-size:.8rem}
.sidebar .side-datefilter .sdf-active{font-size:.72rem;color:#7fa8bb;margin-top:.6rem;line-height:1.5}
/* ==================== فلتر تواريخ توزيع التسربات ==================== */
.cc-dist-filter{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:10px;padding:.6rem .8rem;margin-bottom:.8rem}
.cc-dist-filter label{font-size:.75rem;color:var(--slate);font-weight:700}
.cc-dist-filter input[type=date],.cc-dist-filter select{background:rgba(255,255,255,.05);border:1px solid var(--border);color:var(--ink);border-radius:8px;padding:.4rem .6rem;font-family:var(--mono);font-size:.76rem}
.cc-dist-filter .cc-clearbtn{padding:.4rem .8rem}
.cc-dist-note{font-size:.72rem;color:var(--slate);width:100%}
#ccDistSec{scroll-margin-top:110px}
#map{isolation:isolate}


/* =====================================================================
   هوية "الخزّان" — مياه عميقة + لمسات نحاسية (صمامات وعدادات الشبكة)
   طبقة شكل فقط فوق التصميم الأصلي: لا تغيّر أي بيانات أو تقسيم أو وظيفة.
   ===================================================================== */
:root{
  --abyss:#041219; --reservoir:#0a2a36; --current:#34c6cf; --current-bright:#7fe3e8;
  --brass:#d6a650; --brass-light:#f2d48f; --brass-deep:#9a6f24;
  --rose:#34c6cf; --rose-dark:#1ea4ae; --rose-light:rgba(52,198,207,.14);
  --teal:#34c6cf; --teal-bright:#7fe3e8;
  --bg:#041219; --card:rgba(12,44,58,.55); --border:rgba(127,227,232,.11);
  --ink:#d9e9eb; --ink-strong:#f7fcfc; --slate:#83a2aa;
  --surface-1:rgba(127,227,232,.035); --surface-2:rgba(127,227,232,.06); --surface-3:rgba(127,227,232,.10);
  --modal-bg:rgba(6,26,35,.95); --thead-fg:#f2d48f;
  --display:'Alexandria','IBM Plex Sans Arabic',Arial,sans-serif;
  --mono:'Alexandria','IBM Plex Sans Arabic',Arial,sans-serif;
  --lift:inset 0 1px 0 rgba(255,255,255,.06), 0 1px 0 rgba(0,0,0,.35), 0 22px 44px -24px rgba(0,0,0,.85);
  --lift-hi:inset 0 1px 0 rgba(255,255,255,.09), 0 2px 0 rgba(0,0,0,.35), 0 34px 60px -28px rgba(0,0,0,.95), 0 0 0 1px rgba(127,227,232,.16);
  --shadow-sm:var(--lift);
  --shadow-md:0 18px 40px -18px rgba(0,0,0,.8);
  --shadow-lg:0 40px 90px -30px rgba(0,0,0,.9);
  --scrollbar-track:rgba(127,227,232,.04); --scrollbar-thumb:rgba(127,227,232,.22);
  --sheen:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,0) 42%);
}
:root[data-theme="light"]{
  --current:#0f8f9b; --current-bright:#13a3b0; --brass:#a8761f; --brass-light:#c99a45; --brass-deep:#7c5512;
  --rose:#0f8f9b; --rose-dark:#0b7480; --rose-light:rgba(15,143,155,.12);
  --teal:#0f8f9b; --teal-bright:#13a3b0;
  --bg:#e8f1f2; --card:rgba(255,255,255,.80); --border:rgba(8,52,66,.12);
  --ink:#17343d; --ink-strong:#06232c; --slate:#58777f;
  --surface-1:rgba(8,52,66,.03); --surface-2:rgba(8,52,66,.05); --surface-3:rgba(8,52,66,.085);
  --modal-bg:rgba(255,255,255,.97); --thead-fg:#7c5512;
  --lift:inset 0 1px 0 rgba(255,255,255,.9), 0 1px 0 rgba(8,52,66,.06), 0 18px 36px -22px rgba(8,52,66,.35);
  --lift-hi:inset 0 1px 0 #fff, 0 2px 0 rgba(8,52,66,.06), 0 30px 54px -26px rgba(8,52,66,.45), 0 0 0 1px rgba(15,143,155,.22);
  --shadow-md:0 18px 40px -20px rgba(8,52,66,.35); --shadow-lg:0 40px 90px -30px rgba(8,52,66,.45);
  --scrollbar-track:rgba(8,52,66,.05); --scrollbar-thumb:rgba(8,52,66,.22);
  --sheen:linear-gradient(180deg,rgba(255,255,255,.7),rgba(255,255,255,0) 45%);
}

/* ---------- الأساس ---------- */
body{
  font-family:'IBM Plex Sans Arabic',Arial,sans-serif;
  font-feature-settings:"tnum" 1;
  background:
    radial-gradient(900px 520px at 85% -10%, rgba(52,198,207,.16), transparent 62%),
    radial-gradient(700px 480px at 0% 30%, rgba(214,166,80,.06), transparent 60%),
    linear-gradient(180deg,#03101a 0%,#05202b 55%,#041821 100%);
  background-attachment:fixed;
}
[data-theme="light"] body{
  background:
    radial-gradient(900px 520px at 85% -10%, rgba(15,143,155,.14), transparent 62%),
    radial-gradient(700px 480px at 0% 30%, rgba(168,118,31,.07), transparent 60%),
    linear-gradient(180deg,#e3eeef 0%,#eef5f5 60%,#e6f0f1 100%);
  background-attachment:fixed;
}
#aqua3d{position:fixed;inset:0;z-index:0;pointer-events:none}
.app{position:relative;z-index:1}
h1,h2,h3,h4,h5,.cc-title,.pi-name,.rc-head h2{font-family:var(--display);letter-spacing:0}
:focus-visible{outline:2px solid var(--brass);outline-offset:2px}

/* ---------- القائمة الجانبية ---------- */
.sidebar{
  width:256px;
  background:
    radial-gradient(320px 260px at 50% 0%, rgba(52,198,207,.16), transparent 70%),
    linear-gradient(180deg,#041620 0%,#072632 55%,#0a2f3d 100%);
  border-left:1px solid rgba(214,166,80,.22);
  box-shadow:-24px 0 60px -30px rgba(0,0,0,.8);
}
.sidebar .brand{
  font-family:var(--display);font-weight:800;font-size:1.08rem;line-height:1.5;
  padding:1.8rem 1.4rem 1.4rem;align-items:flex-start;border-bottom:1px solid rgba(127,227,232,.08);
}
.sidebar .brand::before{
  content:'';width:40px;height:40px;margin-bottom:.7rem;
  border-radius:50% 0 50% 50%;transform:rotate(-45deg);
  background:radial-gradient(circle at 34% 30%, #e9fcfd 0 8%, #7fe3e8 22%, #1ea4ae 58%, #0b4d58 100%);
  box-shadow:inset -4px -6px 10px rgba(0,0,0,.35), inset 3px 3px 6px rgba(255,255,255,.35), 0 10px 22px -6px rgba(52,198,207,.55), 0 0 0 1px rgba(214,166,80,.5);
}
.sidebar .brand::after{width:44px;height:2px;background:linear-gradient(90deg,var(--brass),transparent);box-shadow:none}
.sidebar nav{padding:1rem .8rem}
.sidebar nav a{color:#a6c2c8;font-weight:500;font-size:.95rem;border-radius:12px;padding:.75rem 1.05rem;transition:background .18s,color .18s}
.sidebar nav a:hover{background:rgba(127,227,232,.06);color:#fff}
.sidebar nav a.active{
  color:#fff;font-weight:700;
  background:linear-gradient(270deg,rgba(52,198,207,.2),rgba(52,198,207,.04));
  box-shadow:inset -3px 0 0 var(--brass), inset 0 1px 0 rgba(255,255,255,.06), 0 10px 24px -14px rgba(52,198,207,.6);
}
.sidebar .side-datefilter{border-color:rgba(214,166,80,.22);background:rgba(2,14,20,.35);box-shadow:inset 0 2px 6px rgba(0,0,0,.3)}
.sidebar .side-datefilter .sdf-apply{background:linear-gradient(180deg,#4fd6de,#1e9fa9);color:#03222a;box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 3px 0 #0c6b73}
.sidebar .side-datefilter .sdf-clear{border-color:rgba(214,166,80,.6);color:var(--brass-light)}

/* ---------- الشريط العلوي ---------- */
.topbar{
  background:rgba(4,18,25,.62);backdrop-filter:blur(22px) saturate(140%);-webkit-backdrop-filter:blur(22px) saturate(140%);
  border-bottom:1px solid var(--border);box-shadow:0 18px 40px -30px rgba(0,0,0,.9);padding:1.15rem 1.8rem;
}
.topbar::after{content:'';position:absolute;inset-inline:0;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,rgba(214,166,80,.55) 30%,rgba(127,227,232,.5) 70%,transparent)}
[data-theme="light"] .topbar{background:rgba(247,251,251,.72)}
.topbar h1{font-family:var(--display);font-weight:800;font-size:1.5rem}
.theme-toggle,.menu-toggle,.user-chip,.power-btn{border-radius:12px}
.theme-toggle,.user-chip{background:var(--surface-2);box-shadow:var(--lift)}
.lang-switch a{border-radius:10px !important}

/* ---------- البطاقات: ألواح زجاجية بعمق ثلاثي الأبعاد ---------- */
.card,.cc-wrap,.pi-wrap,.cc-card,.stat-card,.cc-kpi,.target-card,.stage-card,.cc-stat-card,.cc-hero-card,.rc-q{
  background:var(--sheen),var(--card);
  box-shadow:var(--lift);
  backdrop-filter:blur(18px) saturate(130%);-webkit-backdrop-filter:blur(18px) saturate(130%);
}
.card,.cc-wrap,.pi-wrap{border-radius:22px}
.cc-card,.stat-card,.cc-kpi,.target-card,.stage-card,.rc-q{border-radius:18px}
.stat-card:hover,.cc-kpi.clickable:hover,.target-card:hover,.stage-card:hover{box-shadow:var(--lift-hi);border-color:rgba(127,227,232,.28)}
.tilt3d{transform-style:preserve-3d;will-change:transform;transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .25s ease}
.tilt3d.tilting{transition:transform .08s linear,box-shadow .25s ease}

.card h3{font-family:var(--display);font-weight:700;font-size:1.08rem}
.card h3::before{
  width:9px;height:9px;border-radius:2px;transform:rotate(45deg);
  background:linear-gradient(135deg,var(--brass-light),var(--brass-deep));
  box-shadow:0 0 0 3px rgba(214,166,80,.14);
}
.cc-section-title{font-family:var(--display);font-weight:700;border-bottom:1px solid rgba(214,166,80,.28)}
.cc-hero-head{background:rgba(127,227,232,.04)}
.cc-hero-item{border-radius:14px;background:var(--surface-1);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.cc-mark{border-radius:12px;background:linear-gradient(160deg,#7fe3e8,#1ea4ae 55%,#0b4d58);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 4px 0 #0b4d58,0 12px 22px -8px rgba(52,198,207,.6)}
.stage-card .sc-no,.cc-rank-num{background:linear-gradient(160deg,var(--brass-light),var(--brass-deep));color:#2a1a02}

/* الأرقام الكبيرة */
.stat-card .val,.cc-kpi .v,.target-card .tc-actual,.stage-card .sc-val,.cc-hero-mid .num,.cc-stat-val,.rc-q-num,.rc-lane-fig b{
  font-family:var(--display);font-weight:700;letter-spacing:-.01em;
}

/* ---------- الجداول ---------- */
.table-wrap{border-radius:16px;box-shadow:inset 0 1px 0 rgba(255,255,255,.03)}
thead th{
  background:rgba(5,28,37,.94);color:var(--thead-fg);font-family:'IBM Plex Sans Arabic',Arial,sans-serif;font-weight:600;
  border-bottom:1px solid rgba(214,166,80,.38);
}
[data-theme="light"] thead th{background:#e2eeef}
tbody td{font-size:.86rem}
tbody tr{transition:background .15s}
tbody tr:hover{background:rgba(52,198,207,.09)}

/* ---------- الأزرار: بارزة كأنها مفاتيح حقيقية ---------- */
.btn{border-radius:12px;font-weight:600;transition:transform .12s ease,box-shadow .12s ease,filter .15s}
.btn:active{transform:translateY(3px)}
.btn-navy{background:linear-gradient(180deg,#52d8e0,#1e9fa9);color:#03222a;box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -2px 0 rgba(0,0,0,.15),0 4px 0 #0c6b73,0 14px 24px -12px rgba(52,198,207,.7)}
.btn-navy:hover{transform:translateY(-1px);filter:brightness(1.06);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -2px 0 rgba(0,0,0,.15),0 5px 0 #0c6b73,0 18px 28px -12px rgba(52,198,207,.8)}
.btn-navy:active{box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 1px 0 #0c6b73}
.btn-green{background:linear-gradient(180deg,#4ade80,#16a34a);color:#03200f;box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 4px 0 #0f6b33}
.btn-danger{background:linear-gradient(180deg,#f87171,#dc2626);color:#2a0605;box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 4px 0 #8f1717}
.btn-green:active,.btn-danger:active{box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 1px 0 rgba(0,0,0,.4)}
.btn-outline{background:var(--surface-2);border:1px solid var(--border);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 3px 0 rgba(0,0,0,.28)}
.btn-outline:hover{border-color:var(--brass)}
[data-theme="light"] .btn-outline{background:#fff;box-shadow:inset 0 1px 0 #fff,0 3px 0 rgba(8,52,66,.12)}
.btn-sm{border-radius:10px}

/* ---------- الحقول: محفورة للداخل ---------- */
.filters input,.filters select,.form-group input,.form-group select,.form-group textarea,.cc-filterbar input[type=date],.cc-dist-filter input[type=date],.cc-dist-filter select{
  border-radius:11px;background:rgba(2,14,20,.45);box-shadow:inset 0 2px 5px rgba(0,0,0,.35);
}
[data-theme="light"] .filters input,[data-theme="light"] .filters select,[data-theme="light"] .form-group input,[data-theme="light"] .form-group select,[data-theme="light"] .form-group textarea{background:#fff;box-shadow:inset 0 1px 3px rgba(8,52,66,.1)}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--current);box-shadow:inset 0 2px 5px rgba(0,0,0,.25),0 0 0 3px rgba(52,198,207,.18)}

/* ---------- التبويبات: مجرى محفور وزر مرفوع ---------- */
.sec-tabs{
  width:fit-content;max-width:100%;border:1px solid var(--border);border-radius:16px;padding:.35rem;gap:.3rem;margin-bottom:1.3rem;
  background:rgba(2,14,20,.35);box-shadow:inset 0 2px 6px rgba(0,0,0,.35);
}
[data-theme="light"] .sec-tabs{background:rgba(8,52,66,.05);box-shadow:inset 0 1px 3px rgba(8,52,66,.12)}
.sec-tab{border:0;border-radius:12px;padding:.58rem 1.1rem;font-weight:600;transition:color .15s,background .15s}
.sec-tab:hover{color:var(--ink-strong)}
.sec-tab.active{
  color:var(--ink-strong);border-bottom:0;
  background:var(--sheen),rgba(52,198,207,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 2px 0 rgba(0,0,0,.3),0 10px 20px -12px rgba(52,198,207,.7),inset 0 -2px 0 var(--brass);
}
[data-theme="light"] .sec-tab.active{background:#fff;box-shadow:0 2px 0 rgba(8,52,66,.1),0 8px 18px -10px rgba(15,143,155,.5),inset 0 -2px 0 var(--brass)}
.sub-tabs{border-radius:14px;background:rgba(2,14,20,.3);box-shadow:inset 0 2px 5px rgba(0,0,0,.3)}
.sub-tab{border-radius:10px}
.sub-tab.active,.filter-pill.active{background:linear-gradient(180deg,#52d8e0,#1e9fa9);color:#03222a;box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 3px 0 #0c6b73}
.filter-pill,.tag-link{border-radius:12px}
.cc-tab.active{border-bottom-color:var(--brass)}

/* ---------- الشارات والنوافذ ---------- */
.badge{border-radius:9px;font-weight:600;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 1px 0 rgba(0,0,0,.25)}
.modal-bg{background:rgba(1,8,12,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.modal{border-radius:24px;border-top:3px solid var(--brass);box-shadow:var(--shadow-lg),inset 0 1px 0 rgba(255,255,255,.06)}
.modal-bg.open .modal{animation:aquaRise .35s cubic-bezier(.2,.8,.2,1)}
@keyframes aquaRise{from{opacity:0;transform:perspective(900px) rotateX(8deg) translateY(18px)}to{opacity:1;transform:none}}
.flash{border-radius:14px;box-shadow:var(--lift)}
.hint-box{border-radius:12px}
.pi-progress-track{background:rgba(2,14,20,.45);box-shadow:inset 0 2px 4px rgba(0,0,0,.4)}
[data-theme="light"] .pi-progress-track{background:rgba(8,52,66,.07);box-shadow:inset 0 1px 3px rgba(8,52,66,.15)}
.pi-progress-fill{background:linear-gradient(90deg,var(--current),var(--brass-light))}


/* ===================== الحركة ثلاثية الأبعاد ===================== */
/* دخول البطاقات من العمق */
.aq-motion .aq-wait{opacity:0}
.aq-rise{animation:aqRise3d .85s cubic-bezier(.16,.84,.24,1) both;animation-delay:var(--aq-d,0ms);transform-origin:50% 100%}
@keyframes aqRise3d{
  0%{opacity:0;transform:perspective(1200px) translateY(46px) translateZ(-140px) rotateX(18deg)}
  60%{opacity:1}
  100%{opacity:1;transform:none}
}
/* انعكاس الضوء الذي يتبع الماوس على البطاقة المائلة */
.tilt3d{position:relative}
.tilt3d::after{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%), rgba(255,255,255,.13), rgba(127,227,232,.05) 30%, transparent 55%);
  opacity:0;transition:opacity .35s ease;mix-blend-mode:screen;
}
[data-theme="light"] .tilt3d::after{background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%), rgba(255,255,255,.85), transparent 50%);mix-blend-mode:normal}
.tilt3d.tilting::after{opacity:1}
.rc-team.tilt3d{transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .25s,border-color .15s}

/* موجة الضغط */
.aq-ripple-host{position:relative;overflow:hidden;isolation:isolate}
.aq-ripple{position:absolute;border-radius:50%;pointer-events:none;z-index:-1;
  background:radial-gradient(circle, rgba(255,255,255,.45) 0 10%, rgba(127,227,232,.28) 35%, transparent 62%);
  transform:scale(0);animation:aqRipple .7s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes aqRipple{to{transform:scale(1);opacity:0}}

/* القطرة في القائمة الجانبية تطفو وتلمع */
.aq-motion .sidebar .brand::before{animation:aqDrop 4.5s ease-in-out infinite}
@keyframes aqDrop{
  0%,100%{transform:translateY(0) rotate(-45deg);filter:brightness(1)}
  50%{transform:translateY(-6px) rotate(-45deg);filter:brightness(1.18)}
}
/* حلقات تموّج تحت القطرة */
.sidebar .brand{overflow:visible}
.aq-motion .sidebar .brand::after{animation:aqLine 4.5s ease-in-out infinite;transform-origin:right}
@keyframes aqLine{0%,100%{transform:scaleX(1);opacity:1}50%{transform:scaleX(1.6);opacity:.55}}

/* روابط القائمة: تتقدّم للأمام بالعمق */
.aq-motion .sidebar nav a{transition:background .18s,color .18s,transform .25s cubic-bezier(.2,.8,.2,1)}
.aq-motion .sidebar nav a:hover{transform:perspective(500px) translateX(-5px) rotateY(-6deg)}

/* عنوان الصفحة بارز بعمق خفيف */
.topbar h1{text-shadow:0 1px 0 rgba(0,0,0,.35),0 2px 0 rgba(0,0,0,.25),0 3px 0 rgba(0,0,0,.15),0 10px 22px rgba(52,198,207,.25)}
[data-theme="light"] .topbar h1{text-shadow:0 1px 0 rgba(255,255,255,.9),0 8px 18px rgba(15,143,155,.2)}
.aq-motion .topbar h1{animation:aqTitle .9s cubic-bezier(.16,.84,.24,1) both}
@keyframes aqTitle{from{opacity:0;transform:perspective(600px) rotateX(-55deg) translateY(-8px)}to{opacity:1;transform:none}}

/* صفوف الجداول: خط نحاسي يظهر عند المرور */
tbody tr:hover td:first-child{box-shadow:inset -3px 0 0 var(--brass)}

/* التبويب المختار يضغط للداخل عند الضغط */
.aq-motion .sec-tab{transition:color .15s,background .15s,transform .15s}
.aq-motion .sec-tab:active{transform:translateY(2px) scale(.98)}

/* أشرطة التقدّم: لمعة ماء تتحرك داخلها */
.pi-progress-fill,.rc-fill{position:relative;overflow:hidden}
.aq-motion .pi-progress-fill::after,.aq-motion .rc-fill::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);
  background-size:220% 100%;animation:aqShine 3.2s ease-in-out infinite;
}
@keyframes aqShine{0%{background-position:120% 0}60%,100%{background-position:-120% 0}}

/* انتقال ثلاثي الأبعاد بين الصفحات (المتصفحات الحديثة) */
@view-transition{navigation:auto}
::view-transition-old(root){animation:aqPageOut .32s cubic-bezier(.4,0,1,1) both}
::view-transition-new(root){animation:aqPageIn .45s cubic-bezier(.16,.84,.24,1) both}
@keyframes aqPageOut{to{opacity:0;transform:perspective(1400px) translateZ(-120px) rotateY(6deg)}}
@keyframes aqPageIn{from{opacity:0;transform:perspective(1400px) translateZ(-120px) rotateY(-6deg)}}
@media (prefers-reduced-motion:reduce){
  .tilt3d,.modal-bg.open .modal,.aq-rise,.topbar h1,.sidebar .brand::before,.sidebar .brand::after{transition:none !important;animation:none !important;transform:none !important}
  .sidebar .brand::before{transform:rotate(-45deg) !important}
  .aq-wait{opacity:1 !important}
  ::view-transition-old(root),::view-transition-new(root){animation:none !important}
}
@media(max-width:900px){.sidebar{right:-280px}.sidebar.open{right:0}}