/* Concept screens: one design language for Mizan, Itqan, HR-System and Space Planner on the showcase sites.
   Each screen is drawn at a virtual 1600 × 1000 and scaled to its frame (ui.js). */
.ui-frame { position: absolute; inset: 0; overflow: hidden; background: #F7F6F2; }
.ui { position: absolute; top: 0; left: 0; width: 1600px; height: 1000px; transform-origin: 0 0; font: 400 15px/1.45 var(--font-text); color: #15171C;
  --u-bg: #F7F6F2; --u-panel: #FFFFFF; --u-line: #E7E3DA; --u-line-2: #F0EDE6; --u-ink: #15171C; --u-ink-2: #5A5E68; --u-ink-3: #8A8E98;
  --u-ok: #1F9D6B; --u-warn: #D9921E; --u-bad: #D64545; --u-acc: var(--accent, #2D5BFF); --u-acc-soft: color-mix(in srgb, var(--u-acc) 12%, #fff);
  display: grid; grid-template-columns: 76px 1fr; background: var(--u-bg); }
.ui[dir="rtl"] { direction: rtl; }
.ui.dark { --u-bg: #0E1014; --u-panel: #161920; --u-line: #262A33; --u-line-2: #1D2028; --u-ink: #F1EFEA; --u-ink-2: #A8ADB8; --u-ink-3: #767B86; color: var(--u-ink); }
.ui.app-mizan { --u-acc: #2D5BFF; } .ui.app-itqan { --u-acc: #F26B1D; } .ui.app-hr { --u-acc: #0E9F7E; } .ui.app-space { --u-acc: #6D4AFF; }
.ui * { box-sizing: border-box; }
.ui .num, .ui td.n, .ui .kv b { font-variant-numeric: tabular-nums; }
/* rail */
.u-rail { background: var(--u-panel); border-inline-end: 1px solid var(--u-line); display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px 0; }
.u-mark { width: 40px; height: 40px; border-radius: 11px; background: var(--u-acc); color: #fff; display: grid; place-items: center; font: 800 15px/1 var(--font-display); margin-bottom: 14px; }
.u-ico { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; color: var(--u-ink-3); }
.u-ico.on { background: var(--u-acc-soft); color: var(--u-acc); }
.u-ico svg { width: 20px; height: 20px; }
.u-ava { margin-top: auto; width: 34px; height: 34px; border-radius: 50%; background: #D8D3C8; display: grid; place-items: center; font: 700 12px/1 var(--font-text); color: #4A4E57; }
/* main */
.u-main { display: grid; grid-template-rows: 60px auto 1fr; min-width: 0; }
.u-top { display: flex; align-items: center; gap: 16px; padding: 0 28px; border-bottom: 1px solid var(--u-line); background: var(--u-panel); }
.u-crumb { color: var(--u-ink-3); font-size: 14px; } .u-crumb b { color: var(--u-ink); font-weight: 600; }
.u-search { margin-inline-start: auto; width: 360px; height: 36px; border-radius: 10px; background: var(--u-bg); border: 1px solid var(--u-line); color: var(--u-ink-3); font-size: 13px; display: flex; align-items: center; padding: 0 12px; gap: 8px; }
.u-search kbd { margin-inline-start: auto; font: 600 11px/1 var(--font-text); border: 1px solid var(--u-line); border-radius: 5px; padding: 3px 6px; color: var(--u-ink-3); }
.u-date { font-size: 13px; color: var(--u-ink-2); }
.u-head { display: flex; align-items: flex-end; gap: 20px; padding: 24px 28px 18px; }
.u-head h1 { font: 700 30px/1.1 var(--font-display); letter-spacing: -0.02em; margin: 0; }
.ui[dir="rtl"] .u-head h1 { letter-spacing: 0; }
.u-head p { margin: 6px 0 0; color: var(--u-ink-2); font-size: 15px; max-width: none; }
.u-head .u-actions { margin-inline-start: auto; display: flex; gap: 8px; }
.u-btn { height: 36px; padding: 0 14px; border-radius: 9px; border: 1px solid var(--u-line); background: var(--u-panel); font: 600 13px/34px var(--font-text); color: var(--u-ink); white-space: nowrap; }
.u-btn.p { background: var(--u-acc); border-color: var(--u-acc); color: #fff; }
.u-body { padding: 0 28px 24px; display: grid; gap: 16px; align-content: start; min-height: 0; overflow: hidden; }
.u-row { display: grid; gap: 16px; min-height: 0; }
.u-card { background: var(--u-panel); border: 1px solid var(--u-line); border-radius: 14px; padding: 18px 20px; min-width: 0; min-height: 0; position: relative; overflow: hidden; }
.u-card h3 { font: 600 15px/1.3 var(--font-text); margin: 0; display: flex; align-items: center; gap: 8px; }
.u-card h3 small { font-weight: 400; color: var(--u-ink-3); font-size: 13px; margin-inline-start: auto; }
.u-card .sub { color: var(--u-ink-3); font-size: 13px; margin: 2px 0 12px; }
/* KPI */
.u-kpi { padding: 16px 18px; }
.u-kpi .l { color: var(--u-ink-2); font-size: 13px; display: flex; gap: 8px; align-items: center; }
.u-kpi .v { font: 700 34px/1.05 var(--font-display); letter-spacing: -0.02em; margin: 10px 0 6px; white-space: nowrap; }
.ui[dir="rtl"] .u-kpi .v { letter-spacing: 0; }
.u-kpi .v small { font: 500 15px/1 var(--font-text); color: var(--u-ink-3); margin-inline-start: 4px; letter-spacing: 0; }
.u-kpi .kf { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--u-ink-3); }
.u-kpi svg.spark { position: absolute; inset-inline-end: 16px; top: 18px; width: 92px; height: 34px; }
.u-chip { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 6px; font: 600 12px/1 var(--font-text); white-space: nowrap; background: #EEECE6; color: var(--u-ink-2); }
.ui.dark .u-chip { background: #22262E; }
.u-chip.ok { background: #E3F4EC; color: #137a52; } .u-chip.warn { background: #FBF0DB; color: #9a6410; } .u-chip.bad { background: #FBE5E5; color: #b03434; } .u-chip.acc { background: var(--u-acc-soft); color: var(--u-acc); }
.ui.dark .u-chip.ok { background: #143326; color: #4fd59d; } .ui.dark .u-chip.warn { background: #3a2c10; color: #f2b84b; } .ui.dark .u-chip.bad { background: #3b1717; color: #ff7b7b; }
.u-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: var(--u-ink-3); flex: none; }
.u-dot.ok { background: var(--u-ok); } .u-dot.warn { background: var(--u-warn); } .u-dot.bad { background: var(--u-bad); } .u-dot.acc { background: var(--u-acc); }
/* table */
.u-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.u-table th { text-align: start; font-weight: 600; color: var(--u-ink-3); font-size: 12px; padding: 0 10px 8px; border-bottom: 1px solid var(--u-line); white-space: nowrap; }
.u-table td { padding: 9px 10px; border-bottom: 1px solid var(--u-line-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
.u-table td.n, .u-table th.n { text-align: end; }
.u-table tr.hl td { background: var(--u-acc-soft); }
.u-table tr.hl td:first-child { box-shadow: inset 3px 0 0 var(--u-acc); }
.ui[dir="rtl"] .u-table tr.hl td:first-child { box-shadow: inset -3px 0 0 var(--u-acc); }
.u-table .mono { font: 600 12.5px/1 ui-monospace, "JetBrains Mono", monospace; color: var(--u-ink-2); }
.u-table tfoot td { font-weight: 700; border-top: 2px solid var(--u-ink); border-bottom: 0; }
/* charts */
.u-chart { width: 100%; display: block; overflow: visible; }
.u-chart text { font: 500 11.5px var(--font-text); fill: var(--u-ink-3); }
.u-chart .lbl { font-weight: 700; fill: var(--u-ink); font-size: 12.5px; }
.u-chart .grid { stroke: var(--u-line-2); stroke-width: 1; }
.u-chart .axis { stroke: var(--u-line); }
.u-bar { transform-box: fill-box; transform-origin: 50% 100%; }
.u-hbar { transform-box: fill-box; transform-origin: 0 50%; }
.u-line { fill: none; stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; }
/* list rows */
.u-list { display: grid; gap: 0; }
.u-li { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--u-line-2); font-size: 13.5px; }
.u-li:last-child { border-bottom: 0; }
.u-li b { font-weight: 600; display: block; } .u-li span { color: var(--u-ink-3); font-size: 12.5px; }
.u-bigbtn { border-radius: 16px; display: grid; place-items: center; font: 800 30px/1 var(--font-display); color: #fff; }
.u-steps { display: flex; gap: 0; align-items: center; }
.u-step { flex: 1; display: grid; gap: 6px; justify-items: center; text-align: center; font-size: 12.5px; color: var(--u-ink-3); position: relative; }
.u-step i { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #EEECE6; color: var(--u-ink-3); font: 700 13px/1 var(--font-text); font-style: normal; position: relative; z-index: 1; }
.u-step.done i { background: var(--u-ok); color: #fff; } .u-step.now i { background: var(--u-acc); color: #fff; box-shadow: 0 0 0 6px var(--u-acc-soft); }
.u-step.done, .u-step.now { color: var(--u-ink); }
.u-step::before { content: ""; position: absolute; top: 15px; inset-inline-start: -50%; width: 100%; height: 2px; background: var(--u-line); }
.u-step:first-child::before { display: none; } .u-step.done::before, .u-step.now::before { background: var(--u-ok); }

/* ---------- entrance animation: only when motion is allowed ---------- */
.motion .ui [data-a] { transition: transform .9s cubic-bezier(.22,1,.36,1), opacity .6s ease, stroke-dashoffset 1.4s cubic-bezier(.22,1,.36,1); transition-delay: calc(var(--d, 0) * 1ms); }
.motion .ui:not(.in) .u-bar[data-a] { transform: scaleY(0); }
.motion .ui:not(.in) .u-hbar[data-a] { transform: scaleX(0); }
.motion .ui:not(.in) .u-line[data-a] { stroke-dashoffset: var(--len, 2000); }
.motion .ui .u-line[data-a] { stroke-dasharray: var(--len, 2000); }
.motion .ui:not(.in) .fade[data-a] { opacity: 0; transform: translateY(10px); }
.motion .ui:not(.in) .pop[data-a] { opacity: 0; transform: scale(.6); }