/* Docs to PDF — component styles layered on top of the shared ICT Tools design system (../../styles.css) */

:root{
  --gold: var(--accent);
  --gold-bright: var(--accent);
  --ink: var(--text-primary);
  --muted: var(--text-secondary);
  --panel: var(--bg-input);
  --panel-raised: var(--bg-card);
  --line: var(--border);
  --danger: #c2604f;
  --good: #6f9d6a;
  --blue: #7fa8d9;
  --mono: 'JetBrains Mono', monospace;
  --display: 'Inter', sans-serif;
}

*{ box-sizing: border-box; }
input[type=file]{ display:none; }

/* Drop zone */
.drop{
  border:1.5px dashed var(--line);
  border-radius:var(--radius);
  background:var(--panel);
  padding:30px 18px;
  text-align:center;
  cursor:pointer;
  transition:border-color .15s ease, background .15s ease;
  position:relative;
  margin-bottom: 22px;
}
.drop.drag-over{
  border-color:var(--gold);
  background:var(--accent-soft);
}
.drop-icon{
  width:36px;height:36px;margin:0 auto 12px;
  color:var(--gold);
}
.drop-title{font-family:var(--display);font-weight:600;font-size:16px;margin-bottom:6px;color:var(--ink);}
.drop-hint{color:var(--muted);font-size:12.5px;line-height:1.6;}
.drop-hint b{color:var(--ink);font-weight:500;}

/* Queue */
.queue-head{
  display:flex;align-items:baseline;justify-content:space-between;
  margin:0 0 14px;
  gap:12px;
}
.queue-title{
  font-family:var(--display);font-weight:600;font-size:15px;color:var(--ink);
  display:flex;align-items:center;gap:8px;
}
.queue-count{
  font-family:var(--mono);font-size:11px;color:var(--muted);
  background:var(--panel-raised);border:1px solid var(--line);
  padding:2px 8px;border-radius:20px;
  white-space:nowrap;
}
.clear-btn{
  background:none;border:none;color:var(--muted);font-family:var(--mono);
  font-size:12px;cursor:pointer;text-decoration:underline;text-underline-offset:3px;
  padding:6px 0;
}
.clear-btn:hover{color:var(--danger);}

.dp-empty{
  padding:26px 18px;text-align:center;color:var(--muted);
  font-size:13px;font-family:var(--mono);
  border:1px dashed var(--line);border-radius:var(--radius);
}

.spine{position:relative;padding-left:32px;}
.spine::before{
  content:"";position:absolute;left:12px;top:6px;bottom:6px;width:1px;
  background:linear-gradient(to bottom, transparent, var(--line) 8%, var(--line) 92%, transparent);
}

.card{
  position:relative;
  display:flex;align-items:center;gap:12px;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:9px 10px;
  margin-bottom:8px;
  transition:border-color .15s ease, box-shadow .15s ease;
  touch-action:pan-y;
}
.card.dragging{
  opacity:.9;
  border-color:var(--gold);
  box-shadow:0 10px 24px rgba(0,0,0,0.4);
  z-index:5;
  position:relative;
}

.card-index{
  position:absolute;left:-32px;top:50%;transform:translateY(-50%);
  width:24px;height:24px;border-radius:50%;
  background:var(--bg);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:10px;color:var(--gold);
  pointer-events:none;
}

.handle{
  cursor:grab;color:var(--muted);flex-shrink:0;
  padding:10px 6px;
  touch-action:none;
  margin:-10px 0;
  border-radius:6px;
}
.handle:active{cursor:grabbing;background:var(--panel-raised);}

.thumb{
  width:44px;height:56px;flex-shrink:0;border-radius:5px;overflow:hidden;
  background:var(--panel-raised);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
}
.thumb img{width:100%;height:100%;object-fit:cover;}
.thumb-fallback{font-family:var(--mono);font-size:8.5px;color:var(--muted);text-align:center;letter-spacing:.03em;}

.meta{flex:1;min-width:0;}
.meta-name{
  font-size:13.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink);
}
.meta-sub{
  font-family:var(--mono);font-size:10.5px;color:var(--muted);margin-top:3px;
  display:flex;gap:7px;align-items:center;flex-wrap:wrap;
}
.badge{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.05em;
  padding:1px 6px;border-radius:4px;text-transform:uppercase;
}
.badge.pdf{background:rgba(207,157,63,0.14);color:var(--gold-bright);}
.badge.img{background:rgba(111,157,106,0.14);color:var(--good);}
.badge.docx{background:rgba(127,168,217,0.14);color:var(--blue);}

.card-actions{display:flex;gap:1px;flex-shrink:0;}
.icon-btn{
  width:34px;height:34px;border:none;background:transparent;color:var(--muted);
  border-radius:6px;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background .12s ease, color .12s ease;
}
.icon-btn:hover{background:var(--panel-raised);color:var(--ink);}
.icon-btn.remove:hover{color:var(--danger);}
.icon-btn:disabled{opacity:.25;cursor:not-allowed;}
.icon-btn:disabled:hover{background:transparent;color:var(--muted);}

/* Action bar */
.action-bar{
  margin-top:0;
  margin-bottom: 22px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 16px;
  display:flex;flex-wrap:wrap;align-items:center;gap:14px;
  justify-content:space-between;
}
.option{display:flex;flex-direction:column;gap:6px;}
.option label{
  font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
}
.action-bar select{
  background:var(--panel-raised);color:var(--ink);border:1px solid var(--line);
  border-radius:6px;padding:8px 10px;font-family:inherit;font-size:13px;
  cursor:pointer;
}
.action-bar select:focus-visible{outline:2px solid var(--gold);outline-offset:1px;}

.merge-btn{
  background:var(--gold);color:#1a1508;border:none;border-radius:8px;
  padding:13px 22px;font-family:var(--display);font-weight:600;font-size:14px;
  cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;
  transition:background .15s ease, transform .1s ease;
  white-space:nowrap;
}
.merge-btn:hover:not(:disabled){background:var(--gold-bright);}
.merge-btn:active:not(:disabled){transform:scale(.98);}
.merge-btn:disabled{background:var(--line);color:var(--muted);cursor:not-allowed;}

.status{
  font-family:var(--mono);font-size:11.5px;color:var(--muted);
  display:flex;align-items:center;gap:8px;min-height:16px;
}
.status.error{color:var(--danger);}
.status.success{color:var(--good);}

.spinner{
  width:12px;height:12px;border-radius:50%;
  border:2px solid var(--line);border-top-color:var(--gold);
  animation:spin .7s linear infinite;flex-shrink:0;
}
@keyframes spin{to{transform:rotate(360deg);}}

button:focus-visible, .drop:focus-visible{
  outline:2px solid var(--gold); outline-offset:2px;
}

@media (prefers-reduced-motion: reduce){
  .spinner, .card{transition:none !important; animation:none !important;}
}

/* ==================== Document Scanner additions ==================== */

.scan-add-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.scan-add-row .btn { flex: 1; min-width: 180px; justify-content: center; }

/* ---- Camera capture overlay ---- */
.scan-camera-overlay {
    position: fixed;
    inset: 0;
    background: #000;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}
.scan-camera-overlay.open { display: flex; }

.scan-camera-wrap {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.scan-camera-wrap video {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.scan-camera-controls {
    position: absolute;
    bottom: max(30px, env(safe-area-inset-bottom));
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
}

.scan-camera-controls .btn {
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.25);
    color: #fff;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.scan-shutter-btn {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: #fff;
    border: 4px solid rgba(255,255,255,0.4);
    cursor: pointer;
    flex-shrink: 0;
}
.scan-shutter-btn:active { background: #ddd; }

.scan-camera-error {
    position: absolute;
    top: 20px;
    left: 20px;
    right: 20px;
    text-align: center;
    color: #ff8f8f;
    font-size: 0.85rem;
    background: rgba(0,0,0,0.6);
    padding: 10px 14px;
    border-radius: 8px;
}

/* ---- Page editor overlay (corner crop + filters) ---- */
.scan-editor-overlay {
    position: fixed;
    inset: 0;
    background: rgba(10,8,4,0.85);
    backdrop-filter: blur(4px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 16px;
}
.scan-editor-overlay.open { display: flex; }

.scan-editor-wrap {
    width: 100%;
    max-width: 720px;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.scan-editor-canvas-wrap {
    position: relative;
    width: 100%;
    max-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
    border-radius: 10px;
    overflow: hidden;
    touch-action: none;
    user-select: none;
}

.scan-editor-canvas-wrap img {
    max-width: 100%;
    max-height: 60vh;
    display: block;
    pointer-events: none;
    -webkit-user-drag: none;
}

.scan-editor-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.scan-handle {
    position: absolute;
    width: 26px;
    height: 26px;
    margin: -13px 0 0 -13px;
    border-radius: 50%;
    background: var(--accent);
    border: 3px solid #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.5);
    cursor: grab;
    touch-action: none;
}
.scan-handle:active { cursor: grabbing; transform: scale(1.1); }

.scan-editor-controls {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px;
}

.scan-editor-buttons {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 12px;
}

@media (max-width: 600px) {
    .scan-editor-controls .seg-toggle { display: flex; width: 100%; }
    .scan-editor-controls .seg-toggle .seg-btn { flex: 1; }
}

/* ---- Mobile layout: sticky bottom action bar, bigger touch targets ---- */
@media (max-width:680px){
  .spine{padding-left:0;}
  .spine::before{display:none;}
  .card-index{position:static;transform:none;margin-right:2px;}
  .card{padding:8px;gap:10px;}
  .handle{padding:12px 8px;margin:-12px 0;}
  .icon-btn{width:38px;height:38px;}

  .action-bar{
    position:fixed;
    left:0;right:0;bottom:0;
    margin:0;
    border-radius:0;
    border-left:none;border-right:none;border-bottom:none;
    background:var(--bg-sidebar);
    backdrop-filter:blur(8px);
    padding:12px max(16px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
    z-index:20;
    box-shadow:0 -8px 24px rgba(0,0,0,0.35);
    flex-direction:column;
    align-items:stretch;
    gap:10px;
  }
  .option{flex-direction:row;align-items:center;justify-content:space-between;}
  .option label{margin:0;}
  .action-bar select{flex:1;max-width:60%;}
  .status{order:3;}
  .merge-btn{order:2;}
}