/* ====== Main CSS - Variables + Base Styles + Toolbar ====== */

:root{
  --hdr:60px;
  --side-l:382px;   /* ← العرض المبدئي لليسار */
  --side-r:280px;   /* ← يمين كما هو */
  --accent:#2563eb;
  --control-h: 34px;

  /* Light theme tokens */
  --bg-page:#f3f4f6;
  --bg-pane:#fff;
  --bg-soft:#f9fafb;
  --bg-soft-2:#fafafa;
  --border:#e5e7eb;
  --text:#1f2937;

  --img-btn:#0ea5e9; --img-btn-h:#0284c7;
  --ocr-btn:#8b5cf6; --ocr-btn-h:#6d28d9;

  --st-gray-bg:#e9e9e9; --st-gray-bd:#d0d0d0; --st-gray-tx:#333;
  --st-wait-bg:#ffe8cc; --st-wait-bd:#ffc38a; --st-wait-tx:#8a4a00;
  --st-open-bg:#dcfce7; --st-open-bd:#bbf7d0; --st-open-tx:#15803d;
  --st-retry-bg:#fee2e2; --st-retry-bd:#fecaca; --st-retry-tx:#991b1b;

  /* icons & buttons */
  --btn-bg:#ffffff;
  --btn-bg-h:#f3f4f6;
  --icon:#111827;      /* used to color collapse/expand svgs */
  --cta-bg:#f59e0b;    /* start processing (light) */
  --cta-bg-h:#d97706;
  --cta-tx:#111827;
}

*{ box-sizing:border-box }
html,body{ height:100%; margin:0; font-family:system-ui,Arial; color:var(--text); background:var(--bg-page);}

/* ====== User Bar (Top Right) - Same row as toolbar, same width as right pane ====== */
.user-bar {
  height: var(--hdr);
  background: var(--bg-pane);
  border: 1px solid var(--border);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  z-index: 100;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  margin-bottom: 12px; /* Same gap as other grid items */
  width: var(--side-r); /* Same width as right pane - always */
}

/* User bar in download mode - same width */
body.mode-download #userBar {
  display: flex !important;
  grid-column: 4/5; /* Same column as right pane */
  grid-row: 1/2; /* Same row as toolbar */
  width: var(--side-r); /* Same width as right pane */
  margin-bottom: 0; /* Remove margin since it's in grid */
}

.user-info {
  display: flex;
  align-items: center;
  justify-content: space-between; /* Space between profile button and logout */
  gap: 10px;
  width: 100%; /* Full width to space buttons apart */
}

.user-profile-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0; /* Remove padding - let border handle spacing */
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 14px;
  color: var(--text);
  font-weight: 500;
  height: 34px; /* Same height as logout button */
  padding-left: 4px; /* Small padding for icon border */
  padding-right: 8px;
}

.user-profile-btn:hover {
  background: var(--bg-soft);
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.user-profile-btn .profile-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bg-soft);
  border: 1px solid var(--border); /* Part of the overall border */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  margin: 2px; /* Small margin to show it's part of the border */
}

.user-profile-btn .profile-icon svg {
  width: 18px;
  height: 18px;
  color: var(--accent);
}

.user-profile-btn .username {
  font-size: 14px;
  color: var(--text);
  font-weight: 500;
  margin-left: 4px;
}

.btn-logout {
  padding: 6px 12px;
  font-size: 13px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
  height: 34px; /* Same height as profile button */
  margin-left: auto; /* Push to right */
}

.btn-logout:hover {
  background: var(--accent);
  opacity: 0.9;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

/* ======== Grid: left | center | right ======== */
#content{
  height:100vh;
  display:grid;
  grid-template-columns: var(--side-l) 6px 1fr var(--side-r); /* ← أضفنا عمود للسـبليتر */
  grid-template-rows: var(--hdr) 1fr;
  gap:12px;
  padding:12px;
  overflow:hidden;
  position: relative;
}

/* User bar is now in HTML as a sibling of thumbsPane, positioned above it in grid */
body:not(.mode-download) #userBar {
  display: flex !important;
  grid-column: 4/5; /* Same column as right pane */
  grid-row: 1/2; /* Same row as toolbar */
  margin-bottom: 0; /* Remove margin since it's in grid */
}

/* Toolbar فوق العمود الأوسط فقط */
header.toolbar{
  grid-column:3/4; grid-row:1/2;
  height:var(--hdr);
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:10px 12px;
  border:1px solid var(--border); border-radius:8px;
  background:rgba(249,250,251,.95); backdrop-filter:blur(6px);
  box-shadow:0 1px 4px rgba(0,0,0,.05);
  position:sticky; top:2px; z-index:10;
}

.toolbar .left,.toolbar .center,.toolbar .right{ display:flex; align-items:center; gap:8px; }
.hint{ font-size:13px; color:var(--text); }

/* Buttons */
button{
  padding:8px 10px;
  border:1px solid var(--border);
  background:var(--btn-bg);
  border-radius:6px;
  cursor:pointer; transition:.18s; color:inherit;
}
button:hover{ background:var(--btn-bg-h); }
button:disabled{ opacity:.55; cursor:not-allowed; }

.btn-img{ background:var(--img-btn); border-color:var(--img-btn); color:#fff; }
.btn-img:hover{ background:var(--img-btn-h); border-color:var(--img-btn-h); }
.btn-ocr{ background:var(--ocr-btn); border-color:var(--ocr-btn); color:#fff; }
.btn-ocr:hover{ background:var(--ocr-btn-h); border-color:var(--ocr-btn-h); }

/* CTA button */
.btn-start-xl {
  font-weight: 700;
  font-size: 22px;
  line-height: 1.1;
  padding: 14px 18px;
  white-space: normal;
  text-align: center;
  min-width: 180px;
  background: var(--cta-bg);
  border-color: var(--cta-bg);
  color: var(--cta-tx);
}
.btn-start-xl:hover { filter: brightness(1.05); background: var(--cta-bg-h); border-color: var(--cta-bg-h); }
.btn-start-xl:disabled { opacity: .7; cursor: not-allowed; }
.btn-start-xl .btn-label { display: inline-block; }
@media (max-width: 480px) { .btn-start-xl { font-size: 20px; min-width: 160px; } }

/* Select styles */
select#statusFilter{
  border-color:#e2e8f0 !important; background:#fff !important; color:#0f172a !important;
  border-radius:10px !important; padding:6px 10px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
}

/* Scrollbars */
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-thumb{ background:#c7cfe2; border-radius:999px; }
*::-webkit-scrollbar-thumb:hover{ background:#aab6d4; }
*::-webkit-scrollbar-track{ background: transparent; }

.hint-small{ font-size:12px; color:#6b7280; }