/* ====== Viewer CSS - PDF Viewer, Canvas, Crop Rectangle, Page Rail, Download Mode, Help Overlay ====== */

/* ===== Viewer (center) ===== */
#stageArea{
  grid-column:3/4; grid-row:2/3;
  display:grid;
  grid-template-rows: 1fr auto;
  min-width:0; min-height:0;
  position:relative;
}
#stage{ grid-row:1/2; }

#stage{
  flex:1 1 0; width:100%; height:100%;
  min-width:0; min-height:0;
  display:flex; align-items:center; justify-content:center;
  background:#f4f4f4; border:1px solid var(--border);
  border-radius:8px; box-shadow:0 1px 4px rgba(0,0,0,.04);
  overflow:auto;
}
html[data-theme="dark"] #stage{ background:#0b1220; }

#pageWrap{ 
  position:relative; 
  display:inline-block;
  max-width: 100%;
  max-height: 100%;
}
#pdfCanvas{ 
  display:block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
#overlay{ 
  position:absolute; 
  left:0; 
  top:0; 
  pointer-events:auto;
  max-width: 100%;
  max-height: 100%;
}

/* === resize handles for selection rect === */
.crop-rect{ position:absolute; border:2px dashed #1976d2; background:rgba(25,118,210,.12); pointer-events:none; }
.crop-rect .h{
  position:absolute; width:10px; height:10px; background:#1e90ff; border:2px solid #fff; border-radius:50%;
  box-shadow:0 1px 4px rgba(0,0,0,.25); cursor:grab; pointer-events:auto;
}
.crop-rect .h.tl{ left:-7px; top:-7px;     cursor:nwse-resize; }
.crop-rect .h.tr{ right:-7px; top:-7px;    cursor:nesw-resize; }
.crop-rect .h.bl{ left:-7px; bottom:-7px;  cursor:nesw-resize; }
.crop-rect .h.br{ right:-7px; bottom:-7px; cursor:nwse-resize; }
.crop-rect .h.tc{ left:50%; top:-7px;      transform:translateX(-50%); cursor:ns-resize; }
.crop-rect .h.bc{ left:50%; bottom:-7px;   transform:translateX(-50%); cursor:ns-resize; }
.crop-rect .h.lc{ left:-7px; top:50%;      transform:translateY(-50%); cursor:ew-resize; }
.crop-rect .h.rc{ right:-7px; top:50%;     transform:translateY(-50%); cursor:ew-resize; }

/* ===== vertical page slider (thin) ===== */
#pageRail{ position:absolute; right:10px; top:10px; bottom:10px; width:20px; z-index:5; }
#pageRail .track{ position:absolute; left:50%; transform:translateX(-50%); top:0; bottom:0; width:6px; border-radius:999px; background:#e5e7eb; }
#pageFill{ position:absolute; left:50%; transform:translateX(-50%); top:0; width:6px; height:0%; border-radius:999px; background:var(--accent); }
#pageThumb{ position:absolute; left:50%; transform:translate(-50%,-50%); width:12px; height:12px; border-radius:50%; background:#1e90ff; top:0%; box-shadow:0 0 0 2px #fff, 0 1px 4px rgba(0,0,0,.2); }
#pageSlider{ position:absolute; inset:0; opacity:0; cursor:pointer; pointer-events:auto; }
html[data-theme="dark"] #pageRail .track{ background:#334155; }
html[data-theme="dark"] #pageThumb{ background:#4f46e5; }

/* لما تبقي مكبرة ومُضغوطة Space */
#stage.is-zoomed.space-pan { cursor: grab; }
/* أثناء السحب */
#stage.dragging { cursor: grabbing; }
/* عند الزووم: بطل توسيط الـFlex عشان السكروول يوصل لكل البُعد */
#stage.is-zoomed{
  align-items: flex-start;
  justify-content: flex-start;
}

/* Quick Guide (Help Overlay) */
#helpOverlay .modal {
  max-width: 860px;
  margin: 60px auto;
  background: #111827;
  border: 1px solid #374151;
  border-radius: 12px;
  padding: 20px;
  color: #f9fafb;
}
#helpOverlay h3 { margin: 0 0 4px 0; font-size: 20px; }
#helpOverlay p.sub { margin: 0 0 14px 0; color: #cbd5e1; font-size: 14px; }

#helpOverlay .grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 18px; }
@media (max-width: 820px) { #helpOverlay .grid { grid-template-columns: 1fr; } }

#helpOverlay ol.steps { margin: 0; padding-left: 18px; line-height: 1.7; }
#helpOverlay ol.steps > li { margin: 0 0 10px 0; }
#helpOverlay ol.steps strong { color: #fff; }

#helpOverlay .card {
  background: #0b1220; border: 1px solid #263043; border-radius: 10px; padding: 12px;
}
#helpOverlay .card h4 { margin: 0 0 8px 0; font-size: 14px; color: #cbd5e1; letter-spacing: .2px; text-transform: uppercase; }

#helpOverlay ul, #helpOverlay .tips { margin: 10px 0 0 0; padding-left: 18px; line-height: 1.7; }
#helpOverlay li { margin: 4px 0; }

#helpOverlay kbd { background:#0f172a; border:1px solid #334155; border-bottom-width:2px; padding:2px 6px; border-radius:6px; font-size:12px; color:#e2e8f0; }

#helpOverlay .toolbar-buttons span { display:inline-block; margin: 3px 8px 3px 0; font-size: 13px; }
#helpOverlay .muted { color:#93a5be; }
#helpOverlay .ok { color:#22c55e; }
#helpOverlay .warn { color:#fbbf24; }
#helpOverlay .err { color:#f87171; }

/* ==== Download mode ==== */
/* اخفاء التولبار والوسط واليمين */
body.mode-download header.toolbar { display:none; }
body.mode-download #stageArea,
body.mode-download #thumbsPane { display:none; }
/* Keep user bar visible in download mode - same width as right pane */
body.mode-download #userBar {
  display: flex !important;
  grid-column: 4/5; /* Same column as right pane */
  grid-row: 1/2; /* Same row */
  width: var(--side-r); /* Same width as right pane */
  margin-bottom: 0; /* Remove margin since it's in grid */
}
/* في وضع التحميل: اجعل الشجرة 20% واللوج 80% من ارتفاع العمود الأيسر */
body.mode-download #leftPane{ --tree-h: 20%; }
body.mode-download #treeWrap{ flex: 0 0 var(--tree-h); max-height:none; }
body.mode-download #logsPane{ flex: 1 1 auto;        max-height:none; }

/* (اختياري) انتقال ناعم لو حابب */
#treeWrap, #logsPane{
  transition: flex-basis .2s ease, max-height .2s ease;
}

/* الـ Overlay في المنتصف */
#downloadOverlay{
  grid-column:3/4;
  grid-row:2/3;
  display:none;
  place-items:center;
}
body.mode-download #downloadOverlay{ 
  display: grid !important; 
  visibility: visible !important;
}

/* كارت التحميل */
.download-card{
  background: var(--bg-pane);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 18px;
  width: min(560px, 92%);
  box-shadow:0 10px 30px rgba(0,0,0,.25);
}
.download-card h2{ margin:0 0 8px 0; }
.download-card p{ margin:0 0 10px 0; color:#9ca3af; }
.download-card .inner{ max-width:520px; }
.download-card textarea{
  width:100%; min-height:72px; border-radius:10px;
  border:1px solid var(--border); background:#0b1220; color:#e5e7eb;
  padding:12px; resize:vertical;
}
html[data-theme="dark"] .download-card textarea{
  background:#0b1220; color:#e5e7eb; border-color:var(--border);
}
#downloadActions{ display:flex; gap:8px; margin-top:10px; }
#btnSkip{ background:#374151; color:#fff; border-color:#4b5563; }
#dlNote{ margin-top:8px; font-size:12px; color:#9ca3af; }
#dlAlert{
  padding: 10px 12px;
  border-radius: 6px;
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.4;
  display: none;
}

#dlAlert.info{
  background: #dbeafe;
  border: 1px solid #93c5fd;
  color: #1e40af;
}

html[data-theme="dark"] #dlAlert.info{
  background: #1e3a8a;
  border-color: #3b82f6;
  color: #bfdbfe;
}

#dlAlert.success{
  background: #d1fae5;
  border: 1px solid #6ee7b7;
  color: #065f46;
}

html[data-theme="dark"] #dlAlert.success{
  background: #064e3b;
  border-color: #10b981;
  color: #a7f3d0;
}

#dlAlert.warning{
  background: #fef3c7;
  border: 1px solid #fcd34d;
  color: #92400e;
}

html[data-theme="dark"] #dlAlert.warning{
  background: #78350f;
  border-color: #f59e0b;
  color: #fde68a;
}

#dlAlert.error{
  display:none; margin-top:8px; padding:8px 10px;
  background:#7f1d1d; border:1px solid #991b1b; color:#fecaca; border-radius:8px;
}

/* أخفي الشريط تمامًا في وضع التحميل */
body.mode-download .data-bar{ display:none !important; }
/* لو عايز خلفية أقل ثِقَل */
html[data-theme="dark"] .data-bar{
  background: rgba(17,24,39,.92);
  backdrop-filter: blur(2px);
}