/* ============================================================================
 *  Counter Vision — drawing-canvas + 6-step wizard editor
 *  Scoped under .cv-editor / .cv-* so nothing here affects other pages.
 * ========================================================================== */

.cv-editor {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 130px);
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* Top bar -------------------------------------------------------------- */
.cv-topbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: #1e3a8a;
    color: #fff;
    border-bottom: 1px solid #ddd;
    flex-wrap: wrap;
}
.cv-topbar #cv-name {
    color: #fff;
    background: transparent;
    border: none;
    outline: none;
    font-size: 16px;
    font-weight: 600;
    min-width: 240px;
    padding: 4px 6px;
    border-radius: 4px;
}
.cv-topbar #cv-name:focus { background: rgba(255, 255, 255, 0.1); }
.cv-topbar #cv-name::placeholder { color: #cbd5e1; }
.cv-topbar-spacer { flex: 1; }
.cv-topbar .btn { background: #fff; color: #1f2937; min-height: 40px; }
.cv-topbar .btn-primary { background: #f97316; color: #fff; border-color: #f97316; }
.cv-topbar .btn-success { background: #16a34a; color: #fff; border-color: #16a34a; }
.cv-topbar .btn-primary:hover { background: #ea580c; }
.cv-topbar .btn-success:hover { background: #15803d; }

/* Step bar ------------------------------------------------------------- */
.cv-steps {
    display: flex;
    background: #f3f4f6;
    border-bottom: 1px solid #e5e7eb;
    padding: 6px 16px;
    gap: 6px;
    overflow-x: auto;
}
.cv-step {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    cursor: pointer;
    border-radius: 6px;
    min-height: 44px;
    user-select: none;
    white-space: nowrap;
}
.cv-step:hover { background: #e5e7eb; }
.cv-step.active { background: #16a34a; color: #fff; }
.cv-step-num {
    width: 28px; height: 28px;
    background: #d1d5db; color: #fff;
    border-radius: 50%;
    display: grid; place-items: center;
    font-weight: 700; font-size: 13px;
}
.cv-step.active .cv-step-num { background: rgba(255, 255, 255, 0.35); color: #fff; }
.cv-step-label { font-size: 13px; font-weight: 600; }

/* Workspace ----------------------------------------------------------- */
.cv-workspace { flex: 1; display: flex; overflow: hidden; min-height: 0; }
.cv-canvas-wrap {
    flex: 1;
    background: #fafafa;
    overflow: auto;
    touch-action: none;            /* prevent iOS scroll-while-drawing */
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 16px;
}
.cv-canvas-wrap .canvas-container { box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08); }
.cv-side {
    width: 340px; flex-shrink: 0;
    background: #fff;
    border-left: 1px solid #e5e7eb;
    padding: 16px;
    overflow-y: auto;
}
.cv-side h4 { margin: 0 0 14px; font-size: 16px; }
.cv-side h5 { margin: 14px 0 8px; font-size: 13px; color: #374151; }
.cv-side hr { border: none; border-top: 1px solid #e5e7eb; margin: 14px 0; }
.cv-side .btn-block { display: block; width: 100%; margin-bottom: 8px; min-height: 44px; text-align: left; }
.cv-side .field { margin-bottom: 10px; }
.cv-side .field label { display: block; font-size: 12px; color: #6b7280; margin-bottom: 4px; }
.cv-side .field input,
.cv-side .field textarea {
    width: 100%; padding: 8px 10px;
    border: 1px solid #d1d5db; border-radius: 6px;
    font-size: 14px;
}
.cv-info-row {
    margin-top: 18px; padding: 12px;
    background: #f9fafb; border-radius: 6px;
    font-size: 13px; line-height: 1.6;
}
.cv-check { display: flex; align-items: center; gap: 8px; padding: 8px 0; cursor: pointer; }

/* Cards (edge / material) -------------------------------------------- */
.cv-edge-card,
.cv-material-card {
    display: flex; align-items: center; gap: 10px;
    padding: 10px;
    border: 2px solid #e5e7eb;
    border-radius: 6px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.cv-edge-card:hover,
.cv-material-card:hover { background: #f9fafb; }
.cv-edge-card.selected,
.cv-material-card.selected { border-color: #16a34a; background: #ecfdf5; }

/* Price list manager modal tabs -------------------------------------- */
#cv-pricelist-host .tabs {
    display: flex; gap: 4px;
    border-bottom: 1px solid #e5e7eb;
}
#cv-pricelist-host .tab {
    padding: 10px 16px;
    border: none; background: transparent;
    cursor: pointer; font-size: 13px; font-weight: 600;
    color: #6b7280;
    border-bottom: 2px solid transparent;
}
#cv-pricelist-host .tab.active { color: #16a34a; border-bottom-color: #16a34a; }

/* Tablet — stack side panel under canvas ----------------------------- */
@media (max-width: 1024px) {
    .cv-workspace { flex-direction: column; }
    .cv-side { width: 100%; max-height: 45vh; border-left: none; border-top: 1px solid #e5e7eb; }
}

/* ── PROMPT 7 — Touch gestures ───────────────────────────────────────────
 * Disable iOS Safari's default pan/zoom and text-selection on the canvas
 * so two-finger pinch/pan reaches our touchstart/touchmove handlers
 * instead of scrolling the page.
 */
.cv-canvas-wrap canvas { touch-action: none; -webkit-user-select: none; user-select: none; }
.cv-canvas-wrap { touch-action: none; }