/* ============================================================
   أنماطُ المظهر — يختارها كلُّ شخصٍ من «حسابي ← المظهر».
   الاختيارُ في هذا الجهاز وحده (localStorage «fl:skin»)، ويُكتب
   على <html data-skin="sN"> قبل أن يُرسم شيء (index.html).

   المبدأ: لا يتحرّك شيءٌ من مكانه — الأنماطُ تغيّر السطوح فقط:
   الخلفيّة، والبطاقات، والترويسة، والشريط السفليّ، والبطاقة
   الكبرى، وبطاقتي التقارير والتسليم.

   · الأنماطُ الفاتحة (1، 4–10) تعمل والوضعُ الليليّ مطفأ؛ فإن
     شغّله صاحبُه بـ☾ غلبها الليليّ كما هو.
   · الداكنان (2، 3) يعملان فوق الوضع الليليّ نفسِه، فيرثان
     ألوانَ النصوص منه ولا يُعاد تعريفُها هنا.
   · البطاقةُ الكبرى تبقى داكنةَ المحتوى في كلّ نمط — نصُّها
     ورسمُ النبض فيها أبيضان، فيتغيّر سطحُها لا لونُ ما فوقه.
   · جذورُ تقارير PDF خارج النطاق كلّها.
   ============================================================ */

/* ── متغيّراتُ كلّ نمط ── */
html[data-skin="s1"]{
  --k-canvas:
    radial-gradient(75% 45% at 95% 12%, #5FC6E0 0%, transparent 68%),
    radial-gradient(70% 42% at 0% 42%, #F08FA6 0%, transparent 68%),
    radial-gradient(80% 45% at 80% 72%, #7FB2FF 0%, transparent 68%),
    radial-gradient(70% 45% at 5% 98%, #7FD9B0 0%, transparent 68%), #DDE7F3;
  --k-base:#DDE7F3;
  --k-card:rgba(255,255,255,.3); --k-card-bd:1px solid rgba(255,255,255,.7);
  --k-card-sh:inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(255,255,255,.3), 0 12px 30px -14px rgba(20,40,80,.35);
  --k-blur:blur(22px) saturate(1.8); --k-r:24px;
  --k-hdr:rgba(255,255,255,.5); --k-hdr-bd:rgba(255,255,255,.8); --k-inset:rgba(255,255,255,.45);
  --k-hbar:rgba(15,30,61,.78);
  --k-hero:linear-gradient(160deg, rgba(16,38,78,.86), rgba(27,95,114,.8));
  --k-nav:rgba(255,255,255,.45); --k-nav-bd:1px solid rgba(255,255,255,.85);
  --k-nav-sh:inset 0 1px 0 #fff, 0 12px 30px -12px rgba(20,40,80,.4); --k-nav-blur:blur(20px) saturate(1.8);
  --k-rp:rgba(230,246,250,.38); --k-hv:rgba(253,232,237,.38);
}
html[data-skin="s2"]{
  --k-canvas:
    radial-gradient(80% 45% at 90% 8%, rgba(46,160,190,.75) 0%, transparent 70%),
    radial-gradient(70% 45% at 0% 55%, rgba(140,52,110,.65) 0%, transparent 70%),
    radial-gradient(70% 40% at 80% 95%, rgba(52,120,200,.5) 0%, transparent 70%),
    linear-gradient(180deg, #0E1F3F, #0A1730);
  --k-base:#0A1730;
  --k-card:rgba(255,255,255,.07); --k-card-bd:1px solid rgba(255,255,255,.14);
  --k-card-sh:inset 0 1px 0 rgba(255,255,255,.08), 0 10px 30px -14px rgba(0,0,0,.6);
  --k-blur:blur(18px) saturate(1.3); --k-r:22px;
  --k-hdr:rgba(10,23,48,.55); --k-hdr-bd:rgba(255,255,255,.1); --k-inset:rgba(255,255,255,.06);
  --k-hbar:rgba(255,255,255,.08);
  --k-hero:linear-gradient(160deg, rgba(255,255,255,.1), rgba(46,144,168,.22));
  --k-nav:rgba(20,34,62,.6); --k-nav-bd:1px solid rgba(255,255,255,.14);
  --k-nav-sh:0 12px 30px -12px rgba(0,0,0,.6); --k-nav-blur:blur(18px) saturate(1.3);
  --k-rp:rgba(95,208,230,.12); --k-hv:rgba(255,107,129,.12);
}
html[data-skin="s3"]{
  --k-canvas:linear-gradient(180deg, #060B16, #0B1426); --k-base:#060B16;
  --k-card:#0F1A2E; --k-card-bd:1px solid #1C2A44; --k-card-sh:none; --k-blur:none; --k-r:18px;
  --k-hdr:#0A1222; --k-hdr-bd:#172238; --k-inset:#0F1A2E; --k-hbar:#0F1A2E;
  --k-hero:linear-gradient(160deg, #0F1A2E, #12324A);
  --k-nav:rgba(15,26,46,.94); --k-nav-bd:1px solid #1C2A44; --k-nav-sh:none; --k-nav-blur:none;
  --k-rp:#0F2533; --k-hv:#2A1320;
}
html[data-skin="s4"]{
  --k-canvas:#E6EBF1; --k-base:#E6EBF1;
  --k-card:#E6EBF1; --k-card-bd:0 solid transparent; --k-card-sh:8px 8px 18px #C6CFDA, -8px -8px 18px #FFFFFF;
  --k-blur:none; --k-r:22px;
  --k-hdr:#E6EBF1; --k-hdr-bd:transparent; --k-inset:#E6EBF1; --k-hbar:#1B3552;
  --k-hero:linear-gradient(160deg, #173B6B, #1B5F72);
  --k-nav:#E6EBF1; --k-nav-bd:0 solid transparent; --k-nav-sh:8px 8px 18px #C6CFDA, -8px -8px 18px #FFFFFF; --k-nav-blur:none;
  --k-rp:#E6EBF1; --k-hv:#E6EBF1;
}
html[data-skin="s5"]{
  --k-canvas:#EEF1F8; --k-base:#EEF1F8;
  --k-card:#FFFFFF; --k-card-bd:0 solid transparent;
  --k-card-sh:0 14px 28px -12px rgba(46,90,160,.3), inset 0 -6px 12px rgba(46,90,160,.07), inset 0 4px 8px rgba(255,255,255,.9);
  --k-blur:none; --k-r:26px;
  --k-hdr:#FFFFFF; --k-hdr-bd:transparent; --k-inset:#EEF1F8; --k-hbar:#1F5E8A;
  --k-hero:linear-gradient(160deg, #3A8FB0, #1F5E8A);
  --k-nav:#FFFFFF; --k-nav-bd:0 solid transparent; --k-nav-sh:0 16px 30px -12px rgba(46,90,160,.4); --k-nav-blur:none;
  --k-rp:#DDF2F8; --k-hv:#FDE2E7;
}
html[data-skin="s6"]{
  --k-canvas:#FFFFFF; --k-base:#FFFFFF;
  --k-card:#FFFFFF; --k-card-bd:1px solid #E8ECF1; --k-card-sh:none; --k-blur:none; --k-r:14px;
  --k-hdr:#FFFFFF; --k-hdr-bd:#EEF1F5; --k-inset:#F6F8FA; --k-hbar:#0F1E3D;
  --k-hero:#10264E;
  --k-nav:#FFFFFF; --k-nav-bd:1px solid #E8ECF1; --k-nav-sh:0 6px 20px -10px rgba(15,30,61,.2); --k-nav-blur:none;
  --k-rp:#F6F8FA; --k-hv:#F6F8FA;
}
html[data-skin="s7"]{
  --k-canvas:linear-gradient(170deg, #DCEFF5 0%, #F3E4F0 45%, #FDF0E4 100%); --k-base:#F3E4F0;
  --k-card:rgba(255,255,255,.8); --k-card-bd:1px solid rgba(255,255,255,.95);
  --k-card-sh:0 8px 24px -14px rgba(90,60,120,.3); --k-blur:blur(10px); --k-r:22px;
  --k-hdr:rgba(255,255,255,.7); --k-hdr-bd:rgba(255,255,255,.9); --k-inset:rgba(255,255,255,.6); --k-hbar:#3D3F8F;
  --k-hero:linear-gradient(135deg, #1B5F72 0%, #3D3F8F 55%, #8E2F5E 100%);
  --k-nav:rgba(255,255,255,.8); --k-nav-bd:1px solid rgba(255,255,255,.95); --k-nav-sh:0 12px 30px -14px rgba(90,60,120,.4); --k-nav-blur:blur(14px);
  --k-rp:rgba(255,255,255,.72); --k-hv:rgba(255,255,255,.72);
}
html[data-skin="s8"]{
  --k-canvas:#F4FAFB; --k-base:#F4FAFB;
  --k-card:#E3F1F4; --k-card-bd:0 solid transparent; --k-card-sh:none; --k-blur:none; --k-r:26px;
  --k-hdr:#F4FAFB; --k-hdr-bd:transparent; --k-inset:#E3F1F4; --k-hbar:#1B5F72;
  --k-hero:linear-gradient(160deg, #0E4B5A, #1B5F72);
  --k-nav:#DCEEF2; --k-nav-bd:0 solid transparent; --k-nav-sh:none; --k-nav-blur:none;
  --k-rp:#D2ECF2; --k-hv:#FBE1E4;
}
html[data-skin="s9"]{
  --k-canvas:#F7F8FA; --k-base:#F7F8FA;
  --k-card:#FFFFFF; --k-card-bd:1px solid #DDE2E9; --k-card-sh:none; --k-blur:none; --k-r:10px;
  --k-hdr:#FFFFFF; --k-hdr-bd:#DDE2E9; --k-inset:#F7F8FA; --k-hbar:#0F1E3D;
  --k-hero:#0F1E3D;
  --k-nav:#FFFFFF; --k-nav-bd:1px solid #DDE2E9; --k-nav-sh:none; --k-nav-blur:none;
  --k-rp:#FFFFFF; --k-hv:#FFFFFF;
}
html[data-skin="s10"]{
  --k-canvas:#EEF1F6; --k-base:#EEF1F6;
  --k-card:#FFFFFF; --k-card-bd:0 solid transparent; --k-card-sh:0 2px 0 #D3DAE5; --k-blur:none; --k-r:16px;
  --k-hdr:#FFFFFF; --k-hdr-bd:#E1E6EE; --k-inset:#EEF1F6; --k-hbar:#0F1E3D;
  --k-hero:#0F1E3D;
  --k-nav:#FFFFFF; --k-nav-bd:0 solid transparent; --k-nav-sh:0 10px 30px -10px rgba(15,30,61,.35); --k-nav-blur:none;
  --k-rp:#0F1E3D; --k-hv:#C41E3A;
}

/* ── التطبيق: فاتحةٌ والليليُّ مطفأ، أو داكنةٌ والليليُّ مشغّل ── */
:is(html:not(.night):is([data-skin="s1"],[data-skin="s4"],[data-skin="s5"],[data-skin="s6"],[data-skin="s7"],[data-skin="s8"],[data-skin="s9"],[data-skin="s10"]),
    html.night:is([data-skin="s2"],[data-skin="s3"])){
  background:var(--k-base) !important;
}
/* الجسمُ شفّاف، وإلّا غطّى طبقةَ الألوان (body::before) التي تحته */
:is(html:not(.night):is([data-skin="s1"],[data-skin="s4"],[data-skin="s5"],[data-skin="s6"],[data-skin="s7"],[data-skin="s8"],[data-skin="s9"],[data-skin="s10"]),
    html.night:is([data-skin="s2"],[data-skin="s3"])) body{
  background:transparent !important;
}
:is(html:not(.night):is([data-skin="s1"],[data-skin="s4"],[data-skin="s5"],[data-skin="s6"],[data-skin="s7"],[data-skin="s8"],[data-skin="s9"],[data-skin="s10"]),
    html.night:is([data-skin="s2"],[data-skin="s3"])) body::before{
  background:var(--k-canvas) !important;
}
:is(html:not(.night):is([data-skin="s1"],[data-skin="s4"],[data-skin="s5"],[data-skin="s6"],[data-skin="s7"],[data-skin="s8"],[data-skin="s9"],[data-skin="s10"]),
    html.night:is([data-skin="s2"],[data-skin="s3"])) #root :is(.min-h-screen, main[data-tab]){
  background:transparent !important; background-image:none !important;
}

/* الترويسة */
:is(html:not(.night):is([data-skin="s1"],[data-skin="s4"],[data-skin="s5"],[data-skin="s6"],[data-skin="s7"],[data-skin="s8"],[data-skin="s9"],[data-skin="s10"]),
    html.night:is([data-skin="s2"],[data-skin="s3"])) #root header{
  background:var(--k-hdr) !important; border-color:var(--k-hdr-bd) !important;
  -webkit-backdrop-filter:var(--k-blur); backdrop-filter:var(--k-blur);
}
:is(html:not(.night):is([data-skin="s1"],[data-skin="s4"],[data-skin="s5"],[data-skin="s6"],[data-skin="s7"],[data-skin="s8"],[data-skin="s9"],[data-skin="s10"]),
    html.night:is([data-skin="s2"],[data-skin="s3"])) #root header > div:nth-child(2){
  background:var(--k-inset) !important;
}
:is(html:not(.night):is([data-skin="s1"],[data-skin="s4"],[data-skin="s5"],[data-skin="s6"],[data-skin="s7"],[data-skin="s8"],[data-skin="s9"],[data-skin="s10"]),
    html.night:is([data-skin="s2"],[data-skin="s3"])) #root .fl-hbar{
  background:var(--k-hbar) !important;
  -webkit-backdrop-filter:var(--k-blur); backdrop-filter:var(--k-blur);
}

/* البطاقات: الأبعدُ وحده (لا ما داخل بطاقة)، ولا ما يطفو فوق الصفحة */
:is(html:not(.night):is([data-skin="s1"],[data-skin="s4"],[data-skin="s5"],[data-skin="s6"],[data-skin="s7"],[data-skin="s8"],[data-skin="s9"],[data-skin="s10"]),
    html.night:is([data-skin="s2"],[data-skin="s3"])) #root main :is(.bg-white, [style*="background: rgb(255, 255, 255)"], [data-tile], .rounded-3xl.overflow-hidden):not(:is(.bg-white, [style*="background: rgb(255, 255, 255)"], [data-tile], .rounded-3xl, .fixed, [style*="position: fixed"]) *):not(.fixed, [style*="position: fixed"], input, select, textarea, canvas, img, [data-repbanner]):not(:is(#fleet-print-root, #period-print-root, #loc-print-root, #emb-print-root) *){
  background:var(--k-card) !important;
  border:var(--k-card-bd) !important;
  box-shadow:var(--k-card-sh) !important;
  border-radius:var(--k-r) !important;
  -webkit-backdrop-filter:var(--k-blur); backdrop-filter:var(--k-blur);
}
/* البطاقةُ الكبرى في اللوحة: سطحُها بلون النمط، ومحتواها كما هو */
:is(html:not(.night):is([data-skin="s1"],[data-skin="s4"],[data-skin="s5"],[data-skin="s6"],[data-skin="s7"],[data-skin="s8"],[data-skin="s9"],[data-skin="s10"]),
    html.night:is([data-skin="s2"],[data-skin="s3"])) #root main .rounded-3xl.overflow-hidden > div:has(> .fl-ecg){
  background:var(--k-hero) !important;
}
:is(html:not(.night):is([data-skin="s1"],[data-skin="s4"],[data-skin="s5"],[data-skin="s6"],[data-skin="s7"],[data-skin="s8"],[data-skin="s9"],[data-skin="s10"]),
    html.night:is([data-skin="s2"],[data-skin="s3"])) #root main .rounded-3xl.overflow-hidden > .p-4 > button:first-child{
  background:var(--k-inset) !important;
}
/* التقارير ونموذجُ التسليم */
:is(html:not(.night):is([data-skin="s1"],[data-skin="s4"],[data-skin="s5"],[data-skin="s6"],[data-skin="s7"],[data-skin="s8"],[data-skin="s9"],[data-skin="s10"]),
    html.night:is([data-skin="s2"],[data-skin="s3"])) #root main[data-tab] [data-repbanner][data-repbanner]{
  background:var(--k-rp) !important;
}
:is(html:not(.night):is([data-skin="s1"],[data-skin="s4"],[data-skin="s5"],[data-skin="s6"],[data-skin="s7"],[data-skin="s8"],[data-skin="s9"],[data-skin="s10"]),
    html.night:is([data-skin="s2"],[data-skin="s3"])) #root main[data-tab] [data-repbanner][data-repbanner][data-embform]{
  background:var(--k-hv) !important;
}
/* الشريط السفليّ */
:is(html:not(.night):is([data-skin="s1"],[data-skin="s4"],[data-skin="s5"],[data-skin="s6"],[data-skin="s7"],[data-skin="s8"],[data-skin="s9"],[data-skin="s10"]),
    html.night:is([data-skin="s2"],[data-skin="s3"])) #root nav.fixed.bottom-0{
  background:var(--k-nav) !important; border:var(--k-nav-bd) !important; box-shadow:var(--k-nav-sh) !important;
  -webkit-backdrop-filter:var(--k-nav-blur) !important; backdrop-filter:var(--k-nav-blur) !important;
}

/* ── لمساتٌ خاصّة ── */
/* ٤ ناعمٌ بارز: الأيقوناتُ ومبدّلُ الأقسام بارزةٌ من السطح */
html[data-skin="s4"]:not(.night) #root main .fl-bic,
html[data-skin="s4"]:not(.night) #root [data-repbanner] [data-repicon]{
  background-color:#E6EBF1 !important; border-color:transparent !important; box-shadow:4px 4px 9px #C6CFDA, -4px -4px 9px #FFFFFF !important;
}
html[data-skin="s4"]:not(.night) #root main[data-tab] [data-repbanner][data-repbanner]{ box-shadow:8px 8px 18px #C6CFDA, -8px -8px 18px #FFFFFF !important; border-radius:22px !important; }
html[data-skin="s4"]:not(.night) #root main .rounded-3xl.overflow-hidden > div:has(> .fl-ecg){ box-shadow:inset 0 0 0 1px rgba(255,255,255,.06); }
/* ٥ صلصال: الأزرارُ منتفخة */
html[data-skin="s5"]:not(.night) #root main[data-tab] [data-repbanner][data-repbanner]{
  box-shadow:0 14px 26px -14px rgba(46,90,160,.35), inset 0 -6px 12px rgba(46,90,160,.08), inset 0 4px 8px rgba(255,255,255,.9) !important;
  border-radius:26px !important;
}
html[data-skin="s5"]:not(.night) #root main .rounded-3xl.overflow-hidden > div:has(> .fl-ecg){
  box-shadow:inset 0 -10px 18px rgba(0,0,0,.14), inset 0 8px 14px rgba(255,255,255,.18);
}
/* ٩ خطوطٌ رفيعة: حدودٌ بدل الظلال في البطاقتين */
html[data-skin="s9"]:not(.night) #root main[data-tab] [data-repbanner][data-repbanner]{ border:1px solid #DDE2E9 !important; box-shadow:none !important; border-radius:10px !important; }
/* ١٠ كحليٌّ وقرمزيّ: بطاقتا التقارير والتسليم ممتلئتان، ونصُّهما أبيض */
html[data-skin="s10"]:not(.night) #root [data-repbanner] [data-reptitle]{ color:#FFFFFF !important; }
html[data-skin="s10"]:not(.night) #root [data-repbanner] [data-repsub]{ color:rgba(255,255,255,.72) !important; }
html[data-skin="s10"]:not(.night) #root [data-repbanner] [data-repicon]{ background-color:rgba(255,255,255,.92) !important; border-color:transparent !important; }
/* ١ زجاجٌ سائل: الأيقوناتُ الصغيرة زجاجٌ هي أيضاً */
html[data-skin="s1"]:not(.night) #root main .fl-bic,
html[data-skin="s1"]:not(.night) #root [data-repbanner] [data-repicon]{
  background-color:rgba(255,255,255,.62) !important; border-color:rgba(255,255,255,.9) !important; box-shadow:inset 0 1px 0 #fff;
}
html[data-skin="s1"]:not(.night) #root main[data-tab] [data-repbanner][data-repbanner]{
  border:1px solid rgba(255,255,255,.8) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95), 0 12px 30px -14px rgba(20,40,80,.35) !important;
  -webkit-backdrop-filter:blur(22px) saturate(1.8); backdrop-filter:blur(22px) saturate(1.8);
}

/* ── منتقي المظهر في «حسابي» ── */
.fl-skins{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.fl-skin{ display:flex; flex-direction:column; gap:6px; padding:6px; border-radius:14px; border:1.5px solid var(--hairline,#E1E7F0);
  background:var(--surface,#fff); cursor:pointer; font-family:inherit; text-align:center; min-height:44px; }
.fl-skin[aria-pressed="true"]{ border-color:#1B5F72; box-shadow:0 0 0 2px rgba(27,95,114,.25); }
.fl-skin i{ display:block; height:58px; border-radius:10px; position:relative; overflow:hidden; }
.fl-skin i::before{ content:""; position:absolute; inset:8px 8px auto 8px; height:18px; border-radius:6px; background:var(--sw-hero); }
.fl-skin i::after{ content:""; position:absolute; inset:auto 8px 8px 8px; height:20px; border-radius:6px; background:var(--sw-card); border:var(--sw-bd); }
.fl-skin b{ font-size:11.5px; font-weight:800; color:var(--ink,#0F1E3D); line-height:1.35; }
.fl-skin small{ font-size:10.5px; color:var(--muted,#66788F); font-weight:700; }
html.night .fl-skin{ background:rgba(255,255,255,.04); border-color:rgba(148,163,184,.18); }
html.night .fl-skin b{ color:#E8F0FA; } html.night .fl-skin small{ color:#8C9FBA; }
html.night .fl-skin[aria-pressed="true"]{ border-color:#2E90A8; }
@media (prefers-reduced-motion:no-preference){ .fl-skin{ transition:border-color .15s, box-shadow .15s; } }