/* ═══════════════════════════════════════════════════════════════
   رفيق — layout.css
   Nav (wordmark), footer, and the realistic ERP dashboard mockup.
   ═══════════════════════════════════════════════════════════════ */

/* ── Nav ── */
.nav {
  position: sticky;
  inset-block-start: 0;
  z-index: 100;
  block-size: var(--nav-h);
  background: rgba(255, 255, 255, .82);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
  border-block-end: 1px solid transparent;
  transition: border-color .25s ease, background .25s ease;
}
.nav.scrolled { border-block-end-color: var(--line); }

.nav-inner {
  block-size: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* The wordmark — brand is the word */
.wordmark {
  font-weight: 600;
  font-size: 1.6rem;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1;
}
html[lang="ar"] .wordmark { font-weight: 700; letter-spacing: 0; }

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(8px, 2vw, 30px);
  list-style: none;
}
.nav-links a {
  font-size: .93rem;
  font-weight: 400;
  color: var(--ink-2);
  padding-block: 8px;
  position: relative;
  transition: color .18s ease;
}
.nav-links a:hover { color: var(--ink); }

.nav-actions { display: flex; align-items: center; gap: 14px; }
.nav .btn { padding: 10px 20px; font-size: .9rem; }

.lang-toggle {
  background: transparent;
  border: 0;
  color: var(--muted);
  font-family: var(--font);
  font-size: .88rem;
  font-weight: 500;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: var(--r-xs);
  transition: color .18s ease, background .18s ease;
}
.lang-toggle:hover { color: var(--ink); background: var(--tint); }

/* burger */
.nav-burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 10px 4px;
}
.nav-burger i { display: block; inline-size: 22px; block-size: 1.6px; background: var(--ink); border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }

.nav-mobile {
  display: none;
  flex-direction: column;
  padding: 10px 0 22px;
  background: var(--bg);
  border-block-end: 1px solid var(--line);
}
.nav-mobile a {
  padding: 14px clamp(20px, 5vw, 48px);
  font-size: 1rem;
  color: var(--ink-2);
  border-block-start: 1px solid var(--line-2);
}
.nav-mobile .nav-m-cta { margin: 16px clamp(20px, 5vw, 48px) 0; border: 0; }
.nav-mobile.open { display: flex; }

/* ═══ DASHBOARD MOCKUP ═══ */
.mock {
  --mock-line: #EDEEF0;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink);
}

.mock-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  border-block-end: 1px solid var(--mock-line);
  background: #fff;
}
.mock-bar .m-brand { font-weight: 700; font-size: 15px; color: var(--ink); }
.mock-bar .m-search {
  flex: 1;
  max-inline-size: 190px;
  block-size: 26px;
  border-radius: var(--r-pill);
  background: var(--tint);
  border: 1px solid var(--mock-line);
}
.mock-bar .m-av {
  inline-size: 26px; block-size: 26px;
  border-radius: 50%;
  background: var(--accent-tint);
  border: 1px solid var(--accent-line);
  margin-inline-start: auto;
}

.mock-body { display: grid; grid-template-columns: 148px 1fr; min-block-size: 384px; }

.mock-side {
  border-inline-end: 1px solid var(--mock-line);
  background: var(--tint);
  padding: 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.mock-nav {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: var(--r-xs);
  color: var(--muted);
  font-size: 12.5px;
}
.mock-nav svg { inline-size: 15px; block-size: 15px; }
.mock-nav.on { background: #fff; color: var(--accent); font-weight: 600; box-shadow: var(--shadow-xs); }

.mock-main { padding: 18px; display: flex; flex-direction: column; gap: 14px; background: #fff; }
.mock-h { display: flex; align-items: baseline; justify-content: space-between; }
.mock-h .m-t { font-size: 15px; font-weight: 700; }
.mock-h .m-d { font-size: 11px; color: var(--faint); }

.mock-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.mock-kpi { border: 1px solid var(--mock-line); border-radius: var(--r-sm); padding: 11px 12px; }
.mock-kpi .k { font-size: 10.5px; color: var(--muted); margin-block-end: 5px; }
.mock-kpi .v { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.mock-kpi .m-chip {
  display: inline-block;
  margin-block-start: 6px;
  font-size: 10px;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: var(--r-pill);
  background: var(--ok-tint);
  color: var(--ok);
}

.mock-chart { border: 1px solid var(--mock-line); border-radius: var(--r-sm); padding: 13px; }
.mock-chart .m-ct { font-size: 11px; color: var(--muted); margin-block-end: 12px; }
.mock-bars { display: flex; align-items: flex-end; gap: 8px; block-size: 74px; }
.mock-bars i { flex: 1; border-radius: 3px 3px 0 0; background: var(--tint-2); display: block; }
.mock-bars i:nth-child(1) { block-size: 40%; }
.mock-bars i:nth-child(2) { block-size: 58%; }
.mock-bars i:nth-child(3) { block-size: 46%; }
.mock-bars i:nth-child(4) { block-size: 72%; }
.mock-bars i:nth-child(5) { block-size: 55%; }
.mock-bars i:nth-child(6) { block-size: 100%; background: var(--accent); }
.mock-bars i:nth-child(7) { block-size: 63%; }

.mock-rows { display: flex; flex-direction: column; gap: 8px; }
.mock-row {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--mock-line);
  border-radius: var(--r-sm);
  padding: 9px 11px;
}
.mock-row .m-dot { inline-size: 24px; block-size: 24px; border-radius: 50%; background: var(--tint-2); flex-shrink: 0; }
.mock-row .m-who { flex: 1; min-inline-size: 0; }
.mock-row .m-who .n { font-size: 12px; font-weight: 600; }
.mock-row .m-who .s { font-size: 10.5px; color: var(--faint); }
.mock-row .m-amt { font-size: 12.5px; font-weight: 700; }
.mock-row .m-st { font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: var(--r-pill); }
.mock-row .m-st.paid { background: var(--ok-tint); color: var(--ok); }
.mock-row .m-st.due { background: var(--warn-tint); color: var(--warn); }

/* Hero-load micro-choreography (motion-safe) */
@media (prefers-reduced-motion: no-preference) {
  .mock-kpi, .mock-chart, .mock-row { opacity: 0; transform: translateY(8px); }
  body.ready .mock-kpi, body.ready .mock-chart, body.ready .mock-row {
    animation: mockIn .55s cubic-bezier(.22,.61,.36,1) forwards;
  }
  body.ready .mock-kpi:nth-child(1) { animation-delay: .30s; }
  body.ready .mock-kpi:nth-child(2) { animation-delay: .37s; }
  body.ready .mock-kpi:nth-child(3) { animation-delay: .44s; }
  body.ready .mock-chart { animation-delay: .52s; }
  body.ready .mock-row:nth-child(1) { animation-delay: .60s; }
  body.ready .mock-row:nth-child(2) { animation-delay: .67s; }
  body.ready .mock-bars i { transform: scaleY(0); transform-origin: bottom; }
  body.ready .mock-chart .mock-bars i { animation: barGrow .5s cubic-bezier(.22,.61,.36,1) forwards; }
  body.ready .mock-bars i:nth-child(1) { animation-delay: .58s; }
  body.ready .mock-bars i:nth-child(2) { animation-delay: .63s; }
  body.ready .mock-bars i:nth-child(3) { animation-delay: .68s; }
  body.ready .mock-bars i:nth-child(4) { animation-delay: .73s; }
  body.ready .mock-bars i:nth-child(5) { animation-delay: .78s; }
  body.ready .mock-bars i:nth-child(6) { animation-delay: .83s; }
  body.ready .mock-bars i:nth-child(7) { animation-delay: .88s; }
}
@keyframes mockIn { to { opacity: 1; transform: none; } }
@keyframes barGrow { to { transform: scaleY(1); } }

/* ── Footer ── */
.footer { border-block-start: 1px solid var(--line); padding-block: clamp(56px, 7vw, 88px) 34px; }
.footer-top {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: clamp(28px, 5vw, 64px);
  padding-block-end: 44px;
  border-block-end: 1px solid var(--line);
}
.footer .wordmark { font-size: 1.7rem; }
.footer-tag { color: var(--muted); max-inline-size: 32ch; margin-block-start: 16px; font-size: .94rem; }
.footer h4 { font-size: .82rem; font-weight: 600; color: var(--ink); margin-block-end: 16px; }
html[lang="en"] .footer h4 { letter-spacing: .02em; }
.footer ul { list-style: none; display: flex; flex-direction: column; gap: 11px; }
.footer ul a { color: var(--muted); font-size: .93rem; transition: color .18s ease; }
.footer ul a:hover { color: var(--ink); }
.footer-bottom {
  padding-block-start: 26px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  color: var(--faint); font-size: .84rem;
}

/* ── Responsive ── */
@media (max-width: 940px) {
  .nav-links, .nav-actions .btn-quiet { display: none; }
  .nav-burger { display: flex; }
  .footer-top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .footer-top { grid-template-columns: 1fr; gap: 30px; }
}