/* مقادير — المستندات (ملف المشروع وأي ملف بيتسلّم للعميل).
   نفس قواعد app.css: توكنات بس، سلم المسافات، من غير ظلال ولا تدرجات، RTL منطقي. */

.doc{max-width:960px; padding-block:var(--space-6)}
.doc-page .site-head .btn--primary{margin-inline-start:0}
.doc-print{margin-inline-start:auto; padding-inline:var(--space-4); font-size:14px; display:none}

/* أول صفحة */
.cover{display:grid; gap:var(--space-4)}
.cover__top{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--space-3)}
.cover__logo{height:56px; width:auto}
.cover__logo.print-only{display:none}
.cover__h{font-size:18px; margin-block-start:var(--space-2)}
.meta{display:grid; grid-template-columns:repeat(2, 1fr); gap:var(--space-3) var(--space-5); margin:0;
  padding:var(--space-4) var(--space-5); background:var(--surface-card); border:var(--hairline) solid var(--line); border-radius:var(--radius-lg)}
.meta dt{font-size:13px; color:var(--ink-muted)}
.meta dd{margin:0; font-weight:700}
.price-box{display:grid; gap:var(--space-1); padding:var(--space-5); background:var(--surface-dark); color:var(--ink-inverse); border-radius:var(--radius-lg)}
.price-box .caption{color:var(--ink-inverse); opacity:.75}
.price-box strong{font-size:28px; font-weight:800; line-height:1.3; font-variant-numeric:tabular-nums}
.qty-grid{display:grid; grid-template-columns:repeat(2, 1fr); gap:var(--space-2)}
.qty-grid li{display:grid; gap:var(--space-1); padding:var(--space-3) var(--space-4);
  background:var(--surface-card); border:var(--hairline) solid var(--line); border-radius:var(--radius-md)}
.qty-grid strong{font-size:20px; font-weight:800; line-height:1.2; font-variant-numeric:tabular-nums}
.qty-grid span{font-size:13px; color:var(--ink-muted)}
.inc{padding:var(--space-4) var(--space-5); background:var(--surface-card); border:var(--hairline) solid var(--line); border-radius:var(--radius-lg)}
.inc h3{font-size:16px; margin-block-end:var(--space-2)}

/* أرقام زي 80 × 50 بتتقري من الشمال لليمين حتى جوه جملة عربي */
.num{display:inline-block; direction:ltr; unicode-bidi:isolate}

/* المراحل */
.stage{margin-block-start:var(--space-8)}
.stage-head{display:flex; gap:var(--space-4); align-items:flex-start; margin-block-end:var(--space-5)}
.stage-head .muted{margin-block-start:var(--space-2)}
.stage-no{flex:none; width:48px; height:48px; border-radius:var(--radius-md); display:grid; place-items:center;
  background:var(--brand-btn); color:var(--on-brand); font-size:18px; font-weight:800}
.sub{font-size:18px; margin-block:var(--space-6) var(--space-3)}
.cols{display:grid; gap:var(--space-4)}
.card h3{font-size:18px; margin-block-end:var(--space-2)}
.note-line,.legend-line{margin-block:var(--space-3)}

.checks,.crosses{display:grid; gap:var(--space-2)}
.checks li,.crosses li{position:relative; padding-inline-start:var(--space-5); font-size:14px}
.checks li::before{
  content:""; position:absolute; inset-inline-start:4px; inset-block-start:6px; width:6px; height:11px;
  border:solid var(--success); border-width:0 2px 2px 0; transform:rotate(45deg);
}
.crosses li::before,.crosses li::after{
  content:""; position:absolute; inset-inline-start:2px; inset-block-start:11px; width:12px; height:2px; background:var(--ink-muted);
  transform:rotate(45deg);
}
.crosses li::after{transform:rotate(-45deg)}

.kv{display:grid; margin:0}
.kv div{display:flex; justify-content:space-between; gap:var(--space-3); padding-block:var(--space-2); border-block-end:var(--hairline) solid var(--line); font-size:14px}
.kv div:last-child{border-block-end:0}
.kv dt{color:var(--ink-muted); flex:none}
.kv dd{margin:0; font-weight:700; text-align:end}

/* الضغط على المطبخ */
.stress{display:grid}
.stress li{display:grid; grid-template-columns:64px auto 1fr; gap:var(--space-2) var(--space-3); align-items:center;
  padding-block:var(--space-2); border-block-end:var(--hairline) solid var(--line); font-size:14px}
.stress li:last-child{border-block-end:0}
.stress__k{font-weight:700}
.stress__d{color:var(--ink-muted); font-size:13px; line-height:1.5}
.meter{display:flex; gap:var(--space-1)}
.meter i{width:14px; height:8px; border-radius:var(--radius-pill); background:var(--surface-200); border:var(--hairline) solid var(--line)}
.meter i.on{background:var(--brand); border-color:var(--brand)}

.usage{display:grid; gap:var(--space-2)}
.usage li{display:grid; gap:var(--space-1); padding:var(--space-3) var(--space-4);
  background:var(--surface-card); border:var(--hairline) solid var(--line); border-radius:var(--radius-md); font-size:14px}
.usage span{color:var(--ink-muted)}
.usage svg{display:none; width:18px; height:18px; fill:none; stroke:var(--brand); stroke-width:2; stroke-linecap:round; stroke-linejoin:round}

/* التصميم */
.render{margin:0 0 var(--space-4)}
.render img{width:100%; border-radius:var(--radius-lg); border:var(--hairline) solid var(--line)}
.render figcaption{margin-block-start:var(--space-2)}
/* الغلاف الطولي (رندر موبايل) مايعدّيش الشاشة: بيتصغّر ويتوسّط بدل ما ياخد الصفحة كلها */
.cover .render img{width:auto; max-width:100%; max-height:80vh; margin-inline:auto; display:block}
.t-units th,.t-units td{vertical-align:middle}
.place{display:flex; align-items:center; gap:var(--space-3)}
.mm{flex:none; width:96px; height:auto}
.mm-wall{fill:var(--surface-100); stroke:var(--line); stroke-width:2}
.mm-unit{fill:var(--surface-200); stroke:var(--ink-muted); stroke-width:1.5}
.mm-on{fill:var(--brand); stroke:var(--brand); stroke-width:1.5}
.mm-corner{fill:var(--ink)}

/* المواصفة */
.spec{display:grid; gap:var(--space-2)}
.spec li{display:grid; grid-template-columns:56px 1fr auto; gap:var(--space-3); align-items:center; padding:var(--space-2) var(--space-3);
  background:var(--surface-card); border:var(--hairline) solid var(--line); border-radius:var(--radius-md)}
.spec img{width:56px; height:56px; border-radius:50%; object-fit:cover; border:var(--hairline) solid var(--line)}
.spec li div{display:grid}
.spec strong{font-size:14px}
.brand{font-size:13px; font-weight:800; padding:var(--space-1) var(--space-3); border-radius:var(--radius-pill); background:var(--surface-200); white-space:nowrap}

/* المواصفة بالمجموعات: صورة كبيرة للمجموعة، وتحتها البنود */
.specg-list{display:grid; gap:var(--space-4)}
.specg{border:var(--hairline) solid var(--line); border-radius:var(--radius-lg); background:var(--surface-card); overflow:hidden}
.specg__head{display:flex; align-items:center; gap:var(--space-4); padding:var(--space-4); background:var(--surface-200); border-block-end:var(--hairline) solid var(--line)}
.specg__head img{width:88px; height:88px; flex:none; object-fit:cover; border-radius:var(--radius-md); border:var(--hairline) solid var(--line)}
.specg__head h3{font-size:20px}
.specg__rows{margin:0}
.specg__cols{display:none}
.specg__row{display:grid; grid-template-columns:1fr; gap:var(--space-1); padding:var(--space-3) var(--space-4); border-block-end:var(--hairline) solid var(--line)}
.specg__row:last-child{border-block-end:0}
.specg__row dt{font-size:13px; color:var(--ink-muted)}
.specg__row dd{margin:0; display:grid}
.specg__row strong{font-size:17px}
.specg__row dd span{font-size:13px; color:var(--ink-muted)}
.specg__brand{font-size:15px; font-weight:800}
.specg__brand .caption{font-weight:400}

/* رأس المجموعة من غير صورة */
.specg__head--text{padding:var(--space-3) var(--space-4)}

/* الإكسسوارات بالقطعة: صورة واسم وسعر */
.acc-list{display:grid; gap:var(--space-2)}
.acc{display:grid; grid-template-columns:72px 1fr auto; gap:var(--space-3); align-items:center; padding:var(--space-3);
  border:var(--hairline) solid var(--line); border-radius:var(--radius-md); background:var(--surface-card)}
.acc img{width:72px; height:72px; object-fit:cover; border-radius:var(--radius-md); border:var(--hairline) solid var(--line)}
.acc__body,.acc__price{display:grid; gap:var(--space-1)}
.acc__body strong{font-size:17px}
.acc__price{text-align:end}
.acc__price strong{font-size:17px; font-variant-numeric:tabular-nums}
.acc-total{max-width:none; margin-block-start:var(--space-3); text-align:end; font-size:15px}
.t-price td{white-space:nowrap}
.t-price tr.gap td{padding:var(--space-1); background:var(--surface-100)}
.t-price td.q{font-size:18px; font-weight:800; color:var(--ink)}


/* السعر */
tr.subtotal th,tr.subtotal td{font-weight:800; border-block-start:var(--hairline) solid var(--ink-muted)}
.factors{display:grid; gap:var(--space-3)}
.factors li{display:flex; gap:var(--space-3); align-items:flex-start}
.factors__n{flex:none; width:28px; height:28px; border-radius:50%; display:grid; place-items:center; background:var(--surface-200); font-size:13px; font-weight:800}
.next__cta{margin-block-start:var(--space-6)}
.approve{margin-block-start:var(--space-6); padding:var(--space-5); border:var(--hairline) solid var(--line); border-radius:var(--radius-lg); background:var(--surface-card)}
.approve h3{font-size:18px; margin-block-end:var(--space-2)}
.approve dl{display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--space-5); margin:var(--space-6) 0 0}
.approve dt{font-size:13px; color:var(--ink-muted)}
.approve dd{margin:var(--space-7) 0 0; border-block-start:var(--hairline) solid var(--ink)}

.doc-foot{border-block-start:var(--hairline) solid var(--line); margin-block-start:var(--space-7)}
.doc-foot .wrap{display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--space-2); padding-block:var(--space-5); font-size:13px; color:var(--ink-muted)}

@media (min-width:720px){
  .specg__row{grid-template-columns:140px 1fr 140px; align-items:center; gap:var(--space-4)}
  .specg__cols{display:grid; grid-template-columns:140px 1fr 140px; gap:var(--space-4); padding:var(--space-2) var(--space-4);
    font-size:12px; font-weight:700; color:var(--ink-muted); border-block-end:var(--hairline) solid var(--line)}
  .specg__brand .caption{display:none}
  .doc-print{display:inline-flex}
  .meta{grid-template-columns:repeat(3, 1fr)}
  .qty-grid{grid-template-columns:repeat(5, 1fr)}
  .cols{grid-template-columns:1fr 1fr}
  .usage li{grid-template-columns:1fr 18px 1fr; align-items:center; gap:var(--space-4)}
  .usage svg{display:block}
  .factors{grid-template-columns:1fr 1fr}
  .spec{grid-template-columns:1fr 1fr}
}

/* الطباعة: A4 فاتح دايمًا، وكل مرحلة بتبدأ في صفحة */
@page{size:A4; margin:12mm}
@media print{
  :root, :root:not([data-theme="print"]){
    --surface-100:#FFFFFF; --surface-200:#F1EBE0; --surface-card:#FFFFFF; --surface-dark:#1E1915;
    --ink:#2A231E; --ink-muted:#6B5D52; --ink-inverse:#FBF8F1; --line:#E3DACB;
    --brand:#C2562F; --brand-strong:#A84524; --brand-soft:#F7E4DA; --brand-btn:#A84524; --on-brand:#FBF8F1;
    --success:#2F6F4F;
  }
  html,body{font-size:12px}
  body{-webkit-print-color-adjust:exact; print-color-adjust:exact}
  .logo-dark{display:none !important}
  .cover__logo.logo-light{display:block !important}
  .doc{max-width:none; padding-block:0}
  .doc-foot{display:none}
  .cover{gap:var(--space-3)}
  .cover h1{font-size:28px}
  .stage{margin-block-start:var(--space-5)}
  .stage--break{break-before:page; margin-block-start:0}
  .stage-head,.card,.render,.factors li,.usage li,.price-box,.qty-grid,.inc,.approve,.spec li,.table-card,tr{break-inside:avoid}
  .stage-head,.sub{break-after:avoid}
  thead{display:table-header-group}
  th,td{padding:var(--space-2) var(--space-3)}
  .meta{grid-template-columns:repeat(3, 1fr)}
  .qty-grid{grid-template-columns:repeat(5, 1fr)}
  .cols{grid-template-columns:1fr 1fr}
  .usage li{grid-template-columns:1fr 18px 1fr; align-items:center; gap:var(--space-4)}
  .usage svg{display:block}
  .factors{grid-template-columns:1fr 1fr}
  .spec{grid-template-columns:1fr 1fr}
  .render img{max-height:110mm; object-fit:cover}
  .specg__row{grid-template-columns:120px 1fr 120px; align-items:center; gap:var(--space-4)}
  .specg__cols{display:grid; grid-template-columns:120px 1fr 120px; gap:var(--space-4); padding:var(--space-2) var(--space-4); font-size:11px; color:var(--ink-muted)}
  .acc{break-inside:avoid}
  .specg__brand .caption{display:none}
  .specg{break-inside:avoid}
  a{text-decoration:none}
}