/* ====== Components CSS - Tree, Logs, Thumbnails, Buttons, Status Badges, Data Bar, Splitter ====== */

/* ===== LEFT PANE (Tree + Logs) — 50/50 split ===== */
#leftPane{
  grid-column:1/2; grid-row:1/3;
  display:flex; flex-direction:column;
  background:var(--bg-pane); border:1px solid var(--border);
  border-radius:8px; box-shadow:0 1px 4px rgba(0,0,0,.04);
  overflow:hidden;
}

/* النصف العلوي: أدوات + شجرة الشركات */
#treeWrap{
  flex:1 1 50%;
  min-height:0;
  padding:8px;
  border-bottom:1px solid var(--border);
  background:var(--bg-pane);
  display:flex; flex-direction:column; gap:8px;
}
#treeTools{ display:flex; align-items:center; justify-content:space-between; gap:8px; height: var(--control-h); line-height: var(--control-h); }
#treeSummary{ font-size:13px; line-height:1.15; white-space:pre-line; }

/* زر collapse/expand */
#treeTools .icon-btn{
  height: var(--control-h);
  width:  var(--control-h);
  display:inline-flex; align-items:center; justify-content:center;
  padding:0; color:var(--icon);
}
/* اجبار الـ SVG ياخذ لون واضح من المتغير --icon */
#treeTools .icon-btn svg{
  stroke: var(--icon) !important;
}

#treeTools .icon-btn img{
  width: 18px; height: 18px;
  pointer-events:none;
}

/* خلاصة + فلترة + زر الطي يفضلوا ظاهرين؛ السكروول للقائمة فقط */
#treeList{
  list-style:none; margin:0; padding:8px;
  flex:1 1 auto; min-height:0; overflow:auto; background:var(--bg-pane);
}
#treeList .tree-company{ margin:6px 0; }
#treeList .tree-company.collapsed .tree-files{ display:none; }

#treeList .row.company{
  display:flex; align-items:center; gap:8px;
  font-weight:600; padding:6px 8px; background:var(--bg-soft-2); border:1px solid var(--border);
  font-size:12px; border-radius:6px;
}

#treeList .tree-files{ list-style:none; margin:4px 0 0; padding:0 6px; }
#treeList .tree-file{ border:1px solid var(--border); margin:3px 0; border-radius:6px; background:var(--bg-pane); }
#treeList .tree-file.current{ outline:2px solid #2563eb; box-shadow:0 0 0 1px #2563eb inset; }
#treeList .tree-file.current .row.file{
  background:#eaf3ff; border:1px solid #93c5fd; box-shadow:0 0 0 2px #93c5fd55;
}
html[data-theme="dark"] #treeList .tree-file.current .row.file{
  background:#1e293b; border-color:#334155; box-shadow:none;
}

#treeList .row.file{
  display:flex; align-items:center; justify-content:space-between;
  gap:8px; padding:6px 8px; cursor:pointer; background:var(--bg-pane); border-radius:6px; font-size:12px;
  border:1px solid var(--border);
}
.file-left{ display:flex; align-items:center; gap:6px; min-width:0; flex:1; }
.fname{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; padding-left:4px; }
#treeList .row.file:hover .fname{ text-decoration:underline; }

/* Status badges */
.st-btn{ width:96px; text-align:center; font-weight:600; border-radius:999px; padding:4px 10px; border:1px solid transparent; font-size:11px; line-height:1; }
.st-btn[disabled]{ opacity:.9; }
.st-gray{background:var(--st-gray-bg); border-color:var(--st-gray-bd); color:var(--st-gray-tx);}
.st-orange{background:var(--st-wait-bg); border-color:var(--st-wait-bd); color:var(--st-wait-tx);}
.st-green{background:var(--st-open-bg); border-color:var(--st-open-bd); color:var(--st-open-tx); cursor:default;}
.st-red{background:var(--st-retry-bg); border-color:var(--st-retry-bd); color:var(--st-retry-tx); cursor:pointer;}

/* زر Skipped بشكل مميز عن Not Started */
.st-btn.st-skip{
  background: #94a3b8;   /* slate-400 */
  color:#fff;
  border-color: transparent;
}

/* عند تحويم الماوس وإظهار "Delete" */
.st-btn.danger{
  background:#fee2e2;    /* rose-100 */
  color:#b91c1c;         /* red-700 */
  border-color:#ef4444;  /* red-500 */
}

/* Hover text for status buttons */
.st-btn[data-hover-text]:hover::after {
  content: attr(data-hover-text);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.9);
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 1000;
  margin-bottom: 4px;
}

.st-btn[data-hover-text] {
  position: relative;
}

.tree-disabled { opacity: .6; }
.tree-disabled .row.file, .tree-disabled .st-btn { pointer-events: none; }

/* ===== Logs (النصف السفلي) ===== */
#logsPane{
  flex:1 1 50%;
  min-height:0;
  display:flex; flex-direction:column;
  background:var(--bg-pane);
}
#logsHdr{
  display:flex; align-items:center; justify-content:space-between;
  padding:6px 8px;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  background:var(--bg-soft);
}
#logsWrap{
  flex:1 1 auto; min-height:0; overflow:auto;
  padding:6px; background:var(--bg-pane);
}

/* التبديل بين الشجـرة والسطور */
#logsWrap .log-tree{ display:none; }
#logsWrap.mode-tree .log-tree{ display:block; }
#logsWrap.mode-tree #logsList{ display:none; }
#logsWrap.mode-lines #logsList{ display:flex; }

#logsList{ font-family:ui-monospace, Menlo, Consolas, monospace; display:flex; flex-direction:column; gap:4px; font-size:12px; }
.log-row{ white-space:pre-wrap; word-break:break-word; padding:4px 6px; background:#f9f9f9; border:1px solid var(--border); border-radius:4px; }
.log-row.lvl-error{ background:#ffecec; border-color:#f2b6b6; }
html[data-theme="dark"] .log-row{ background:#0b1220; }
html[data-theme="dark"] .log-row.lvl-error{ background:#7f1d1d; border-color:#991b1b; }

/* Logs look */
.log-row{ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:12.5px; line-height:1.45; }
.log-time{ color:#64748b; margin-right:6px; }
.log-co{ color:#0ea5e9; font-weight:600; margin-right:4px; }
.log-period{ color:#94a3b8; margin-right:4px; }
.log-row.lvl-error .log-msg{ color:#ef4444; }
.log-row.lvl-warn  .log-msg{ color:#f59e0b; }

/* Log header toolbars */
.log-toolbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:6px 8px; background:var(--bg-soft); border-bottom:1px solid var(--border);
  gap:8px;
}
.log-toolbar.compact{ padding:6px 8px; }

.stage{ display:flex; align-items:center; gap:8px; font-size:12px; }
.stage .sep{ opacity:.5; }
.stage .step{ display:inline-flex; align-items:center; gap:6px; opacity:.5; }
.stage .step.is-active{ opacity:1; font-weight:600; }

/* OCR Status Indicator */
.btn.ocr-down {
  position: relative;
}

.ocr-status-star {
  color: #ff6b6b;
  font-weight: bold;
  margin-left: 4px;
  animation: pulse 2s infinite;
  cursor: help;
  position: relative;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* Tooltip for star on hover */
.ocr-status-star:hover::after {
  content: attr(data-hover-text);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.9);
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  margin-bottom: 5px;
  z-index: 1000;
  pointer-events: none;
}

.ocr-status-star:hover::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: rgba(0, 0, 0, 0.9);
  margin-bottom: -5px;
  z-index: 1000;
  pointer-events: none;
}
.stage .dot{ width:8px; height:8px; border-radius:50%; background:#64748b; display:inline-block; }
.stage .step.is-active .dot{ background:var(--accent); }

.counts{ display:flex; gap:6px; }
.badge{
  display:inline-block; min-width:26px; text-align:center; padding:2px 6px; border-radius:999px;
  font-size:12px; border:1px solid transparent;
}
.badge.ok{   background:#064e3b; border-color:#065f46; color:#bbf7d0; }     /* success */
.badge.warn{ background:#4a3210; border-color:#b45309; color:#fde68a; }     /* warnings */
.badge.err{  background:#7f1d1d; border-color:#991b1b; color:#fecaca; }     /* errors */
.badge.mute{ background:#1f2937; border-color:#374151; color:#e5e7eb; }     /* skipped */

#logsFilters{ gap:10px; }
#logsFilters .chips{ display:flex; gap:6px; }
#logsFilters .chip{
  padding:6px 10px; border-radius:999px; background:var(--btn-bg); border:1px solid var(--border);
  font-size:12px; cursor:pointer;
}
#logsFilters .chip.is-active{ background:#1e293b; border-color:#334155; color:#e5e7eb; }
html[data-theme="dark"] #logsFilters .chip.is-active{ background:#1e293b; }

#logsFilters .sel{ display:flex; gap:6px; align-items:center; }
#logsFilters select, #logsFilters input[type="search"]{
  height:30px; border:1px solid var(--border); background:var(--bg-pane); color:inherit;
  border-radius:8px; padding:0 8px; font-size:12px;
}

/* شجرة اللوج */
.log-tree{ padding:6px; }
.log-tree details{ border:1px solid var(--border); border-radius:6px; background:var(--bg-pane); margin:6px 0; }
.log-tree > details > summary{ padding:6px 8px; font-weight:700; cursor:pointer; background:var(--bg-soft-2); }
.log-tree .period details{ margin:4px 6px; }
.log-tree .period > summary{ padding:6px 8px; font-weight:600; cursor:pointer; background:var(--bg-pane); border-bottom:1px solid var(--border); }
.log-tree .events{ padding:6px 10px; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12.5px; }
.log-tree .ev{ padding:2px 0; }

/* اجعل شريط الإحصائيات يتمدد ويلفّ */
#logsSummaryBar{ display:flex; align-items:flex-start; flex-wrap:wrap; gap:8px 10px; }
#logStage{ flex:1 1 auto; display:flex; flex-wrap:wrap; gap:8px 12px; }

#logStage .step{ white-space:nowrap; }
.counts{ flex:0 0 auto; display:flex; gap:6px; margin-left:auto; }

/* محوّل العرض (segmented control) */
.view-switch{ margin-left:auto; display:flex; gap:6px; }
.view-switch .seg{
  padding:6px 10px; border-radius:999px; border:1px solid var(--border);
  background:var(--btn-bg); cursor:pointer; font-size:12px;
}
.view-switch .seg.on{ background:#1e293b; color:#e5e7eb; border-color:#334155; }
html[data-theme="dark"] .view-switch .seg.on{ background:#1e293b; }

/* ===== RIGHT (thumbs + OCR) ===== */
/* Right pane (thumbnails) - match viewer height */
#thumbsPane{
  grid-column:4/5; grid-row:2/3; /* Start from row 2 (below toolbar and user bar) */
  display:flex; flex-direction:column; justify-content:space-between;
  padding:10px; background:var(--bg-pane); border:1px solid var(--border);
  border-radius:8px; box-shadow:0 1px 4px rgba(0,0,0,.04); overflow:hidden;
}
#thumbsPane > .thumbs-scroll{ flex:1; overflow:auto; }
#thumbs .thumb-card{ border:1px solid #ddd; background:var(--bg-pane); margin-bottom:10px; border-radius:6px; box-shadow:0 1px 3px rgba(0,0,0,.08); }

/* الإطار + المؤشر على الصورة فقط */
#thumbs{
  overflow:hidden;
}

#thumbs .thumb-img{ 
  display:block; 
  width:100%; 
  height:auto; 
  min-height: 80px; /* Minimum height to ensure visibility */
  max-height: 400px; /* Maximum height to prevent overflow */
  cursor:pointer; 
  object-fit:contain; 
}
#thumbs .thumb-img:hover{
  outline:3px solid #1e90ff; outline-offset:-4px;
}

/* عنوان الكارد يفضل المؤشر فيه عادي */
#thumbs .thumb-head{ cursor: default; }

#thumbs .thumb-card:hover{ transform:none; }
#thumbs .thumb-head{ display:flex; justify-content:space-between; align-items:center; padding:6px 8px; font-size:12px; background:var(--bg-soft-2); border-bottom:1px solid var(--border); border-radius:6px 6px 0 0; color:inherit; }
#thumbs .thumb-img{ display:block; width:100%; height:auto; }
#thumbs .thumb-delete,
#thumbs .thumb-update {
  padding: 4px 8px;
  font-size: 12px;
  border-radius: 4px;
  cursor: pointer;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  border: 1px solid;
}

#thumbs .thumb-delete {
  background: #ffecec;
  border-color: #f1c0c0;
  color: #991b1b;
}

#thumbs .thumb-delete:hover {
  background: #fee2e2;
  border-color: #fca5a5;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#thumbs .thumb-update {
  background: #1e8fff22;
  border-color: #1e8fff55;
  color: #1e8fff;
  margin-left: 6px;
}

#thumbs .thumb-update:hover {
  background: #1e8fff33;
  border-color: #1e8fff77;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(30, 143, 255, 0.2);
}

html[data-theme="dark"] #thumbs .thumb-head{ background:#0b1220; }
html[data-theme="dark"] #thumbs .thumb-card{ border-color:#374151; box-shadow:none; }
html[data-theme="dark"] #thumbs .thumb-delete{ 
  background:#7f1d1d; 
  border-color:#991b1b; 
  color:#fecaca; 
}
html[data-theme="dark"] #thumbs .thumb-delete:hover {
  background: #991b1b;
  border-color: #b91c1c;
}
html[data-theme="dark"] #thumbs .thumb-update {
  background: #1e3a8a22;
  border-color: #3b82f655;
  color: #93c5fd;
}
html[data-theme="dark"] #thumbs .thumb-update:hover {
  background: #1e3a8a33;
  border-color: #3b82f677;
}

/* ===== Bottom Data Bar ===== */
.data-bar{
  grid-row:2/3;
  position: sticky;
  bottom: 0;
  z-index: 9;
  width: 100%;

  background: var(--bg-pane);
  border-top: 1px solid var(--border);
  padding: 8px 10px;
  color: var(--text);

  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px 16px;
  font-size: 12px;
  line-height: 1.25;
}

.data-bar[hidden]{ display:none !important; }

.data-bar .sec{
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 16px;
  column-gap: 16px;
  row-gap: 4px;
  min-height: 34px;
}

.data-bar .kv{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.data-bar .key{ color:#475569; margin-inline-end:6px; }
html[data-theme="dark"] .data-bar .key{ color:#93a5be; }
.data-bar .val{ font-weight:600; }

/* Vertical splitter بين اليسار والوسط */
#vSplitter{
  grid-column:2/3; grid-row:1/3;
  width:6px; cursor:col-resize;
  background: transparent;
  position: relative;
}
#vSplitter::before{
  content:""; position:absolute; inset:0;
  background: linear-gradient(to right, transparent, #94a3b855, transparent);
  border-radius:3px;
  opacity:.6;
}
#vSplitter:hover::before{ opacity:1; }

/* داخل العمود الأيسر: سبليتر أفقي بين الشجرة واللوج */
#hSplitter{
  height:6px; cursor:row-resize;
  background: linear-gradient(to bottom, transparent, #94a3b855, transparent);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}

/* استخدم متغيّر يتحكم في ارتفاع الشجرة */
#leftPane{ --tree-h: 50%; }
#treeWrap{ flex: 0 0 var(--tree-h); min-height:80px; }
#logsPane{ flex: 1 1 auto; min-height:100px; }

/* لما نكون في mode-download حافظ على الانتقالات الحالية */
#treeWrap, #logsPane{ transition: none; }

/* === GPT pages capsules + offset controls === */
.offset-controls{
  display:flex;
  gap:6px;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  width:max-content;
  margin:8px auto 6px;
}

.offset-controls input[type="number"]{
  width:72px; height: var(--control-h); padding:0 8px;
  background:var(--bg-pane); color:inherit; border:1px solid var(--border);
  border-radius:6px;
}
.offset-controls .sign{
  min-width:36px; height: var(--control-h);
  display:inline-flex; align-items:center; justify-content:center;
}
.offset-controls .sign.on{
  outline:2px solid var(--accent);
  outline-offset: 0;
}

/* صف الأرقام فوق الأزرار (ثلاث أعمدة) */
.nums-3cols{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin: 0 0 6px 0;
  align-items:center;
  text-align:center;
}

/* شكل الأرقام: بولد وأزرق */
.nums-line{
  font-weight: 700;
  color: var(--accent);
  font-size: 14px;
  letter-spacing: .2px;
  white-space: nowrap;
}
.nums-line .preview{ opacity:.85; }
.nums-line .dash{ opacity:.6; }