/* ==========================================================================
   VOX IQ — أوراق A4 (العرض التقديمي + العرض الفني)
   مصممة للعرض على الشاشة والطباعة/التصدير PDF بنفس الشكل تماماً
   ========================================================================== */

@page { size: A4 portrait; margin: 0; }

:root{
  --ink:#0b1220; --ink-2:#1e293b; --muted:#64748b; --soft-ink:#475569;
  --line:#dfe5ef; --line-2:#eef1f7; --soft:#f6f8fc;
  --brand:#4f46e5; --brand-2:#4338ca; --brand-soft:#eef2ff;
  --cyan:#0891b2; --cyan-soft:#ecfeff;
  --night:#0b1324; --night-2:#131e33;
  --ok:#0d9488; --warn:#b45309; --danger:#be123c;
  --pw:210mm; --ph:297mm;
  --pad-x:15mm; --pad-y:13mm;
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Tajawal",system-ui,"Segoe UI",sans-serif;
  color:var(--ink);background:#e9edf4;
  font-size:10.5pt;line-height:1.72;font-weight:500;
  -webkit-font-smoothing:antialiased;
  -webkit-print-color-adjust:exact;print-color-adjust:exact;
}
h1,h2,h3,h4{margin:0;font-weight:800;line-height:1.25;letter-spacing:-.015em}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}
strong,b{font-weight:800}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.ltr{direction:ltr;unicode-bidi:isolate}

/* ---------- الورقة ---------- */
.page{
  position:relative;width:var(--pw);height:var(--ph);
  margin:9mm auto;background:#fff;overflow:hidden;
  display:flex;flex-direction:column;
  padding:var(--pad-y) var(--pad-x);
  box-shadow:0 10px 30px rgba(11,18,32,.16);
  break-after:page;page-break-after:always;
}
.page:last-of-type{break-after:auto;page-break-after:auto}
.page-body{flex:1;min-height:0;display:flex;flex-direction:column}

/* ترويسة الورقة */
.p-head{
  display:flex;align-items:center;justify-content:space-between;gap:10mm;
  padding-bottom:3.5mm;margin-bottom:6mm;border-bottom:1.6pt solid var(--brand);
}
.p-head .doc-name{display:flex;align-items:center;gap:3mm}
.p-head img{width:26mm;display:block}
.p-head .kicker{font-size:8.2pt;font-weight:800;color:var(--brand);letter-spacing:.06em}
.p-head .sec{font-size:9pt;font-weight:800;color:var(--muted)}
.p-head .sec b{color:var(--ink)}

/* تذييل الورقة */
.p-foot{
  display:flex;align-items:center;justify-content:space-between;gap:8mm;
  margin-top:5mm;padding-top:3mm;border-top:.8pt solid var(--line);
  font-size:8pt;color:var(--muted);font-weight:600;
}
.p-foot .num{font-family:"IBM Plex Mono",monospace;font-weight:600;direction:ltr}

/* ---------- الغلاف ---------- */
.page.cover{padding:0;background:var(--night);color:#fff;justify-content:space-between}
.cover-top{position:relative;padding:20mm var(--pad-x) 0;flex:1;display:flex;flex-direction:column;justify-content:center}
.cover-bg{position:absolute;inset:0;overflow:hidden}
.cover-bg .glow{position:absolute;border-radius:50%;filter:blur(60px)}
.cover-bg .g1{width:110mm;height:110mm;background:rgba(79,70,229,.55);top:-40mm;inset-inline-end:-30mm}
.cover-bg .g2{width:80mm;height:80mm;background:rgba(8,145,178,.42);bottom:-25mm;inset-inline-start:-25mm}
.cover-bg .grid{position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.05) .3mm,transparent .3mm),linear-gradient(90deg,rgba(255,255,255,.05) .3mm,transparent .3mm);
  background-size:14mm 14mm}
.cover-in{position:relative;z-index:2}
.cover-in img{width:56mm;margin-bottom:14mm}
.cover-tag{display:inline-block;padding:2mm 5mm;border-radius:99px;border:.6pt solid rgba(255,255,255,.28);
  background:rgba(255,255,255,.08);font-size:9pt;font-weight:800;letter-spacing:.05em;margin-bottom:7mm}
.cover-in h1{font-size:33pt;font-weight:900;line-height:1.18;margin-bottom:5mm}
.cover-in h1 .grad{background:linear-gradient(90deg,#a5b4fc,#67e8f9);-webkit-background-clip:text;background-clip:text;color:transparent}
.cover-in .lede{font-size:12pt;color:#a9b7cc;max-width:135mm;font-weight:500}
.cover-meta{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  border-top:.6pt solid rgba(255,255,255,.14);margin-top:14mm}
.cover-meta div{padding:6mm var(--pad-x);border-inline-start:.6pt solid rgba(255,255,255,.14)}
.cover-meta div:first-child{border-inline-start:0}
.cover-meta span{display:block;font-size:8pt;color:#7f92ad;font-weight:700;margin-bottom:1.5mm}
.cover-meta b{font-size:10.5pt;color:#fff;font-weight:800}
.cover-strip{position:relative;z-index:2;background:linear-gradient(90deg,var(--brand),#0ea5e9);
  padding:5mm var(--pad-x);display:flex;justify-content:space-between;align-items:center;font-size:9pt;font-weight:700;color:#fff}

/* ---------- عناوين الأقسام ---------- */
.h-block{margin-bottom:6mm}
.h-kicker{display:inline-flex;align-items:center;gap:2.5mm;font-size:8.5pt;font-weight:800;color:var(--brand);letter-spacing:.07em;margin-bottom:2mm}
.h-kicker i{width:8mm;height:.8pt;background:currentColor;display:block}
.h-block h2{font-size:19pt;font-weight:900;margin-bottom:2.5mm}
.h-block p{color:var(--soft-ink);font-size:10pt;max-width:160mm}

h3.sub{font-size:11.5pt;font-weight:800;margin:5mm 0 3mm;padding-inline-start:3mm;border-inline-start:1.4pt solid var(--brand)}
h3.sub:first-child{margin-top:0}

/* ---------- شبكات ---------- */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:4mm}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:4mm}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:3mm}
.g-6-4{display:grid;grid-template-columns:1.5fr 1fr;gap:5mm}
.g-4-6{display:grid;grid-template-columns:1fr 1.5fr;gap:5mm}
.stack{display:flex;flex-direction:column;gap:3.5mm}
.grow{flex:1}

/* ---------- بطاقات ---------- */
.card{border:.8pt solid var(--line);border-radius:3mm;padding:4.5mm;background:#fff}
.card.tint{background:var(--soft)}
.card.brand{background:var(--brand-soft);border-color:#c7d2fe}
.card.cyan{background:var(--cyan-soft);border-color:#a5f3fc}
.card h4{font-size:10.5pt;margin-bottom:1.5mm}
.card p{font-size:9.2pt;color:var(--soft-ink);line-height:1.65}
.card .ico{width:9mm;height:9mm;border-radius:2.4mm;background:var(--brand-soft);color:var(--brand);
  display:flex;align-items:center;justify-content:center;margin-bottom:3mm}
.card .ico svg{width:5mm;height:5mm}
.card .n{font-family:"IBM Plex Mono",monospace;font-size:8.5pt;font-weight:600;color:var(--brand);display:block;margin-bottom:1.5mm}

.kpi{border:.8pt solid var(--line);border-radius:3mm;padding:4mm;text-align:center;background:#fff}
.kpi .v{font-size:19pt;font-weight:900;line-height:1;
  background:linear-gradient(90deg,var(--brand),var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent}
.kpi .k{font-size:8.5pt;color:var(--muted);font-weight:700;margin-top:1.5mm;line-height:1.4}

/* قائمة نقاط */
.bul li{position:relative;padding-inline-start:5.5mm;margin-bottom:2.2mm;font-size:9.6pt;color:var(--soft-ink)}
.bul li::before{content:"";position:absolute;inset-inline-start:0;top:2.1mm;width:2mm;height:2mm;border-radius:.6mm;background:var(--brand)}
.bul li b{color:var(--ink)}
.bul.ok li::before{background:var(--ok)}
.bul.bad li::before{background:var(--danger)}
.bul.tight li{margin-bottom:1.4mm;font-size:9.2pt}

/* ---------- جداول ---------- */
table{width:100%;border-collapse:collapse;font-size:9pt}
caption{caption-side:top;text-align:start;font-size:8.5pt;font-weight:800;color:var(--muted);padding-bottom:2mm}
th,td{padding:2.6mm 3mm;text-align:start;border-bottom:.6pt solid var(--line)}
thead th{background:var(--night);color:#fff;font-weight:800;font-size:8.8pt;border-bottom:0}
thead th:first-child{border-start-start-radius:2mm}
thead th:last-child{border-start-end-radius:2mm}
tbody tr:nth-child(even){background:var(--soft)}
tbody td b{font-weight:800}
table.compact th,table.compact td{padding:2mm 2.6mm;font-size:8.6pt}
.t-num{font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;white-space:nowrap}
.t-center{text-align:center}

/* وسوم */
.tag{display:inline-block;padding:.6mm 2.4mm;border-radius:99px;font-size:7.8pt;font-weight:800;line-height:1.7}
.tag.ok{background:#ccfbf1;color:#0f766e}
.tag.brand{background:var(--brand-soft);color:var(--brand-2)}
.tag.warn{background:#fef3c7;color:var(--warn)}
.tag.grey{background:#e8edf5;color:var(--muted)}

/* شريط تنبيه */
.note{display:flex;gap:3mm;padding:3.5mm 4mm;border-radius:2.5mm;font-size:9pt;
  background:var(--brand-soft);border:.7pt solid #c7d2fe;color:#312e81}
.note.warn{background:#fffbeb;border-color:#fde68a;color:#78350f}
.note.grey{background:var(--soft);border-color:var(--line);color:var(--soft-ink)}
.note b{display:block;margin-bottom:.8mm}

/* ---------- مخططات ---------- */
.figure{border:.8pt solid var(--line);border-radius:3mm;padding:4mm;background:var(--soft)}
.figure.dark{background:var(--night);border-color:#1e293b}
.figure svg{width:100%;height:auto;display:block}
.fig-cap{font-size:8.2pt;color:var(--muted);font-weight:700;margin-top:2.5mm;text-align:center}
.figure.dark + .fig-cap{color:var(--muted)}

/* ---------- لقطات النظام ---------- */
.shot{border-radius:2.4mm;overflow:hidden;border:.7pt solid var(--line);background:#0f1a2c;box-shadow:0 2mm 5mm rgba(11,18,32,.10)}
.shot-bar{display:flex;align-items:center;gap:2.5mm;padding:1.8mm 3mm;background:#141f33}
.shot-bar .dots{display:flex;gap:1.2mm}
.shot-bar .dots i{width:1.6mm;height:1.6mm;border-radius:50%;background:#2c3a52}
.shot-bar .dots i:first-child{background:#3d4d69}
.shot-bar .url{
  flex:1;font-family:"IBM Plex Mono",monospace;font-size:6.6pt;color:#7f92ad;direction:ltr;
  background:#0d1626;border-radius:1.4mm;padding:.7mm 2.4mm;border:.4pt solid rgba(255,255,255,.06);
}
.shot img{width:100%;display:block}
.shot-cap{font-size:8pt;color:var(--muted);font-weight:700;margin-top:2mm;text-align:center}
.shot-cap b{color:var(--ink)}

/* شرح جانبي مرقّم بجانب اللقطة */
.callouts{display:grid;gap:2.5mm}
.callout{display:flex;gap:3mm;align-items:flex-start}
.callout .n{
  width:6.5mm;height:6.5mm;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;
  background:var(--brand);color:#fff;font-family:"IBM Plex Mono",monospace;font-size:8pt;font-weight:600;
}
.callout .n.cy{background:var(--cyan)}
.callout b{display:block;font-size:9.6pt;line-height:1.5}
.callout span{display:block;font-size:8.8pt;color:var(--soft-ink);line-height:1.55}

/* ---------- توقيعات ---------- */
.sign{display:grid;grid-template-columns:1fr 1fr;gap:8mm;margin-top:6mm}
.sign div{border-top:.8pt solid var(--ink);padding-top:2.5mm;font-size:9pt;font-weight:700}
.sign span{display:block;color:var(--muted);font-weight:600;font-size:8.2pt;margin-top:1mm}

/* ---------- شريط الأدوات (شاشة فقط) ---------- */
.toolbar{
  position:fixed;inset-block-start:0;inset-inline:0;z-index:50;
  background:rgba(11,19,36,.95);backdrop-filter:blur(10px);color:#fff;
  padding:10px 18px;display:flex;align-items:center;justify-content:space-between;gap:14px;
  font-size:14px;box-shadow:0 6px 24px rgba(11,18,32,.24);
}
.toolbar .tb-title{font-weight:800;display:flex;align-items:center;gap:10px}
.toolbar .tb-title span{font-weight:600;color:#93a3ba;font-size:13px}
.toolbar .tb-actions{display:flex;gap:8px}
.tb-btn{display:inline-flex;align-items:center;gap:7px;padding:9px 16px;border-radius:10px;
  font-weight:800;font-size:13.5px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);color:#fff;cursor:pointer}
.tb-btn:hover{background:rgba(255,255,255,.18)}
.tb-btn.primary{background:linear-gradient(90deg,#4f46e5,#0891b2);border-color:transparent}
.tb-btn svg{width:16px;height:16px}
body{padding-top:58px}

/* ---------- الطباعة ---------- */
@media print{
  body{background:#fff;padding-top:0;font-size:10.5pt}
  .toolbar{display:none !important}
  .page{margin:0;box-shadow:none;break-inside:avoid;page-break-inside:avoid}
}

/* ---------- شاشات صغيرة (معاينة فقط) ---------- */
@media screen and (max-width:840px){
  body{background:#fff}
  .page{width:100%;height:auto;min-height:0;margin:0 0 6mm;box-shadow:none;
    border-bottom:6px solid #e9edf4;padding:8mm 6mm}
  .page.cover{padding:0}
  .g3,.g4,.g2,.g-6-4,.g-4-6{grid-template-columns:1fr}
  .cover-meta{grid-template-columns:1fr}
  .cover-meta div{border-inline-start:0;border-top:.6pt solid rgba(255,255,255,.14)}
  .toolbar{position:sticky}
  table{font-size:8.4pt}
}