/* =====================================================
   لمسة لون: ألوان مرافقة مشتقة من لون الهوية (لا إيموجي)
   - أيقونات البطاقات والاختصارات والأرقام بألوان متناسقة
   - نصوص أوضح وأدفأ، وخلفية نهارية ملوّنة بلون الثيم
   - أيقونات القائمة الجانبية لا تتغير
   ===================================================== */

/* ألوان مرافقة: احتياطية ثابتة، ثم مشتقة من لون الهوية في المتصفحات الحديثة */
:root {
  --pop-1: var(--rose);
  --pop-2: #2a9d8f;
  --pop-3: #6c63ff;
  --pop-4: var(--gold);
  --pop-5: #e76f51;
  --pop-6: #3a86ff;
}
@supports (color: oklch(from red l c h)) {
  :root {
    --pop-2: oklch(from var(--rose) .58 max(c, .11) calc(h + 150));
    --pop-3: oklch(from var(--rose) .55 max(c, .14) calc(h - 75));
    --pop-5: oklch(from var(--rose) .64 max(c, .15) calc(h + 45));
    --pop-6: oklch(from var(--rose) .58 max(c, .13) calc(h - 135));
  }
  [data-theme="dark"] {
    --pop-2: oklch(from var(--rose) .78 max(c, .1) calc(h + 150));
    --pop-3: oklch(from var(--rose) .76 max(c, .12) calc(h - 75));
    --pop-5: oklch(from var(--rose) .8 max(c, .13) calc(h + 45));
    --pop-6: oklch(from var(--rose) .78 max(c, .11) calc(h - 135));
  }
}

/* ---------- النصوص: أوضح، وفيها دفء لون الهوية بدل الرمادي ---------- */
html:not([data-theme="dark"]) {
  --ink: color-mix(in srgb, var(--rose) 14%, #16101a);
  --ink-soft: color-mix(in srgb, var(--rose) 34%, #463c46);
}
[data-theme="dark"] {
  --ink-soft: color-mix(in srgb, var(--rose) 28%, #c8bdc5);
}
.page-title {
  background: linear-gradient(90deg, var(--ink) 0%, color-mix(in srgb, var(--rose) 72%, var(--ink)) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent !important;
}
[dir="rtl"] .page-title { background-image: linear-gradient(270deg, var(--ink) 0%, color-mix(in srgb, var(--rose) 72%, var(--ink)) 100%); }
.card > h2, .dh-card h2, .card h2 { color: var(--ink) !important; }

/* ---------- الخلفية النهارية: ألوان الثيم بدل الأبيض ---------- */
html:not([data-theme="dark"]) {
  --bg: color-mix(in srgb, var(--rose) 8%, #fbf7f3);
  --bg-grad:
    radial-gradient(1000px 600px at 94% -16%, color-mix(in srgb, var(--rose) 34%, transparent) 0%, transparent 62%),
    radial-gradient(860px 560px at -8% 106%, color-mix(in srgb, var(--gold) 34%, transparent) 0%, transparent 60%),
    radial-gradient(760px 460px at 38% 52%, color-mix(in srgb, var(--pop-3) 13%, transparent) 0%, transparent 66%),
    radial-gradient(600px 380px at 8% 6%, color-mix(in srgb, var(--pop-2) 12%, transparent) 0%, transparent 64%);
  --card: color-mix(in srgb, var(--rose) 2%, #fffdfb);
  --pop-4: color-mix(in srgb, var(--gold) 76%, #3a2810);
}

/* ---------- أيقونات عناوين البطاقات: مربع ملوّن صغير ---------- */
.card > h2 .ic, .dh-card h2 .ic {
  width: 30px; height: 30px; padding: 6px; border-radius: 9px; flex: none; box-sizing: border-box;
  color: var(--pc, var(--rose)); background: color-mix(in srgb, var(--pc, var(--rose)) 14%, transparent);
}
.card:nth-of-type(5n+2) > h2, .dh-card:nth-of-type(2n) h2 { --pc: var(--pop-2); }
.card:nth-of-type(5n+3) > h2 { --pc: var(--pop-3); }
.card:nth-of-type(5n+4) > h2 { --pc: var(--pop-4); }
.card:nth-of-type(5n) > h2 { --pc: var(--pop-5); }

/* ---------- بطاقات الأرقام: لون لكل بطاقة ---------- */
.dh-kpi, .stat, .kx-kpi { --pc: var(--pop-1); }
.dh-kpi:nth-child(2), .stat:nth-child(2), .kx-kpi:nth-child(2) { --pc: var(--pop-2); }
.dh-kpi:nth-child(3), .stat:nth-child(3), .kx-kpi:nth-child(3) { --pc: var(--pop-3); }
.dh-kpi:nth-child(4), .stat:nth-child(4), .kx-kpi:nth-child(4) { --pc: var(--pop-4); }
.dh-kpi:nth-child(5), .stat:nth-child(5), .kx-kpi:nth-child(5) { --pc: var(--pop-5); }
.dh-kpi, .stat, .kx-kpi {
  background-image: radial-gradient(220px 120px at 100% 0%, color-mix(in srgb, var(--pc) 22%, transparent), transparent 72%) !important;
}
[dir="rtl"] .dh-kpi, [dir="rtl"] .stat, [dir="rtl"] .kx-kpi {
  background-image: radial-gradient(220px 120px at 0% 0%, color-mix(in srgb, var(--pc) 22%, transparent), transparent 72%) !important;
}
.dh-k .ic { width: 22px; height: 22px; padding: 4px; border-radius: 7px; box-sizing: border-box; color: var(--pc); background: color-mix(in srgb, var(--pc) 15%, transparent); }
.dh-kpi::before { background: var(--pc) !important; opacity: .9 !important; }
.dh-kpi.up::before { background: var(--good) !important; } .dh-kpi.down::before { background: var(--danger) !important; }
.stat::before { background: linear-gradient(90deg, var(--pc), color-mix(in srgb, var(--pc) 40%, var(--gold))) !important; }

/* ---------- الاختصارات: أيقونة داخل مربع ملوّن ---------- */
.dh-quick a { --pc: var(--pop-1); }
.dh-quick a:nth-child(6n+2) { --pc: var(--pop-2); }
.dh-quick a:nth-child(6n+3) { --pc: var(--pop-3); }
.dh-quick a:nth-child(6n+4) { --pc: var(--pop-4); }
.dh-quick a:nth-child(6n+5) { --pc: var(--pop-5); }
.dh-quick a:nth-child(6n) { --pc: var(--pop-6); }
.dh-quick .ic {
  width: 44px !important; height: 44px !important; padding: 11px; border-radius: 13px; box-sizing: border-box;
  color: var(--pc) !important; background: color-mix(in srgb, var(--pc) 14%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pc) 22%, transparent);
}
.dh-quick a:hover { border-color: color-mix(in srgb, var(--pc) 55%, var(--line)) !important; }
.dh-quick a span { font-weight: 600; }

/* ---------- الصور الرمزية بالأحرف: ألوان متناوبة ---------- */
.dh-list li { --pc: var(--pop-1); }
.dh-list li:nth-child(5n+2) { --pc: var(--pop-2); }
.dh-list li:nth-child(5n+3) { --pc: var(--pop-3); }
.dh-list li:nth-child(5n+4) { --pc: var(--pop-5); }
.dh-list li:nth-child(5n) { --pc: var(--pop-6); }
.dh-list .av { color: var(--pc) !important; background: color-mix(in srgb, var(--pc) 15%, transparent) !important; }

/* ---------- التبويبات والأزرار الثانوية: لمسة من اللون ---------- */
.btn.ghost:hover { border-color: color-mix(in srgb, var(--rose) 50%, var(--line)) !important; color: var(--rose-deep) !important; }

/* خلفية نهارية بألوان باستيل صافية مشتقة من لون الثيم (أنقى من خلط اللون بالرمادي) */
@supports (color: oklch(from red l c h)) {
  html:not([data-theme="dark"]) {
    --bg: oklch(from var(--rose) .975 .012 h);
    --bg-grad:
      radial-gradient(1000px 620px at 94% -16%, oklch(from var(--rose) .86 max(c, .09) h / .75) 0%, transparent 62%),
      radial-gradient(880px 580px at -8% 106%, oklch(from var(--gold) .88 max(c, .09) h / .7) 0%, transparent 60%),
      radial-gradient(760px 480px at 36% 50%, oklch(from var(--rose) .9 .07 calc(h - 75) / .45) 0%, transparent 66%),
      radial-gradient(620px 400px at 6% 4%, oklch(from var(--rose) .9 .07 calc(h + 150) / .4) 0%, transparent 64%);
    --card: oklch(from var(--rose) .995 .006 h);
    --card-soft: oklch(from var(--rose) .965 .02 h);
    --line: oklch(from var(--rose) .88 .035 h);
  }
}

/* صفحة الدخول: الروابط بلون الثيم */
.login-card a:not(.btn):not(.login-lang) { color: var(--rose); }
[data-theme="dark"] .login-card a:not(.btn):not(.login-lang) { color: var(--rose-deep); }

/* ---------- الفلوس: أرقام مخفية حتى يضغط «اعرض الأرقام»، والمستوى بسهم ---------- */
.fin-real { display: none; }
.fin-mask { display: inline; letter-spacing: .12em; color: var(--ink-soft); }
html.fin-shown .fin-real { display: inline; }
html.fin-shown .fin-mask { display: none; }
.fin-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem .7rem; margin: 0 0 .9rem; }
.fin-pick { margin: 0; }
.fin-pick-l { display: inline-flex; align-items: center; gap: .45rem; margin: 0; font-size: 13px; color: var(--ink-soft); }
.fin-pick-l .ic { width: 16px; height: 16px; }
.fin-pick select { width: auto; min-width: 12rem; max-width: 100%; padding: .4rem .6rem; font-size: 13.5px; }
.fin-level { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .6rem; border-radius: 8px; font-size: 13px; font-weight: 600;
  color: var(--lc); background: color-mix(in srgb, var(--lc) 13%, transparent); border: 1px solid color-mix(in srgb, var(--lc) 30%, transparent); }
.fin-up { --lc: var(--good, #3d7d55); } .fin-down { --lc: var(--danger, #c0392b); } .fin-mid { --lc: var(--pop-4, #b8862e); }
.fin-arrow { flex: none; }
.dh-kpi.fin-up .dh-k, .dh-kpi.fin-down .dh-k, .dh-kpi.fin-mid .dh-k { color: var(--lc); }
.dh-kpi.fin-up::before { background: var(--good) !important; } .dh-kpi.fin-down::before { background: var(--danger) !important; } .dh-kpi.fin-mid::before { background: var(--pop-4) !important; }
.dh-sub { display: block; margin-top: .25rem; font-size: 12px; color: var(--ink-soft); }
.fin-reveal .ic { width: 16px; height: 16px; }
[dir="ltr"] .fin-bar .fin-reveal, [dir="rtl"] .fin-bar .fin-reveal { margin-inline-start: auto; }
@media (max-width: 560px) { .fin-pick, .fin-pick-l, .fin-pick select { width: 100%; } .fin-pick-l span { flex: none; } }
.fin-reveal .fin-i-hide { display: none; }
html.fin-shown .fin-reveal .fin-i-hide { display: inline-block; }
html.fin-shown .fin-reveal .fin-i-show { display: none; }
.kz-eye-tile.fin-up .kz-eye-val { color: var(--good); } .kz-eye-tile.fin-down .kz-eye-val { color: var(--danger); }
.kz-eye-tile.fin-up .kz-eye-label, .kz-eye-tile.fin-down .kz-eye-label, .kz-eye-tile.fin-mid .kz-eye-label { color: var(--lc); font-weight: 600; }
.kz-eye-label .ic { width: 15px; height: 15px; }
.fin-stats { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1100px) { .fin-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .fin-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fin-stats .stat .val { font-size: 1.15rem; } }
.fin-period-h { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: .2rem 0 .8rem; font-weight: 600; }
.fin-period-h .ic { width: 17px; height: 17px; }
.fin-closed { display: inline-flex; align-items: center; gap: .3rem; font-size: 12.5px; font-weight: 500; color: var(--ink-soft); }
.fin-closed .ic { width: 14px; height: 14px; }
.fin-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .6rem .8rem; margin: 0; }
.fin-row label { display: flex; flex-direction: column; gap: .25rem; margin: 0; font-size: 12.5px; }
.fin-row label.fin-check { flex-direction: row; align-items: center; gap: .35rem; }
.fin-row .fin-grow { flex: 1 1 12rem; }
.fin-row select, .fin-row input[type=date] { width: auto; }
.fin-acts { display: flex; flex-wrap: wrap; gap: .4rem; align-items: flex-end; }
.fin-inline { display: inline; margin: 0; }
.card > .fin-row { margin-top: .7rem; }