/*
 * Artwork Proofer — Phase 1 styles.
 * Left-rail upload column, mirroring 4Over's proofer shape. Dark + light parity.
 */

.pr-proofer-shell {
    display: grid;
    grid-template-columns: 300px 1fr 320px;
    gap: 20px;
    /* clears the site's fixed header */
    padding: 104px 24px 24px;
    min-height: calc(100vh - 80px);
    background: var(--dark, #0b0b10);
    color: var(--text-primary, #eef);
}
@media (max-width: 1100px) {
    .pr-proofer-shell { grid-template-columns: 1fr; }
}

/* Left rail — upload column */
.pr-upload-rail {
    background: var(--dark2, #15151c);
    border: 1px solid var(--border, rgba(243, 235, 239, 0.1));
    border-radius: 14px;
    padding: 20px;
    height: fit-content;
}
.pr-rail-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.pr-rail-title { font-size: 18px; font-weight: 700; margin: 0; letter-spacing: -0.015em; }
.pr-rail-collapse { background: none; border: none; color: var(--text-caption, #a0a0ab); cursor: pointer; padding: 4px; border-radius: 6px; }
.pr-rail-collapse:hover { background: rgba(142, 33, 202, 0.08); color: var(--text-primary, #eef); }

/* Progress */
.pr-rail-progress { margin-bottom: 20px; }
.pr-rail-progress-text { margin: 0 0 8px; font-size: 13px; color: var(--text-caption, #a0a0ab); }
.pr-rail-progress-track { height: 4px; background: var(--border, rgba(243, 235, 239, 0.1)); border-radius: 999px; overflow: hidden; }
.pr-rail-progress-fill { height: 100%; background: #22c55e; border-radius: 999px; transition: width 0.3s ease; }

/* Faces grid */
.pr-rail-faces { display: flex; flex-direction: column; gap: 14px; }
.pr-face-slot { position: relative; }
.pr-face-label { font-size: 11px; letter-spacing: 0.14em; font-weight: 700; color: var(--brand-500, #c084fc); margin-bottom: 6px; }

/* Filled slot — thumbnail card with success check */
.pr-face-slot-filled .pr-face-thumb {
    position: relative;
    border: 1px solid var(--border, rgba(243, 235, 239, 0.1));
    border-radius: 10px;
    aspect-ratio: 1.75 / 1;
    background: var(--dark, #0b0b10);
    display: flex; align-items: center; justify-content: center;
    color: var(--text-caption, #a0a0ab);
    cursor: pointer;
    transition: border-color 0.12s;
}
.pr-face-slot-filled .pr-face-thumb:hover { border-color: var(--brand-500, #c084fc); }
.pr-face-thumb-preview { opacity: 0.6; }
.pr-face-thumb-check { position: absolute; top: 8px; right: 8px; }
.pr-face-filename { font-size: 12px; margin: 8px 0 4px; color: var(--text-primary, #eef); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-face-replace { background: none; border: none; color: var(--brand-500, #c084fc); cursor: pointer; font-size: 12px; padding: 0; text-align: left; }
.pr-face-replace:hover { text-decoration: underline; }

/* Empty slot — dropzone */
.pr-face-dropzone {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 6px;
    border: 1.5px dashed var(--border-strong, rgba(243, 235, 239, 0.2));
    border-radius: 10px;
    aspect-ratio: 1.75 / 1;
    padding: 12px;
    color: var(--text-caption, #a0a0ab);
    cursor: pointer;
    transition: border-color 0.12s, background 0.12s;
}
.pr-face-dropzone:hover,
.pr-face-dropzone.pr-dragover {
    border-color: var(--brand-500, #c084fc);
    background: rgba(142, 33, 202, 0.06);
    color: var(--brand-500, #c084fc);
}
.pr-face-dropzone-text { font-size: 13px; font-weight: 600; }
.pr-face-dropzone-hint { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.7; }
.pr-face-dropzone-input { position: absolute; width: 0; height: 0; opacity: 0; pointer-events: none; }
.pr-face-dropzone-icon { opacity: 0.7; }

/* Center canvas placeholder — Phase 2 fills this */
.pr-canvas-placeholder {
    background: var(--dark2, #15151c);
    border: 1px solid var(--border, rgba(243, 235, 239, 0.1));
    border-radius: 14px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: 500px;
    color: var(--text-caption, #a0a0ab);
    gap: 12px;
}
.pr-canvas-placeholder-title { font-size: 18px; color: var(--text-primary, #eef); font-weight: 600; margin: 0; }
.pr-canvas-placeholder-sub { font-size: 14px; margin: 0; }

/* Right rail — Phase 3 fills this */
.pr-preflight-rail {
    background: var(--dark2, #15151c);
    border: 1px solid var(--border, rgba(243, 235, 239, 0.1));
    border-radius: 14px;
    padding: 20px;
    height: fit-content;
}
.pr-preflight-title { font-size: 18px; font-weight: 700; margin: 0 0 16px; letter-spacing: -0.015em; }
.pr-preflight-warnings {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 14px;
    background: var(--dark, #0b0b10);
    border-radius: 10px;
    font-size: 14px;
    margin-bottom: 20px;
}
.pr-preflight-count { background: rgba(34, 197, 94, 0.15); color: #4ade80; font-weight: 700; padding: 2px 10px; border-radius: 999px; }

/* Rail thumbnails render the real preview (Phase 2) */
.pr-face-thumb-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; border-radius: 9px; background: #fff; }

/* ── Phase 2: proof stage ─────────────────────────────────────────── */
.pr-stage-col {
    background: var(--dark2, #15151c);
    border: 1px solid var(--border, rgba(243, 235, 239, 0.1));
    border-radius: 14px;
    padding: 20px;
    display: flex; flex-direction: column;
    min-height: 560px;
}
.pr-stage-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.pr-face-tabs { display: flex; gap: 6px; }
.pr-face-tab {
    background: none; border: 1px solid var(--border, rgba(243,235,239,0.1));
    color: var(--text-caption, #a0a0ab); font-size: 13px; font-weight: 600;
    padding: 7px 16px; border-radius: 999px; cursor: pointer;
    transition: all 0.12s;
}
.pr-face-tab:hover { color: var(--text-primary, #eef); border-color: var(--brand-500, #c084fc); }
.pr-face-tab-active { background: var(--brand-500, #c084fc); border-color: var(--brand-500, #c084fc); color: #16091f; }
.pr-zoom { display: flex; align-items: center; gap: 4px; }
.pr-zoom button {
    background: var(--dark, #0b0b10); border: 1px solid var(--border, rgba(243,235,239,0.1));
    color: var(--text-primary, #eef); width: 30px; height: 30px; border-radius: 8px;
    cursor: pointer; font-size: 15px; line-height: 1;
}
.pr-zoom button:hover { border-color: var(--brand-500, #c084fc); }
.pr-zoom [data-zoom-fit] { width: auto; padding: 0 10px; font-size: 12px; }

.pr-stage {
    flex: 1;
    display: flex; align-items: center; justify-content: center;
    background:
        linear-gradient(45deg, rgba(255,255,255,0.025) 25%, transparent 25%, transparent 75%, rgba(255,255,255,0.025) 75%),
        linear-gradient(45deg, rgba(255,255,255,0.025) 25%, transparent 25%, transparent 75%, rgba(255,255,255,0.025) 75%),
        var(--dark, #0b0b10);
    background-size: 24px 24px;
    background-position: 0 0, 12px 12px;
    border-radius: 10px;
    overflow: auto;
    padding: 36px;
}
.pr-artboard-frame { transition: transform 0.15s ease; transform-origin: center center; }
.pr-artboard {
    position: relative;
    width: min(560px, 62vw);
    background: #ffffff;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.45);
}
.pr-artboard-empty { background: var(--dark2, #15151c); border: 1.5px dashed var(--border-strong, rgba(243,235,239,0.2)); }
.pr-artboard-placeholder {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    color: var(--text-caption, #a0a0ab); font-size: 14px; text-align: center; padding: 20px;
}
.pr-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; }
.pr-artboard-fallback {
    display: none;
    position: absolute; inset: 0;
    flex-direction: column; align-items: center; justify-content: center; gap: 10px;
    color: #666; font-size: 12px; text-align: center; padding: 16px;
}
.pr-artboard-noimg .pr-artboard-fallback { display: flex; }

/* Overlays — bleed (red, outer edge), cut line (solid), safe area (dashed green) */
.pr-ov { position: absolute; pointer-events: none; }
.pr-ov-bleed { inset: 0; border: 2px solid rgba(239, 68, 68, 0.9); }
.pr-ov-trim { border: 1.5px solid rgba(37, 99, 235, 0.95); }
.pr-ov-safe { border: 1.5px dashed rgba(26, 139, 78, 0.95); }

.pr-stage-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.pr-stage-dims { font-size: 12px; color: var(--text-caption, #a0a0ab); }
.pr-legend { display: flex; gap: 16px; flex-wrap: wrap; }
.pr-legend label { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-caption, #a0a0ab); cursor: pointer; }
.pr-legend input { accent-color: var(--brand-500, #c084fc); }
.pr-swatch { display: inline-block; width: 14px; height: 0; border-top-width: 2px; }
.pr-swatch-bleed { border-top: 2px solid rgba(239, 68, 68, 0.9); }
.pr-swatch-trim { border-top: 2px solid rgba(37, 99, 235, 0.95); }
.pr-swatch-safe { border-top: 2px dashed rgba(26, 139, 78, 0.95); }

/* ── Phase 3: preflight rail ──────────────────────────────────────── */
.pr-preflight-count[data-level="warning"] { background: rgba(245, 158, 11, 0.15); color: #fbbf24; }
.pr-preflight-count[data-level="error"] { background: rgba(239, 68, 68, 0.15); color: #f87171; }
.pr-preflight-empty { font-size: 13px; color: var(--text-caption, #a0a0ab); margin: 0; }
.pr-preflight-face { margin-bottom: 18px; }
.pr-preflight-face-head {
    background: none; border: none; padding: 0; cursor: pointer;
    font-size: 11px; letter-spacing: 0.14em; font-weight: 700;
    color: var(--brand-500, #c084fc); margin-bottom: 8px;
}
.pr-preflight-face-head:hover { text-decoration: underline; }
.pr-check-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pr-check { display: flex; gap: 9px; align-items: flex-start; font-size: 12.5px; line-height: 1.45; }
.pr-check-icon { flex: none; margin-top: 1px; }
.pr-check-msg { color: var(--text-caption, #a0a0ab); }
.pr-check-warning .pr-check-msg, .pr-check-error .pr-check-msg { color: var(--text-primary, #eef); }

/* ── Phase 5: 3D view ─────────────────────────────────────────────── */
.pr-view-toggle { display: flex; border: 1px solid var(--border, rgba(243,235,239,0.1)); border-radius: 999px; overflow: hidden; }
.pr-view-btn {
    background: none; border: none; color: var(--text-caption, #a0a0ab);
    font-size: 12px; font-weight: 700; padding: 7px 16px; cursor: pointer;
}
.pr-view-btn-active { background: var(--brand-500, #c084fc); color: #16091f; }
.pr-stage[hidden] { display: none; }
.pr-stage-3d { padding: 0; }
.pr-stage-3d canvas { display: block; width: 100% !important; height: 100% !important; }
.pr-3d-loading { display: flex; align-items: center; justify-content: center; height: 100%; min-height: 420px; color: var(--text-caption, #a0a0ab); font-size: 14px; }

/* ── Phase 4: approval panel + history ────────────────────────────── */
.pr-approval { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border, rgba(243,235,239,0.1)); display: flex; flex-direction: column; gap: 12px; }
.pr-approval:empty { display: none; }
.pr-status-chip {
    align-self: flex-start;
    font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
    padding: 4px 12px; border-radius: 999px;
    background: var(--dark, #0b0b10); color: var(--text-caption, #a0a0ab);
    border: 1px solid var(--border, rgba(243,235,239,0.1));
}
.pr-status-ready_to_approve { color: #4ade80; border-color: rgba(34,197,94,0.4); }
.pr-status-needs_review { color: #fbbf24; border-color: rgba(245,158,11,0.4); }
.pr-status-approved, .pr-status-locked { color: #4ade80; background: rgba(34,197,94,0.12); border-color: rgba(34,197,94,0.4); }
.pr-approval-note { font-size: 12.5px; color: var(--text-caption, #a0a0ab); margin: 0; line-height: 1.5; }
.pr-ack { display: flex; gap: 9px; align-items: flex-start; font-size: 12.5px; line-height: 1.5; color: var(--text-primary, #eef); cursor: pointer; }
.pr-ack input { margin-top: 2px; accent-color: var(--brand-500, #c084fc); }
.pr-sign-input {
    width: 100%; box-sizing: border-box;
    background: var(--dark, #0b0b10); border: 1px solid var(--border, rgba(243,235,239,0.1));
    color: var(--text-primary, #eef); border-radius: 9px; padding: 10px 12px; font-size: 13px;
}
.pr-sign-input:focus { outline: none; border-color: var(--brand-500, #c084fc); }
.pr-btn {
    border: none; border-radius: 9px; padding: 11px 16px;
    font-size: 13.5px; font-weight: 700; cursor: pointer; width: 100%;
    transition: filter 0.12s;
}
.pr-btn:hover:not(:disabled) { filter: brightness(1.1); }
.pr-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.pr-btn-submit { background: var(--brand-500, #c084fc); color: #16091f; }
.pr-btn-approve { background: #1a8b4e; color: #fff; }
.pr-btn-ghost { background: none; border: 1px solid var(--border-strong, rgba(243,235,239,0.2)); color: var(--text-primary, #eef); }
.pr-approved-banner {
    display: flex; flex-direction: column; gap: 4px;
    background: rgba(34,197,94,0.1); border: 1px solid rgba(34,197,94,0.35);
    border-radius: 10px; padding: 12px 14px; font-size: 12.5px;
}
.pr-approved-banner strong { color: #4ade80; font-size: 13.5px; }
.pr-approved-banner span { color: var(--text-caption, #a0a0ab); }

.pr-history { margin-top: 18px; }
.pr-history summary { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-caption, #a0a0ab); cursor: pointer; }
.pr-history-list { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pr-history-list li { display: flex; gap: 8px; align-items: baseline; font-size: 12px; color: var(--text-caption, #a0a0ab); }
.pr-history-list li span:nth-child(2) { flex: 1; }
.pr-history-rev { flex: none; font-weight: 700; color: var(--brand-500, #c084fc); }
.pr-history-list time { flex: none; font-size: 10.5px; opacity: 0.7; }

/* Light theme parity */
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) .pr-proofer-shell { background: #f3ebef; color: #141420; }
    :root:not([data-theme="dark"]) .pr-upload-rail,
    :root:not([data-theme="dark"]) .pr-canvas-placeholder,
    :root:not([data-theme="dark"]) .pr-preflight-rail { background: #ffffff; border-color: #e5e5ec; }
    :root:not([data-theme="dark"]) .pr-face-slot-filled .pr-face-thumb,
    :root:not([data-theme="dark"]) .pr-preflight-warnings { background: #faf5f8; }
    :root:not([data-theme="dark"]) .pr-face-dropzone { border-color: #d4cce3; }
}
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) .pr-stage-col { background: #ffffff; border-color: #e5e5ec; }
    :root:not([data-theme="dark"]) .pr-stage { background: #efe7ee; }
    :root:not([data-theme="dark"]) .pr-zoom button { background: #faf5f8; border-color: #e5e5ec; color: #141420; }
    :root:not([data-theme="dark"]) .pr-artboard-empty { background: #faf5f8; border-color: #d4cce3; }
}
:root[data-theme="light"] .pr-stage-col { background: #ffffff; border-color: #e5e5ec; }
:root[data-theme="light"] .pr-stage { background: #efe7ee; }
:root[data-theme="light"] .pr-zoom button { background: #faf5f8; border-color: #e5e5ec; color: #141420; }
:root[data-theme="light"] .pr-artboard-empty { background: #faf5f8; border-color: #d4cce3; }

:root[data-theme="light"] .pr-proofer-shell { background: #f3ebef; color: #141420; }
:root[data-theme="light"] .pr-upload-rail,
:root[data-theme="light"] .pr-canvas-placeholder,
:root[data-theme="light"] .pr-preflight-rail { background: #ffffff; border-color: #e5e5ec; }
:root[data-theme="light"] .pr-face-slot-filled .pr-face-thumb,
:root[data-theme="light"] .pr-preflight-warnings { background: #faf5f8; }
:root[data-theme="light"] .pr-face-dropzone { border-color: #d4cce3; }