/* Signs "Campaign Book" report — a Rotana-style, 16:9 landscape client
   deliverable (cover · campaign summary + KPIs · inventory matrix · per-medium
   section dividers · per-site spec cards · thank-you). Rotana's exact green
   palette. Self-contained: this file styles BOTH the picker/list chrome and the
   printable slides, so report-campaign.html never loads reports.css (whose A4
   print rules would fight the landscape @page here).

   Slides size themselves with container-query units (cqw/cqh) so a single
   layout is pixel-consistent on screen (scaled preview) AND in print
   (297×167mm ≈ 16:9), with no per-breakpoint font tuning. */

:root{
  /* Rotana theme (extracted from the .pptx theme1.xml) */
  --field:#044d26;        /* dark green slide field (covers / dividers) */
  --field-2:#02371b;      /* deeper green for gradients */
  --mid:#14A456;          /* mid green (blobs) */
  --bright:#50EC8F;       /* bright green (blob + accent text) */
  --bright-2:#0CE66C;
  --pale:#B4F1AC;         /* pale green */
  --head-row:#1f9e52;     /* table header green */
  --ink:#0E1B12; --muted:#5b6b60; --muted-2:#93a49a;
  --line:#E3EAE4; --line-2:#cdd8d0; --bg:#eef2ef;
  --danger:#B91C1C; --warning:#92681E;
}
*{box-sizing:border-box}
body{margin:0;font-family:'Noto Kufi Arabic','Segoe UI',sans-serif;background:var(--bg);color:var(--ink);line-height:1.5}
.ic{width:1em;height:1em;display:inline-block;vertical-align:-0.14em;flex:none}
.ltr{direction:ltr;unicode-bidi:isolate}

/* ============================ PICKER / LIST ============================ */
.camp-topbar{display:flex;align-items:center;gap:14px;background:#fff;border-bottom:1px solid var(--line);padding:14px 24px;position:sticky;top:0;z-index:100}
.camp-brand{display:flex;align-items:center;gap:12px}
.camp-brand .mark{width:40px;height:40px;border-radius:11px;background:linear-gradient(135deg,var(--mid),var(--field));display:grid;place-items:center;color:#fff;font-weight:900}
.camp-brand .mark img{width:72%;height:72%;object-fit:contain}
.camp-brand h1{font-size:1.05rem;font-weight:800;margin:0;color:var(--field)}
.camp-brand .sub{font-size:.78rem;color:var(--muted)}
.camp-topbar .rbtn.home{margin-inline-start:auto}

.rbtn{border:1px solid var(--line-2);background:#fff;color:var(--ink);font-family:inherit;font-size:.84rem;font-weight:700;padding:8px 14px;border-radius:9px;cursor:pointer;text-decoration:none;display:inline-block;transition:.15s}
.rbtn:hover{border-color:var(--mid);background:#F0F7F4}
.rbtn.primary{background:var(--mid);color:#fff;border-color:var(--mid)}
.rbtn.primary:hover{background:var(--field)}

.camp-wrap{max-width:1160px;margin:0 auto;padding:22px 20px}

/* live summary strip — the manager roll-up, updates as filters change */
.camp-summary{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-bottom:16px}
.camp-summary .s-cell{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.camp-summary .s-val{font-size:1.5rem;font-weight:900;color:var(--field);line-height:1.1}
.camp-summary .s-val.good{color:#1f7a3a}
.camp-summary .s-lbl{font-size:.72rem;color:var(--muted);font-weight:600;margin-top:2px}
@media (max-width:820px){.camp-summary{grid-template-columns:repeat(3,1fr)}}

.camp-tools{display:flex;flex-direction:column;gap:14px;margin-bottom:16px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px}
.filt-bar{display:flex;flex-wrap:wrap;gap:10px;align-items:end}
.filt-bar .filt{display:flex;flex-direction:column;gap:3px;font-size:.74rem;font-weight:700;color:var(--muted)}
.filt-bar .filt select{font-family:inherit;font-size:.86rem;padding:7px 9px;border:1px solid var(--line-2);border-radius:8px;background:#fff;min-width:130px}
.filt-bar .filt-reset{align-self:end;border:1px solid var(--line-2);background:#fff;border-radius:8px;padding:7px 12px;font-family:inherit;font-weight:700;cursor:pointer}
.filt-bar .filt-count{align-self:end;font-size:.78rem;color:var(--muted);padding-bottom:8px}

/* campaign metadata (feeds the summary slide) */
.camp-meta{display:flex;flex-wrap:wrap;gap:12px;align-items:end;border-top:1px dashed var(--line-2);padding-top:14px}
.camp-meta .m{display:flex;flex-direction:column;gap:3px;font-size:.72rem;font-weight:700;color:var(--muted)}
.camp-meta .m input{font-family:inherit;font-size:.86rem;padding:7px 9px;border:1px solid var(--line-2);border-radius:8px;background:#fff}
.camp-meta .m input[type=text]{min-width:190px}
.camp-meta .m .days{font-size:.86rem;font-weight:800;color:var(--field);padding:7px 0}
.camp-meta .m input.bad{border-color:var(--danger);background:#fef2f2}
.camp-date-err{color:var(--danger);font-size:.78rem;font-weight:700;border-top:1px dashed var(--line-2);padding-top:12px}

.camp-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;border-top:1px dashed var(--line-2);padding-top:14px}
.sel-info{font-size:.8rem;color:var(--muted);margin-inline-end:auto}
.sel-info strong{color:var(--mid);font-weight:800}

.list-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.lcard{background:#fff;border:1px solid var(--line);border-radius:10px;padding:14px 16px;cursor:pointer;position:relative;transition:.15s}
.lcard:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.06);border-color:var(--mid)}
.lcard.sel{border-color:var(--mid);box-shadow:0 0 0 2px #CFE7DC}
.lcard-h{display:flex;align-items:center;justify-content:space-between;font-size:1.02rem;color:var(--field);font-weight:800}
.lcard-h .chk{width:24px;height:24px;border-radius:50%;border:2px solid var(--line-2);color:#fff;display:grid;place-items:center;font-size:.72rem;flex-shrink:0;transition:.15s}
.lcard.sel .chk{background:var(--mid);border-color:var(--mid)}
.lcard-sub{font-size:.82rem;color:var(--ink);margin-top:4px}
.lcard-meta{font-size:.74rem;color:var(--muted);margin-top:6px}
.empty{grid-column:1/-1;text-align:center;color:var(--muted);padding:50px 0}

/* ============================ REPORT SCREEN ============================ */
.camp-toolbar{position:sticky;top:0;z-index:90;display:flex;align-items:center;gap:14px;background:#fff;border-bottom:1px solid var(--line);padding:12px 20px}
.camp-toolbar h2{font-size:.95rem;font-weight:800;margin:0 auto 0 0;color:var(--muted)}
#bookContent{padding:20px 0;background:var(--bg)}

/* ---- 16:9 slide (screen preview scales; print is 297×167mm) ------------- */
.slide{
  position:relative;width:min(100%,1180px);aspect-ratio:16/9;
  margin:22px auto;background:#fff;overflow:hidden;
  box-shadow:0 6px 26px rgba(0,0,0,.14);
  container-type:size;color:var(--ink);direction:ltr;
}
.slide.dark{background:var(--field);color:#fff}

/* organic blobs (cover / divider / thank-you) */
.blob{position:absolute;border-radius:50%;pointer-events:none}
.blob.b1{right:-5%;top:6%;width:30%;height:86%;background:var(--bright);transform:rotate(16deg)}
.blob.b2{right:-6%;top:-20%;width:22%;height:54%;background:var(--mid);opacity:.85}
.blob.b3{left:42%;bottom:-24%;width:20%;height:56%;background:var(--mid);opacity:.8;transform:rotate(-12deg)}

/* brand wordmark (bottom-left on dark slides) */
.wm{position:absolute;left:4.5cqw;bottom:5cqh;display:flex;align-items:center;gap:1.4cqw;z-index:3}
.wm .dot{width:3.2cqw;height:3.2cqw;border-radius:50%;border:.35cqw solid #fff;display:grid;place-items:center}
.wm .dot::after{content:'';width:1.4cqw;height:1.4cqw;border-radius:50%;background:#fff}
.wm .wt{color:#fff;font-weight:800;line-height:1;letter-spacing:.1cqw}
.wm .wt b{display:block;font-size:2.2cqw}
.wm .wt span{display:block;font-size:1.4cqw;opacity:.8;letter-spacing:.4cqw}

/* cover — flow block so a wrapped title never collides with the subtitle */
.cover .c-block{position:absolute;left:4.5cqw;top:12cqh;width:62%;z-index:3}
.cover .c-title{font-size:6cqw;font-weight:800;color:#fff;line-height:1.04;margin:0}
.cover .c-sub{font-size:2.6cqw;font-style:italic;font-weight:700;color:var(--bright);margin-top:1.6cqh}
.cover .c-tag{font-size:1.6cqw;color:rgba(255,255,255,.78);margin-top:1.1cqh}

/* section divider — vertically-centred flow block */
.divider .d-block{position:absolute;left:4.5cqw;top:0;bottom:0;width:64%;display:flex;flex-direction:column;justify-content:center;z-index:3}
.divider .d-title{font-size:5.4cqw;font-weight:800;color:#fff;line-height:1.04;margin:0}
.divider .d-sub{font-size:2.8cqw;font-style:italic;font-weight:700;color:var(--bright);margin-top:1.4cqh}

/* thank-you */
.thanks .t-word{position:absolute;left:4.5cqw;top:38cqh;font-size:7cqw;font-weight:800;color:#fff;z-index:3}
.thanks .t-sub{position:absolute;left:4.7cqw;top:54cqh;font-size:2cqw;color:rgba(255,255,255,.8);z-index:3}

/* ---- summary slide ---------------------------------------------------- */
.pad{position:absolute;inset:0;padding:6cqh 5cqw;display:flex;flex-direction:column}
.s-title{font-size:4.4cqw;font-weight:800;color:var(--field);line-height:1.1}
.s-rule{width:9cqw;height:.7cqh;background:var(--mid);border-radius:2px;margin:1.4cqh 0 3cqh}
.summary .cols{display:grid;grid-template-columns:1fr 1fr;gap:3cqw;flex:1}
.dl{display:grid;grid-template-columns:auto 1fr;gap:.9cqh 1.6cqw;align-content:start}
.dl .k{font-size:1.7cqw;font-weight:800;color:var(--mid)}
.dl .v{font-size:1.7cqw;color:var(--ink);font-weight:600}
.dl .grp{grid-column:1/-1;font-size:1.9cqw;font-weight:800;color:var(--field);margin-top:1.6cqh}
/* KPI band on the summary slide */
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4cqw;align-content:start}
.kpi{background:var(--field);color:#fff;border-radius:1.4cqw;padding:2cqh 1.6cqw}
.kpi .n{font-size:3.6cqw;font-weight:900;line-height:1}
.kpi .n.good{color:var(--bright)}
.kpi .l{font-size:1.25cqw;opacity:.85;margin-top:.5cqh;font-weight:600}

/* ---- inventory matrix slide ------------------------------------------- */
.inv .inv-head{display:flex;align-items:baseline;gap:2cqw;margin-bottom:2cqh}
.inv .inv-head .tot{margin-inline-start:auto;font-size:1.7cqw;color:var(--muted);font-weight:700}
.inv .inv-head .tot b{color:var(--field);font-size:2.4cqw}
.inv .inv-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:2.4cqw;flex:1;min-height:0}
.itab{width:100%;border-collapse:collapse;font-size:1.35cqw}
.itab th{background:var(--head-row);color:#fff;text-align:left;padding:.7cqh .8cqw;font-weight:700}
.itab th.f,.itab td.f{text-align:right;width:16%}
.itab td{padding:.6cqh .8cqw;border-bottom:1px solid var(--line);color:var(--ink)}
.itab td.f{color:var(--field);font-weight:800}
.itab td.c{color:var(--muted);white-space:nowrap}
.itab tr.gap td{border-bottom:0;height:1.2cqh}

/* ---- coverage map slide ----------------------------------------------- */
.covmap .map-box{flex:1;min-height:0;margin:0 auto}
.covmap .map-box svg{width:100%;height:100%;display:block}
.covmap .map-legend{font-size:1.2cqw;color:var(--muted);margin-top:1cqh}

/* ---- per-site spec card ----------------------------------------------- */
.site{display:flex;flex-direction:column}
.site .photo{flex:1;background:#dfe7e1;position:relative;overflow:hidden}
.site .photo .stage{position:absolute;inset:0;display:grid;gap:.3cqw;background:#dfe7e1}
.site .photo .stage img{width:100%;height:100%;object-fit:cover;display:block;min-width:0;min-height:0}
.site .photo .stage.one{grid-template-columns:1fr}
.site .photo .stage.two{grid-template-columns:1fr 1fr}
.site .photo .stage.three{grid-template-columns:1.7fr 1fr;grid-template-rows:1fr 1fr}
.site .photo .stage.three img:first-child{grid-row:1 / span 2}
.site .photo .stage.grid{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}
.site .photo .stage.empty{place-items:center}
.site .photo .ph{color:var(--muted-2);font-size:2cqw;font-weight:800;letter-spacing:.3cqw;z-index:1}
.site .photo .cnt{position:absolute;top:2cqh;right:1.6cqw;z-index:2;background:rgba(4,77,38,.85);color:#fff;font-size:1.2cqw;font-weight:700;padding:.5cqh 1cqw;border-radius:1cqw}
.site .band{height:33%;display:flex;background:#fff}
.site .label{width:26%;background:var(--field);color:#fff;padding:2.4cqh 1.8cqw;display:flex;flex-direction:column;justify-content:center;gap:.6cqh}
.site .label .t{font-size:2.7cqw;font-weight:800;line-height:1.06}
.site .label .st{font-size:1.7cqw;font-weight:700;color:var(--bright)}
.site .spec{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:0 2.4cqw;padding:2cqh 2.2cqw;align-content:center}
.site .spec .row{display:grid;grid-template-columns:auto 1fr;gap:1.2cqw;padding:.55cqh 0;border-bottom:1px dashed var(--line);align-items:baseline}
.site .spec .row .k{font-size:1.35cqw;font-weight:800;color:var(--mid);white-space:nowrap}
.site .spec .row .v{font-size:1.35cqw;color:var(--ink);font-weight:600}
.site .spec .row .v a{color:var(--field);font-weight:700}
.site .spec .row .v.mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-weight:600}

/* photo editor — screen-only strip over the site photo (no-print): pick which of
   the submission's photos show, replace one, or add more; the printed layout
   follows the number shown (1 full / 2 side-by-side / 3 / 4-grid). */
.site .photo .photo-editor{position:absolute;left:0;right:0;bottom:0;z-index:5;padding:1cqh 1.4cqw;background:linear-gradient(to top,rgba(4,77,38,.92),rgba(4,77,38,0))}
.site .photo .pe-strip{display:flex;align-items:center;gap:.8cqw;overflow-x:auto}
.site .photo .pe-thumb{flex:0 0 auto;position:relative;width:6.2cqw;height:4.2cqw;border:.3cqw solid rgba(255,255,255,.5);border-radius:.7cqw;overflow:hidden;cursor:pointer;background:#000;opacity:.5;transition:.15s}
.site .photo .pe-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.site .photo .pe-thumb:hover{opacity:.85}
.site .photo .pe-thumb.on{opacity:1;border-color:var(--bright);box-shadow:0 0 0 .22cqw rgba(80,236,143,.6)}
.site .photo .pe-thumb .pe-tick{position:absolute;top:.35cqh;left:.35cqw;min-width:1.9cqw;height:1.9cqw;padding:0 .3cqw;border-radius:1cqw;background:var(--bright);color:#04351f;font-size:1.15cqw;font-weight:900;display:none;align-items:center;justify-content:center;line-height:1}
.site .photo .pe-thumb.on .pe-tick{display:flex}
.site .photo .pe-thumb .pe-rep{position:absolute;top:.35cqh;right:.35cqw;width:1.9cqw;height:1.9cqw;border-radius:50%;background:rgba(0,0,0,.62);color:#fff;font-size:1.1cqw;font-weight:800;display:flex;align-items:center;justify-content:center;line-height:1;cursor:pointer}
.site .photo .pe-thumb .pe-rep:hover{background:var(--field)}
.site .photo .pe-add{flex:0 0 auto;align-self:center;padding:.6cqh 1cqw;border:.16cqw solid rgba(255,255,255,.7);border-radius:.7cqw;background:rgba(4,77,38,.65);color:#fff;font-family:inherit;font-size:1.1cqw;font-weight:800;cursor:pointer;white-space:nowrap}
.site .photo .pe-add:hover{background:var(--field)}
.site .photo .pe-layouts{flex:0 0 auto;display:flex;align-items:center;gap:.45cqw;margin-inline-start:1cqw;padding-inline-start:1cqw;border-inline-start:.16cqw solid rgba(255,255,255,.3)}
.site .photo .pe-lay-lbl{color:#fff;font-size:1cqw;font-weight:800;white-space:nowrap;opacity:.85}
.site .photo .pe-layouts button{flex:0 0 auto;min-width:2.4cqw;height:2.4cqw;padding:0 .4cqw;border:.16cqw solid rgba(255,255,255,.6);border-radius:.5cqw;background:rgba(4,77,38,.55);color:#fff;font-family:inherit;font-size:1.15cqw;font-weight:800;cursor:pointer;line-height:1}
.site .photo .pe-layouts button:hover{background:var(--field)}
.site .photo .pe-layouts button.on{background:var(--bright);color:#04351f;border-color:var(--bright)}

/* In book mode only the toolbar back button shows (hide the picker topbar). */
body.book-mode .camp-topbar{display:none}

/* uploading overlay */
.site .photo.busy::after{content:'Uploading…';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.72);color:var(--field);font-weight:900;font-size:2cqw;z-index:6}

/* save toast */
.camp-toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);z-index:200;background:var(--field);color:#fff;font-size:.86rem;font-weight:700;padding:11px 18px;border-radius:10px;box-shadow:0 8px 26px rgba(0,0,0,.22);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
.camp-toast.show{opacity:1;transform:translate(-50%,0)}

/* keyboard focus + bidi isolation for mixed Arabic/English values */
.lcard:focus-visible,.pe-thumb:focus-visible,.pe-rep:focus-visible,.pe-add:focus-visible,.pe-layouts button:focus-visible{outline:2px solid var(--mid);outline-offset:2px}
.site .spec .row .v,.site .label .t,.site .label .st,.itab td,.dl .v{unicode-bidi:plaintext}

/* per-slide footer ref (small, bottom-right on white content slides) */
.slide .foot{position:absolute;right:2cqw;bottom:1.4cqh;font-size:1.05cqw;color:var(--muted-2);z-index:4}

/* ============================ PRINT =================================== */
/* Gated on body.book-mode (set when a book is shown, cleared on Back) so a
   Ctrl+P from the picker prints nothing stale. */
@media print{
  body{background:#fff}
  .camp-topbar,.camp-toolbar,.no-print{display:none !important}
  body.book-mode #pickScreen{display:none !important}
  body.book-mode #bookScreen{display:block !important}
  #bookContent{padding:0}
  @page{size:297mm 167mm;margin:0}
  html,body{margin:0;padding:0}
  .slide{width:297mm;height:167mm;margin:0;box-shadow:none;page-break-after:always;break-after:page}
  .slide:last-of-type{page-break-after:auto;break-after:auto}
  /* keep every green fill/ink in print */
  .slide.dark,.blob,.wm .dot,.wm .dot::after,.kpi,.itab th,.site .label,.site .photo,.site .photo .cnt,.s-rule,.cover .c-sub,.divider .d-sub,.itab td.f{
    -webkit-print-color-adjust:exact !important;print-color-adjust:exact !important;
  }
  .no-print-link{display:none !important}
  .itab tr,.site .spec .row{break-inside:avoid;page-break-inside:avoid}
}