/* ============================================
   Pixel-perfect HTML/CSS dashboard mockups
   Replaces inline SVG dashboards (no font overlap, RTL safe)
============================================ */

.demo {
  background: linear-gradient(135deg, #1F2D4D 0%, #0B2447 60%, #19376D 100%);
  border-radius: 18px;
  padding: 8px;
  box-shadow:
    0 50px 100px -20px rgba(11,36,71,.35),
    0 30px 60px -20px rgba(11,36,71,.20),
    0 0 0 1px rgba(255,255,255,.06) inset;
  position: relative;
  font-family: 'IBM Plex Sans Arabic','Tajawal','Inter',sans-serif;
  /* Force LTR inside dashboards so layout stays predictable */
  direction: ltr;
  text-align: left;
}

.demo--purple {
  background: linear-gradient(135deg, #1B1340 0%, #3B1F8B 60%, #6E3FF3 100%);
  box-shadow:
    0 50px 100px -20px rgba(110,63,243,.45),
    0 30px 60px -20px rgba(11,36,71,.20),
    0 0 0 1px rgba(255,255,255,.10) inset;
}

/* ===== Browser chrome ===== */
.demo__chrome {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 10px;
}
.demo__chrome .dot {
  width: 11px; height: 11px; border-radius: 50%;
}
.demo__chrome .dot--r { background: #FF5F57; }
.demo__chrome .dot--y { background: #FEBC2E; }
.demo__chrome .dot--g { background: #28C840; }
.demo__chrome .url {
  margin-left: auto;
  padding: 3px 14px;
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.7);
  border-radius: 6px;
  font-size: 11px;
  font-family: 'JetBrains Mono','SF Mono', ui-monospace, monospace;
}

/* ===== Screen ===== */
.demo__screen {
  background: #F7FAFC;
  border-radius: 12px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 188px 1fr;
}

/* ===== Sidebar ===== */
.demo__side {
  background: linear-gradient(180deg, #0B2447 0%, #19376D 100%);
  color: #fff;
  padding: 14px 10px;
  display: flex; flex-direction: column;
  gap: 4px;
  min-height: 100%;
}
.demo--purple .demo__side {
  background: linear-gradient(180deg, #1B1340 0%, #3B1F8B 100%);
}

.demo__brand {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 8px 14px;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: -.3px;
}
.demo__brand-mark {
  width: 26px; height: 26px;
  border-radius: 7px;
  background: linear-gradient(135deg, #1AA39A, #0E7C75);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  flex-shrink: 0;
}
.demo--purple .demo__brand-mark {
  background: linear-gradient(135deg, #6E3FF3, #A78BFA);
}

/* Org switcher (optional, second row) */
.demo__org {
  display: flex; align-items: center; gap: 8px;
  padding: 8px;
  margin-bottom: 8px;
  background: rgba(255,255,255,.06);
  border-radius: 8px;
}
.demo__org .av {
  width: 24px; height: 24px; border-radius: 6px;
  background: linear-gradient(135deg, #1AA39A, #0E7C75);
  flex-shrink: 0;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 800;
}
.demo__org .info { line-height: 1.2; min-width: 0; }
.demo__org .info b {
  display: block;
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.demo__org .info span {
  color: rgba(255,255,255,.55);
  font-size: 9.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  display: block;
}

.demo__nav-section {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: rgba(255,255,255,.35);
  padding: 8px 10px 4px;
  font-weight: 700;
}

.demo__item {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 12px;
  color: rgba(255,255,255,.6);
  font-weight: 500;
  position: relative;
}
.demo__item .ic {
  width: 14px; height: 14px;
  border-radius: 4px;
  background: rgba(255,255,255,.20);
  flex-shrink: 0;
}
.demo__item.is-active {
  background: rgba(26,163,154,.20);
  color: #fff;
  font-weight: 700;
}
.demo--purple .demo__item.is-active {
  background: rgba(167,139,250,.22);
}
.demo__item.is-active .ic {
  background: #1AA39A;
}
.demo--purple .demo__item.is-active .ic {
  background: #A78BFA;
}
.demo__item .pill {
  margin-left: auto;
  background: #1AA39A;
  color: #fff;
  font-size: 9.5px;
  padding: 2px 7px;
  border-radius: 4px;
  font-weight: 800;
}
.demo--purple .demo__item .pill { background: #A78BFA; }
.demo__item .pill.warn { background: #FB923C; }

.demo__live {
  margin-top: auto;
  display: flex; align-items: center; gap: 10px;
  padding: 10px;
  background: rgba(255,255,255,.06);
  border-radius: 8px;
}
.demo__live .pulse {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #22C55E;
  box-shadow: 0 0 0 4px rgba(34,197,94,.30);
  flex-shrink: 0;
  animation: demoPulse 1.6s infinite;
}
@keyframes demoPulse {
  0%,100% { box-shadow: 0 0 0 4px rgba(34,197,94,.30); }
  50%     { box-shadow: 0 0 0 7px rgba(34,197,94,.0); }
}
.demo__live b { color: #fff; font-size: 11px; font-weight: 700; display: block; line-height: 1.2; }
.demo__live span { color: rgba(255,255,255,.55); font-size: 9.5px; }

/* ===== Main panel ===== */
.demo__main {
  padding: 12px;
  display: flex; flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.demo__topbar {
  display: flex; align-items: center; gap: 8px;
  background: #fff;
  padding: 8px 10px;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(11,36,71,.06);
}
.demo__search {
  flex: 1;
  height: 22px;
  background: #F1F5F9;
  border-radius: 6px;
  display: flex; align-items: center; padding: 0 10px;
  font-size: 10px; color: #94A3B8;
  gap: 6px;
}
.demo__search::before {
  content: '';
  width: 10px; height: 10px;
  border: 1.5px solid #94A3B8;
  border-radius: 50%;
  flex-shrink: 0;
}
.demo__icbtn {
  width: 22px; height: 22px;
  background: #F1F5F9;
  border-radius: 6px;
  position: relative;
  flex-shrink: 0;
}
.demo__icbtn--bell::after {
  content: '';
  position: absolute;
  top: 3px; right: 3px;
  width: 6px; height: 6px;
  background: #EF4444;
  border-radius: 50%;
}
.demo__topbar .av {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1AA39A, #0B2447);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 800;
  flex-shrink: 0;
}
.demo--purple .demo__topbar .av { background: linear-gradient(135deg, #A78BFA, #1B1340); }

.demo__hello {
  font-size: 14px;
  font-weight: 800;
  color: #0B2447;
  line-height: 1.2;
}
.demo--purple .demo__hello { color: #1B1340; }
.demo__hello-sub {
  font-size: 10px;
  color: #6B7891;
  margin-top: 1px;
}

/* ===== KPI grid ===== */
.demo__kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.demo__kpi {
  position: relative;
  background: #fff;
  border-radius: 10px;
  padding: 11px 12px;
  box-shadow: 0 1px 3px rgba(11,36,71,.06);
  overflow: hidden;
}
.demo__kpi-ic {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: linear-gradient(135deg, #1AA39A, #0E7C75);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 8px;
  flex-shrink: 0;
}
.demo__kpi--blue .demo__kpi-ic { background: linear-gradient(135deg, #576CBC, #19376D); }
.demo__kpi--orange .demo__kpi-ic { background: linear-gradient(135deg, #FB923C, #EA580C); }
.demo__kpi--purple .demo__kpi-ic { background: linear-gradient(135deg, #A78BFA, #6E3FF3); }
.demo__kpi-label {
  font-size: 10px;
  color: #6B7891;
  margin-bottom: 2px;
}
.demo__kpi-val {
  font-size: 18px;
  font-weight: 800;
  color: #0B2447;
  letter-spacing: -.4px;
  line-height: 1.1;
}
.demo--purple .demo__kpi-val { color: #1B1340; }
.demo__kpi-delta {
  position: absolute;
  top: 11px; right: 11px;
  background: rgba(34,197,94,.14);
  color: #15803D;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 5px;
  font-family: 'JetBrains Mono','SF Mono', ui-monospace, monospace;
}
.demo__kpi-delta--blue { background: rgba(87,108,188,.16); color: #19376D; }
.demo__kpi-delta--orange { background: rgba(251,146,60,.16); color: #C2410C; }
.demo__kpi-delta--purple { background: rgba(110,63,243,.14); color: #5B2DD9; }

/* ===== Chart card ===== */
.demo__chart {
  background: #fff;
  border-radius: 10px;
  padding: 12px;
  box-shadow: 0 1px 3px rgba(11,36,71,.06);
}
.demo__chart-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 6px;
}
.demo__chart-head h4 {
  margin: 0;
  font-size: 12.5px;
  font-weight: 800;
  color: #0B2447;
}
.demo--purple .demo__chart-head h4 { color: #1B1340; }
.demo__chart-head small {
  font-size: 9.5px;
  color: #94A3B8;
}
.demo__chart-legend {
  display: flex; gap: 12px;
  font-size: 9.5px;
  color: #475569;
}
.demo__chart-legend .lg {
  display: inline-flex; align-items: center; gap: 4px;
}
.demo__chart-legend .lg::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--c, #1AA39A);
}
.demo__chart-svg {
  width: 100%;
  height: 130px;
  display: block;
}

/* ===== Bottom row: list + small panel ===== */
.demo__row {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 8px;
}

.demo__list {
  background: #fff;
  border-radius: 10px;
  padding: 12px;
  box-shadow: 0 1px 3px rgba(11,36,71,.06);
}
.demo__list-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 8px;
}
.demo__list-head h4 {
  margin: 0;
  font-size: 12.5px;
  font-weight: 800;
  color: #0B2447;
}
.demo--purple .demo__list-head h4 { color: #1B1340; }
.demo__list-head a {
  font-size: 10px;
  font-weight: 700;
  color: #1AA39A;
  text-decoration: none;
}
.demo--purple .demo__list-head a { color: #6E3FF3; }

.demo__row-item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 8px;
  background: #FBFDFF;
  border-radius: 8px;
  margin-bottom: 4px;
}
.demo--purple .demo__row-item { background: #FBFAFF; }
.demo__row-item:last-child { margin-bottom: 0; }
.demo__row-item .av {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1AA39A, #0B2447);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 800;
  flex-shrink: 0;
}
.demo__row-item .av--blue { background: linear-gradient(135deg, #576CBC, #19376D); }
.demo__row-item .av--purple { background: linear-gradient(135deg, #A78BFA, #6E3FF3); }
.demo__row-item .av--orange { background: linear-gradient(135deg, #FB923C, #EA580C); }
.demo__row-item .meta { line-height: 1.25; min-width: 0; flex: 1; }
.demo__row-item .meta b {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: #0B2447;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.demo--purple .demo__row-item .meta b { color: #1B1340; }
.demo__row-item .meta span {
  font-size: 9.5px;
  color: #94A3B8;
}
.demo__row-item .tag {
  background: rgba(34,197,94,.14);
  color: #15803D;
  font-size: 9.5px;
  font-weight: 800;
  padding: 3px 7px;
  border-radius: 5px;
  flex-shrink: 0;
}
.demo__row-item .tag--orange { background: rgba(251,146,60,.16); color: #C2410C; }
.demo__row-item .tag--purple { background: rgba(110,63,243,.14); color: #5B2DD9; }
.demo__row-item.is-empty {
  background: rgba(26,163,154,.06);
  border: 1px dashed rgba(26,163,154,.30);
  justify-content: center;
  color: #0E7C75;
  font-weight: 700;
  font-size: 11px;
  padding: 9px 8px;
}
.demo--purple .demo__row-item.is-empty {
  background: rgba(110,63,243,.06);
  border-color: rgba(110,63,243,.30);
  color: #5B2DD9;
}

/* ===== Donut card ===== */
.demo__donut {
  background: #fff;
  border-radius: 10px;
  padding: 12px;
  box-shadow: 0 1px 3px rgba(11,36,71,.06);
  display: flex; flex-direction: column;
  align-items: center;
}
.demo__donut h4 {
  align-self: flex-start;
  margin: 0 0 8px;
  font-size: 12.5px;
  font-weight: 800;
  color: #0B2447;
}
.demo__donut-svg { width: 88px; height: 88px; }
.demo__donut-center {
  font-size: 18px;
  font-weight: 800;
  color: #0B2447;
}
.demo__donut-center small {
  display: block;
  font-size: 9px;
  color: #6B7891;
  font-weight: 500;
}
.demo__donut-legend {
  display: flex; flex-direction: column;
  gap: 4px;
  margin-top: 8px;
  width: 100%;
  font-size: 10px; color: #475569;
}
.demo__donut-legend .lg {
  display: inline-flex; align-items: center; gap: 6px;
}
.demo__donut-legend .lg::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--c, #1AA39A);
}

/* ===== Floating chips OUTSIDE the demo (real HTML, real fonts) ===== */
.demo-float {
  position: absolute;
  background: #fff;
  border: 1px solid rgba(11,36,71,.06);
  border-radius: 14px;
  padding: 10px 14px;
  box-shadow: 0 16px 32px -8px rgba(11,36,71,.18);
  display: flex; align-items: center; gap: 10px;
  font-family: 'IBM Plex Sans Arabic','Tajawal',sans-serif;
  z-index: 4;
  direction: rtl;
  text-align: right;
  animation: demoFloat 6s ease-in-out infinite;
}
@keyframes demoFloat {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-6px); }
}
.demo-float .ic {
  width: 32px; height: 32px;
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.demo-float .meta { line-height: 1.25; }
.demo-float .meta b {
  display: block;
  font-size: 13px;
  font-weight: 800;
  color: #0B2447;
}
.demo-float .meta span {
  font-size: 11.5px;
  color: #6B7891;
}
.demo-float--tl { top: 24px; right: -16px; }
.demo-float--bl { bottom: 24px; left: -22px; animation-delay: 2s; }
.demo-float--br { bottom: 80px; right: -10px; animation-delay: 1s; }

/* ===== Phone mockup (HTML, not SVG) ===== */
.demo-phone {
  width: 220px;
  height: 440px;
  background: #0B2447;
  border-radius: 32px;
  padding: 6px;
  box-shadow: 0 30px 60px rgba(11,36,71,.30);
  position: relative;
  font-family: 'IBM Plex Sans Arabic','Tajawal',sans-serif;
  direction: ltr;
  text-align: left;
}
.demo-phone__notch {
  position: absolute;
  top: 12px; left: 50%;
  transform: translateX(-50%);
  width: 64px; height: 14px;
  background: #0B2447;
  border-radius: 7px;
  z-index: 2;
}
.demo-phone__screen {
  background: linear-gradient(180deg, #FBFDFF 0%, #F4F8FC 100%);
  border-radius: 28px;
  width: 100%; height: 100%;
  padding: 28px 16px 12px;
  overflow: hidden;
}

/* Make slides feel responsive */
@media (max-width: 880px) {
  .demo { display: none; }
  .demo-mobile-fallback { display: block; }
}

/* ============================================
   Compact demo (for project cards in narrow visual area)
============================================ */
.demo--compact .demo__screen { grid-template-columns: 130px 1fr; }
.demo--compact .demo__brand { font-size: 12px; padding: 2px 6px 12px; }
.demo--compact .demo__brand-mark { width: 22px; height: 22px; font-size: 11px; }
.demo--compact .demo__org { padding: 6px; }
.demo--compact .demo__org .av { width: 20px; height: 20px; font-size: 9px; }
.demo--compact .demo__org .info b { font-size: 10px; }
.demo--compact .demo__org .info span { font-size: 8.5px; }
.demo--compact .demo__nav-section { font-size: 8.5px; padding: 8px 8px 4px; }
.demo--compact .demo__item { font-size: 10.5px; padding: 6px 8px; gap: 7px; }
.demo--compact .demo__item .ic { width: 11px; height: 11px; }
.demo--compact .demo__item .pill { font-size: 8.5px; padding: 1px 5px; }
.demo--compact .demo__live { padding: 8px; }
.demo--compact .demo__live b { font-size: 10px; }
.demo--compact .demo__live span { font-size: 8.5px; }
.demo--compact .demo__main { padding: 10px; gap: 8px; }
.demo--compact .demo__topbar { padding: 6px 8px; }
.demo--compact .demo__search { font-size: 9px; height: 18px; padding: 0 8px; }
.demo--compact .demo__icbtn { width: 18px; height: 18px; }
.demo--compact .demo__topbar .av { width: 22px; height: 22px; font-size: 9px; }
.demo--compact .demo__hello { font-size: 12px; }
.demo--compact .demo__hello-sub { font-size: 9px; }
.demo--compact .demo__kpis { gap: 6px; }
.demo--compact .demo__kpi { padding: 8px 10px; border-radius: 8px; }
.demo--compact .demo__kpi-ic { width: 22px; height: 22px; border-radius: 6px; margin-bottom: 6px; }
.demo--compact .demo__kpi-label { font-size: 8.5px; }
.demo--compact .demo__kpi-val { font-size: 14px; }
.demo--compact .demo__kpi-delta { font-size: 8.5px; padding: 1px 5px; top: 8px; right: 8px; }
.demo--compact .demo__chart { padding: 10px; }
.demo--compact .demo__chart-head h4 { font-size: 11px; }
.demo--compact .demo__chart-head small { font-size: 8.5px; }
.demo--compact .demo__chart-legend { font-size: 8.5px; gap: 8px; }
.demo--compact .demo__chart-svg { height: 90px; }
.demo--compact .demo__list { padding: 10px; }
.demo--compact .demo__list-head h4 { font-size: 11px; }
.demo--compact .demo__list-head a { font-size: 8.5px; }
.demo--compact .demo__row-item { padding: 5px 6px; gap: 6px; margin-bottom: 3px; }
.demo--compact .demo__row-item .av { width: 20px; height: 20px; font-size: 9px; }
.demo--compact .demo__row-item .meta b { font-size: 9.5px; }
.demo--compact .demo__row-item .meta span { font-size: 8.5px; }
.demo--compact .demo__row-item .tag { font-size: 8.5px; padding: 2px 5px; }
.demo--compact .demo__donut { padding: 10px; }
.demo--compact .demo__donut h4 { font-size: 11px; }
.demo--compact .demo__donut-svg { width: 70px; height: 70px; }
.demo--compact .demo__donut-legend { font-size: 8.5px; }