/* المالية ← وضع التحصيل — محصورة تحت .cpm فلا تتسرّب إلى بقية اللوحة.
   الألوان من رموز اللوحة (--surface/--border/--text/--good/--warn…) ولكلٍّ
   نظير ليلي؛ وما لا رمز له في اللوحة (أزرق الحجز، البنفسجي العميق، خلفية
   «الهاتف») يُعرَّف هنا مرّتين: نهاراً و:root[data-theme="dark"]. */

.cpm {
  --cpm-grad: linear-gradient(135deg, #6a2fb0, #a97fd6);
  --cpm-deep: #54007d;
  --cpm-hold: #2f6fde; --cpm-hold-bg: #e7effd;
  --cpm-hold-stripe: repeating-linear-gradient(45deg, #2f6fde 0 8px, #5b8ff0 8px 16px);
  --cpm-free: #c9b8e6;
  --cpm-phone: linear-gradient(160deg, #f7f2fd, #efe7fa);
  --cpm-pro-text: #155c46; --cpm-con-text: #7a4f04;
  --cpm-rule: linear-gradient(90deg, #efe5fb, #f8f3ff);
  --cpm-on-shadow: 0 26px 60px -30px rgba(106, 47, 176, .7);
  display: flex; flex-direction: column; gap: 20px; margin-bottom: 24px;
}
:root[data-theme="dark"] .cpm {
  --cpm-deep: #d9c2f0;
  --cpm-hold: #7aa7f0; --cpm-hold-bg: #172539;
  --cpm-hold-stripe: repeating-linear-gradient(45deg, #4f86e8 0 8px, #7aa7f0 8px 16px);
  --cpm-free: #5a4380;
  --cpm-phone: linear-gradient(160deg, #2e1f45, #251839);
  --cpm-pro-text: var(--good); --cpm-con-text: var(--warn);
  --cpm-rule: linear-gradient(90deg, #2e1d48, #241638);
  --cpm-on-shadow: 0 26px 60px -30px rgba(0, 0, 0, .8);
}

.cpm-num { font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate }

/* الرأس */
.cpm-head { margin-bottom: 0; align-items: center }
.cpm-who { font-size: 12px; font-weight: 800; color: var(--muted); background: var(--surface);
  border: 1px solid var(--border); border-radius: 999px; padding: 6px 12px; white-space: nowrap }
.cpm-who b { color: var(--text) }
.cpm-ro { border-radius: 12px; background: var(--warn-bg); border: 1px solid var(--warn-line); color: var(--warn);
  font-size: 13px; font-weight: 700; padding: 10px 14px; line-height: 1.7 }

/* الأزرار — اللوحة لا تعرّف أزراراً بهذا الحجم فتُعرَّف هنا محصورة. */
.cpm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 20px;
  border-radius: 13px; font: inherit; font-weight: 800; font-size: 14px; border: 0; cursor: pointer; white-space: nowrap }
.cpm-btn.primary { background: var(--cpm-grad); color: #fff; box-shadow: 0 12px 24px -14px rgba(106, 47, 176, .9) }
.cpm-btn.primary:hover:not(:disabled) { filter: brightness(1.06) }
.cpm-btn.ghost { background: var(--surface); color: var(--text); border: 1px solid var(--border) }
.cpm-btn:disabled { cursor: not-allowed }
.cpm-btn.primary:disabled { opacity: .55; box-shadow: none }
.cpm-btn.ghost:disabled { color: var(--muted) }
.cpm-btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--primary) 45%, transparent); outline-offset: 2px }

.cpm-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800;
  border-radius: 999px; padding: 4px 11px }
.cpm-pill.good { background: var(--good-bg); color: var(--good) }
.cpm-pill.hold { background: var(--cpm-hold-bg); color: var(--cpm-hold) }
.cpm-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; display: inline-block; flex: none }
.cpm-live .cpm-dot, .cpm-cur .cpm-dot { animation: cpm-pulse 1.8s infinite }
@keyframes cpm-pulse {
  0% { box-shadow: 0 0 0 0 currentColor }
  70% { box-shadow: 0 0 0 7px transparent }
  100% { box-shadow: 0 0 0 0 transparent }
}

/* البطاقتان */
.cpm-wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 20px }
.cpm-mode { position: relative; padding: 22px 22px 20px; border-radius: 22px; background: var(--surface);
  border: 2px solid var(--border); box-shadow: var(--shadow); overflow: hidden; container-type: inline-size;
  display: flex; flex-direction: column }
.cpm-mode.on { border-color: transparent;
  background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--cpm-grad) border-box;
  box-shadow: var(--cpm-on-shadow) }
.cpm-badges { position: absolute; top: 18px; left: 18px; display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end }
.cpm-mode h3 { font-family: var(--fdisplay); font-size: 21px; font-weight: 800; margin: 8px 0 2px }
.cpm-one { color: var(--muted); font-size: 13.5px; margin: 0 0 16px }

/* «الهاتف»: بطاقة مصرفية مصغّرة + أشرطة المحجوز/المحصَّل/المفكوك */
.cpm-phone { height: 200px; border-radius: 18px; background: var(--cpm-phone); position: relative; overflow: hidden;
  margin-bottom: 16px; display: flex; align-items: flex-start; justify-content: space-between; gap: 18px;
  padding: 26px 22px 0 24px }
.cpm-cardmock { flex: none; width: 190px; height: 118px; border-radius: 16px;
  background: linear-gradient(135deg, #3c0459, #8e5bc4 70%, #c9a4e6); color: #fff; padding: 14px;
  box-shadow: 0 18px 30px -16px rgba(60, 4, 89, .8); box-sizing: border-box }
.cpm-bn { font-size: 11px; background: #fff; color: #17151b; border-radius: 6px; padding: 2px 7px; font-weight: 800;
  display: inline-block; direction: ltr }
.cpm-pn { margin-top: 30px; letter-spacing: 2px; font-weight: 700; direction: ltr; text-align: left }
.cpm-lock { flex: 0 1 150px; min-width: 110px; margin-top: 14px }
.cpm-row { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; font-weight: 800; color: var(--muted) }
.cpm-meter { height: 12px; border-radius: 12px; background: var(--surface); margin: 6px 0 10px; overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--border) }
.cpm-meter i { display: block; height: 100%; border-radius: 12px }
.cpm-meter i.hold { background: var(--cpm-hold-stripe); background-size: 22px 22px; animation: cpm-slide 1.4s linear infinite }
.cpm-meter i.good { background: var(--good) }
.cpm-meter i.free { background: var(--cpm-free) }
@keyframes cpm-slide { to { background-position: 22px 0 } }
.cpm-eg { position: absolute; bottom: 10px; left: 14px; font-size: 10.5px; font-weight: 700; color: var(--faint) }

.cpm-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px }
.cpm-steps li { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; line-height: 1.7 }
.cpm-steps em { flex: none; width: 24px; height: 24px; border-radius: 8px; background: var(--border-soft); color: var(--cpm-deep);
  font-style: normal; font-weight: 900; font-size: 12px; display: grid; place-items: center; margin-top: 1px }
.cpm-pc { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px }
.cpm-pc div { border-radius: 12px; padding: 10px 12px; font-size: 12.5px; line-height: 1.75; font-weight: 700 }
.cpm-pc svg { vertical-align: -2px; margin-inline-end: 4px }
.cpm-pc .pro { background: var(--good-bg); color: var(--cpm-pro-text) }
.cpm-pc .con { background: var(--warn-bg); color: var(--cpm-con-text) }
.cpm-choose { margin-top: auto; padding-top: 16px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap }
.cpm-cur { font-weight: 800; color: var(--good); display: flex; align-items: center; gap: 8px }
.cpm-off { color: var(--muted); font-size: 13px }

/* بطاقة ضيّقة (شاشة 1100 أو عمود واحد ضيّق): البطاقة المصرفية تصغر */
@container (max-width: 400px) {
  .cpm-phone { padding: 22px 16px 0 16px; gap: 12px }
  .cpm-cardmock { width: 150px; height: 96px; padding: 11px }
  .cpm-pn { margin-top: 22px; letter-spacing: 1px; font-size: 13px }
  .cpm-pc { grid-template-columns: 1fr }
}

/* الشريط السفلي: القاعدة + ثلاثة مؤشّرات */
.cpm-strip { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 14px }
.cpm-rule { display: flex; gap: 14px; align-items: center; padding: 14px 18px; border-radius: 18px;
  background: var(--cpm-rule); color: var(--cpm-deep); font-size: 13.5px; font-weight: 700; line-height: 1.7 }
.cpm-rule b { font-weight: 900 }
.cpm-ic { flex: none; width: 36px; height: 36px; border-radius: 12px; background: var(--surface); display: grid; place-items: center }
.cpm-kpi { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow);
  padding: 16px 18px; min-width: 0 }
.cpm-kpi .l { font-size: 12px; color: var(--faint); font-weight: 800 }
.cpm-kpi .n { font-family: var(--fdisplay); font-size: 28px; font-weight: 900; margin-top: 2px; line-height: 1.3 }
.cpm-kpi .n small { font-size: 13px; color: var(--muted); font-weight: 700 }
.cpm-kpi .n.good { color: var(--good) }
.cpm-kpi .n.warn { color: var(--warn) }
.cpm-kpi .h { font-size: 12px; color: var(--muted) }

@media (max-width: 1180px) {
  .cpm-strip { grid-template-columns: repeat(3, 1fr) }
  .cpm-rule { grid-column: 1 / -1 }
}
@media (max-width: 640px) {
  .cpm-strip { grid-template-columns: 1fr }
  .cpm-wrap { grid-template-columns: 1fr }
  .cpm-who { white-space: normal }
}

/* تأكيد التبديل — داخل الصفحة لا confirm() */
.cpm-ovl { position: fixed; inset: 0; background: rgba(23, 12, 36, .5); display: flex; align-items: center;
  justify-content: center; padding: 16px; z-index: 300 }
.cpm-dlg { width: 100%; max-width: 480px; background: var(--surface); color: var(--text); border: 1px solid var(--border);
  border-radius: 20px; padding: 22px; box-sizing: border-box; box-shadow: 0 24px 60px rgba(0, 0, 0, .35) }
.cpm-dlg h2 { font-family: var(--fdisplay); font-size: 18px; font-weight: 800; margin: 0 0 10px }
.cpm-dlg ul { margin: 0 0 14px; padding-inline-start: 18px; color: var(--muted); font-size: 13.5px; line-height: 1.95 }
.cpm-dlg li::marker { color: var(--primary) }
.cpm-dlg-err { margin-bottom: 14px }
.cpm-acts { display: flex; gap: 10px }
.cpm-acts .primary { flex: 1 }

@media (prefers-reduced-motion: reduce) {
  .cpm-live .cpm-dot, .cpm-cur .cpm-dot, .cpm-meter i.hold { animation: none }
}

/* هوية القسم المالي (وضع الهوية فقط): بطاقات زجاجية بلون المالية */
:root:not([data-sidebar-style="classic"]) .cpm-mode:not(.on),
:root:not([data-sidebar-style="classic"]) .cpm-kpi{background:linear-gradient(180deg,var(--surface-2),var(--surface));box-shadow:var(--shadow)}
:root:not([data-sidebar-style="classic"]) .cpm-kpi{position:relative;overflow:hidden;transition:transform var(--t) var(--ease),border-color var(--t)}
:root:not([data-sidebar-style="classic"]) .cpm-kpi::after{content:"";position:absolute;top:0;right:16px;left:16px;height:2px;background:linear-gradient(to left,var(--c-finance),transparent);opacity:.8}
:root:not([data-sidebar-style="classic"]) .cpm-kpi:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--c-finance) 30%,var(--border))}
:root:not([data-sidebar-style="classic"]) .cpm-who{background:var(--glass)}
:root:not([data-sidebar-style="classic"]) .cpm-mode.on{background:linear-gradient(180deg,var(--surface-2),var(--surface)) padding-box,var(--cpm-grad) border-box}