/* ===== Global + Layout ===== */
:root{
  --bg:#0b0e13; --panel:#121722; --muted:#6c7a91; --text:#e8eefc;
  --accent:#2dd4bf; --danger:#ef4444; --ok:#22c55e;

  /* Shared grid layout for list header + rows */
  --list-cols: 1.2fr 1fr .7fr .9fr;
}
*{ box-sizing:border-box; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; }
html,body{ margin:0; height:100%; background:var(--bg); color:var(--text); }
.hidden{ display:none !important; }
.right{ margin-left:auto; }

.container{ display:grid; grid-template-columns:1fr; gap:16px; height:100vh; padding:16px; }

/* Panels are flex columns so only bodies scroll */
.panel{ background:var(--panel); border:1px solid #1f2937; border-radius:14px; min-height:0; display:flex; flex-direction:column; }

/* Top app bars */
.bar{ font-size:12px; /* ~4px smaller than default */ margin:0; padding:12px 14px; border-bottom:1px solid #1f2937; background:#0e1420; display:flex; align-items:center; gap:8px; }
.sticky-wrap{ position:sticky; top:0; z-index:3; background:#0e1420; border-bottom:1px solid #1f2937; }
.panel-body.scroll{ overflow:auto; min-height:0; }

/* Toolbar */
.toolbar{ display:flex; gap:6px; align-items:center; padding:12px 14px; border-bottom:1px solid #1f2937; background:#0e1420; }
.searchbox{ position:relative; flex:1; }
.icon-btn{ padding:8px 10px; min-width:0; line-height:1; }

/* Shared inputs/buttons */
input,select,button{ background:#0f1420; color:var(--text); border:1px solid #283144; border-radius:8px; padding:8px 10px; }
input:focus,select:focus{ outline:2px solid #2dd4bf55; border-color:#2dd4bf; }
.btn{ padding:8px 12px; border-radius:8px; border:1px solid #334155; background:#111827; color:#e5e7eb; cursor:pointer; }
.btn.primary{ background:linear-gradient(180deg,#14b8a6,#0ea5e9); border-color:#0ea5e9; }
.btn.ghost{ background:transparent; border-color:#283144; }
.btn.ok{ background:#0d1b12; border-color:#14532d; color:#bbf7d0; }
.btn[disabled]{ opacity:.6; cursor:not-allowed; }

.muted{ color:var(--muted); font-size:11px; }

/* ===== Project List: sticky grid header outside scroll ===== */
.list-head{
  display:grid; grid-template-columns: var(--list-cols);
  column-gap:0;
  padding:8px 14px;
  background:#0e1420;
  border-top:1px solid #1f2937;
  border-bottom:1px solid #1f2937;
  font-weight:600;
  font-size:12px; /* ~4px smaller */
}

/* Rows (scrollable area) */
.rows{ display:block; }
.row{
  display:grid; grid-template-columns: var(--list-cols);
  column-gap:0;
  padding:10px 14px;
  border-bottom:1px dashed #233047;
  align-items:center;
  cursor:pointer;
  font-size:12px; /* ~4px smaller */
}
.row:hover{ background:#0d1320; }
.cell-muted{ color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Status dots */
.status-dot{ display:inline-flex; align-items:center; gap:8px; }
.dot{ width:10px; height:10px; border-radius:999px; display:inline-block; border:1px solid #1f2a3d; }
.dot.green{ background:#16a34a; }
.dot.yellow{ background:#eab308; }

/* Dropdown */
.dropdown{ position:absolute; left:0; right:0; top:100%; background:#0f1420; border:1px solid #263247; border-radius:8px; overflow:hidden; margin-top:6px; z-index:4; }
.dropdown-item{ padding:8px 10px; border-bottom:1px dashed #223047; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dropdown-item:last-child{ border-bottom:none; }
.dropdown-item:hover{ background:#101a2a; }

/* ===== Helpers ===== */
.center{ display:flex; align-items:center; justify-content:center; height:100vh; text-align:center; padding:24px; }
.tight{ margin:0 0 8px 0; }
.title-pad{ margin-left:8px; }
.pad{ padding:12px 14px; }
.mt6{ margin-top:6px; }
.mt12{ margin-top:12px; }
.row-flex{ display:flex; gap:8px; }
.full{ width:100%; }

/* ===== Status buttons bar ===== */
.status-bar{ display:flex; gap:8px; flex-wrap:wrap; padding:10px 14px; border-top:1px solid #1f2937; background:#0e1420; }

/* ===== Uploader ===== */
.uploader{ padding:12px 14px; border-top:1px solid #1f2937; background:#0e1420; }
.uploader-row{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; }
.upload-tile{ border:1px dashed #2a3a58; border-radius:12px; padding:12px; min-height:68px; display:flex; flex-direction:column; gap:4px; align-items:flex-start; justify-content:center; cursor:pointer; position:relative; }
.upload-tile input[type=file]{ position:absolute; inset:0; opacity:0; cursor:pointer; }
.tile-title{ font-weight:600; }
.tile-sub{ font-size:11px; color:var(--muted); }
.thumb-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap:8px; margin-top:10px; }
.thumb{ position:relative; border-radius:10px; overflow:hidden; border:1px solid #27344c; }
.thumb img{ width:100%; height:84px; object-fit:cover; display:block; }
.thumb .x{ position:absolute; top:4px; right:4px; width:22px; height:22px; border-radius:999px; background:#0b0e13bb; border:1px solid #334155; display:flex; align-items:center; justify-content:center; font-size:13px; cursor:pointer; }

/* Per-thumbnail overlay + spinner/check/error */
.thumb .overlay{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.35); backdrop-filter:saturate(1.2);
}
.spinner{
  width:28px; height:28px; border:2px solid rgba(255,255,255,.35);
  border-top-color:#fff; border-radius:50%; animation:spin 1s linear infinite;
}
@keyframes spin{ to{ transform: rotate(360deg); } }
.thumb.success .overlay{ background:rgba(13,110,36,.35); }
.thumb.error .overlay{ background:rgba(110,13,13,.35); }
.overlay-icon{ font-size:18px; }
.uploader-actions{ display:flex; align-items:center; gap:8px; margin-top:10px; }

/* Thin progress bar + text */
.upload-progress{ display:flex; align-items:center; gap:8px; padding:8px 14px; }
.upload-progress .bar{ flex:1; height:3px; background:#1e293b; border-radius:999px; overflow:hidden; }
.upload-progress .fill{ height:100%; background:#22c55e; transition:width .25s ease; }
.upload-progress .progress-text{ font-size:11px; color:var(--muted); }
.upload-progress.complete .progress-text{ color:#bbf7d0; }

/* ===== Meta + Logs ===== */
.meta{ border-top:1px solid #1f2937; background:#0f1420; }
.logs-shell{ display:flex; flex-direction:column; min-height:0; }
.logs-header{ position:sticky; top:52px; background:#0f1420; z-index:2; border-bottom:1px solid #1e293b; padding:10px 12px; font-size:12px; }
.logs-body{ padding:8px 12px; }
.log-group{ padding:8px 0; border-bottom:1px dashed #263247; }
.log-group:last-child{ border-bottom:none; }
.log-item{ font-size:12px; padding:4px 0; color:#e8eefc; }

/* ===== Full-screen New Project panel ===== */
#newPanel{ position:fixed; inset:0; z-index:9999; display:flex; flex-direction:column; }
#newPanel .panel-body.scroll{ background:var(--panel); }

/* ===== Modal (incl. camera) ===== */
.modal{ position:fixed; inset:0; background:#0008; display:flex; align-items:center; justify-content:center; padding:16px; z-index:10000; }
.modal-card{ background:#0f1420; border:1px solid #1e293b; padding:16px; border-radius:12px; width:520px; max-width:94vw; }

/* Camera modal specifics */
.camera-card{ width:min(720px, 94vw); }
.camera-wrap{ position:relative; width:100%; aspect-ratio: 3 / 4; background:#000; border-radius:12px; overflow:hidden; }
#camPreview, #camCanvas{ width:100%; height:100%; object-fit:cover; display:block; }

/* ===== Responsive ===== */
@media (max-width:920px){
  .container{ grid-template-columns:1fr; height:auto; padding:10px; }
  .uploader-row{ grid-template-columns:1fr; }
  :root{ --list-cols: 1.1fr 1fr .8fr .9fr; }
}

/* --- Status checkmarks (one row per status, with 'v' marks) --- */
.checks{
  display:flex;
  flex-direction:column;
  gap:6px;
  border-top:1px solid #1f2937;
  background:#0e1420;
}
.check-line{
  display:flex;
  gap:8px;
  align-items:center;
  padding:6px 14px;
  border-bottom:1px dashed #233047;
  font-size:12px;
}
.check-line:last-child{ border-bottom:none; }
.check-label{
  min-width:48px; /* keeps labels aligned: 'cikis', 'tg', 'tc', 'o/e' */
  font-weight:600;
}
.check-marks{
  letter-spacing:.5px;
  word-break:break-word;
}


/* --- Collapsible logs --- */
.logs-collapsible{
  margin:12px 14px; border:1px solid #1e293b; border-radius:12px;
}
.logs-collapsible > summary{
  cursor:pointer; padding:10px 12px; background:#0f1420;
  border-bottom:1px solid #1e293b; font-size:12px;
}