/* Photo Tickets 2 -- split layout: scrollable ticket list on the left,
   the selected ticket on the right. Layered on top of photo-tickets.css
   (same strip, thumbnail, dot and sheet styles), so only layout and the
   new list rows are defined here. */

.pt2-main { max-width: none; padding: 8px 12px 8px; }
.pt2-trial-tag {
    font-size: 0.7rem; font-weight: 600; vertical-align: middle;
    background: #e8d9c4; color: #7a6855; border-radius: 10px; padding: 2px 8px; margin-left: 6px;
}

.pt2-layout {
    display: grid;
    grid-template-columns: 360px minmax(0, 1fr);
    gap: 16px;
    margin-top: 8px;
    height: 70vh; /* real height is set from JS (sizeLayout) */
}
.pt2-left, .pt2-detail {
    overflow-y: auto;
    min-height: 0;
    overscroll-behavior: contain;
}
.pt2-left { padding: 4px 4px 4px 2px; }
.pt2-left .pt-list { gap: 8px; }
.pt2-detail { padding-right: 4px; }

/* ── List rows ─────────────────────────────────────────────────────── */
.pt2-row {
    --row-bg: #fdf8f2;
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border: 2px solid transparent;
    border-radius: 12px;
    background: var(--row-bg);
    box-shadow: 0 1px 4px rgba(90, 70, 45, 0.08);
    -webkit-touch-callout: none;
    user-select: none;
}
.pt2-row--white { --row-bg: #ffffff; border-color: #e5ded5; }
.pt2-row--pink  { --row-bg: #fbe6ea; border-color: #f0c7d0; }
.pt2-row--blue  { --row-bg: #e7eff8; border-color: #c7d6e8; }
.pt2-row--grey  { --row-bg: #8e8e8e; border-color: #737373; }
.pt2-row--gold  { --row-bg: #faf1d9; border-color: #e8d3a0; }
.pt2-row--lilac { --row-bg: #ece7f6; border-color: #d1c4e9; }
.pt2-row--fire {
    border: 3px solid transparent;
    background:
        linear-gradient(var(--row-bg), var(--row-bg)) padding-box,
        linear-gradient(135deg, #ffb347, #ff5f1f, #d90000, #ff5f1f, #ffb347) border-box;
}
.pt2-row--archived { opacity: 0.55; }
.pt2-row.pt2-active { box-shadow: 0 0 0 3px var(--primary-color, #bb5d4c); }

.pt2-row-thumb {
    position: relative;
    flex: 0 0 64px;
    width: 64px;
    height: 80px;
    border-radius: 8px;
    overflow: hidden;
    background: #eee2d0;
    cursor: pointer;
}
.pt2-row-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.pt2-row-nophoto { display: flex; height: 100%; align-items: center; justify-content: center; font-size: 0.68rem; color: #b3a693; text-align: center; }
.pt2-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.pt2-row-caption {
    font-size: 0.88rem;
    line-height: 1.25;
    color: var(--text-color);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}
.pt2-row--grey .pt2-row-caption { color: #fff; }
.pt2-row-untitled { opacity: 0.55; font-style: italic; }
.pt2-row-dots { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.pt2-row-dots .pt-dot { width: 18px; height: 18px; }
.pt2-row-drag { font-size: 1.2rem; color: #8a6f56; cursor: grab; padding: 0 2px; touch-action: none; }
.pt2-row .pt-ticket-select-check { flex: 0 0 auto; position: static; }

/* gallery tiles inside the narrow left pane */
.pt2-left .pt-ticket-gallery { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); }
.pt2-left .pt-gallery-tile { max-width: none; }
.pt2-left .pt-gallery-tile.pt2-active .pt-gallery-tile-img { box-shadow: 0 0 0 3px var(--primary-color, #bb5d4c); }

/* ── Detail pane ───────────────────────────────────────────────────── */
.pt2-detail-empty { color: #b3a693; padding: 40px 10px; text-align: center; }
.pt2-detail-head { display: none; margin-bottom: 8px; }
.pt2-back-btn {
    border: none; background: #8a6f56; color: #fff; border-radius: 8px;
    padding: 8px 14px; font-size: 0.9rem; cursor: pointer;
}

/* Reserved space for the Via-Vision canvas (added in a later build) */
.pt2-canvas-slot {
    position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    min-height: 180px;
    margin-bottom: 12px;
    padding: 8px;
    border: 1px solid #e5ded5;
    border-radius: 14px;
    background: #f9f4ec;
}
.pt2-canvas-slot img { max-width: 100%; max-height: 260px; border-radius: 8px; object-fit: contain; }
.pt2-canvas-note { font-size: 0.75rem; color: #b3a693; }

/* The ticket's own strip, regrouped: canvas slot beside the checklist,
   then the text fields, the originals tray, the outputs tray, and the
   schedule. Same markup and handlers as the original page, only placed
   with CSS grid. */
.pt2-detail .pt-strip-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 210px;
    gap: 12px;
    align-items: start;
}
.pt2-detail .pt-mid,
.pt2-detail .pt-mid-top { display: contents; }
.pt2-detail .pt2-canvas-slot { grid-column: 1; grid-row: 1; margin-bottom: 0; }
.pt2-detail .pt-checklist {
    grid-column: 2; grid-row: 1;
    display: flex; flex-direction: column; gap: 8px;
    padding: 10px 12px;
    border: 1px solid #e5ded5; border-radius: 12px; background: rgba(255, 255, 255, 0.55);
}
.pt2-detail .pt-checklist::before {
    content: 'Deliverables'; font-size: 0.8rem; font-weight: 600; color: #7a6855;
}
.pt2-detail .pt-field-row { grid-column: 1 / -1; grid-row: auto; order: 1; }
.pt2-detail .pt2-trays { grid-column: 1 / -1; order: 2; display: flex; flex-direction: column; gap: 12px; }
.pt2-detail .pt-schedule { grid-column: 1 / -1; order: 4; }
.pt2-detail .pt2-canvas-slot, .pt2-detail .pt-checklist { order: 0; }
.pt2-detail .pt-media-zone--left::before,
.pt2-detail .pt-media-zone--right::before {
    display: block; margin-bottom: 6px; font-size: 0.8rem; font-weight: 600; color: #7a6855;
}
.pt2-detail .pt-media-zone--left::before { content: 'Original input (Sunsets)'; }
.pt2-detail .pt-media-zone--right::before { content: 'Resulting outputs (Trevor)'; }
.pt2-detail .pt-media-zone--left .pt-thumb { flex: 0 0 120px; }
.pt2-detail .pt-media-zone--right .pt-media-track { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); max-height: none; }
.pt2-detail .pt-ticket-select-check,
.pt2-detail .pt-strip-drag-handle { display: none; }

/* Wide screens: both trays side by side */
@media (min-width: 1200px) {
    .pt2-detail .pt2-trays { flex-direction: row; align-items: flex-start; }
    .pt2-detail .pt2-trays .pt-media-zone { flex: 1 1 0; min-width: 0; }
}

/* Wide screens: canvas | checklist | text fields all on one row. The
   fields stack in the third column beside the canvas; trays and schedule
   keep running full width underneath. */
@media (min-width: 1200px) {
    .pt2-detail .pt-strip-body { grid-template-columns: minmax(0, 1.25fr) 190px minmax(260px, 1fr); }
    .pt2-detail .pt2-canvas-slot { grid-column: 1; grid-row: 1 / span 4; }
    .pt2-detail .pt-checklist { grid-column: 2; grid-row: 1 / span 4; }
    .pt2-detail .pt-field-row { grid-column: 3; }
    .pt2-detail .pt-strip-body { grid-template-rows: auto auto auto 1fr; }
    .pt2-detail .pt-field-row .pt-field-label { min-width: 0; }
    .pt2-detail .pt-field-row input, .pt2-detail .pt-field-row textarea { min-width: 0; }
}

/* ── Phones: list first, detail on tap ─────────────────────────────── */
@media (max-width: 820px) {
    .pt2-layout { grid-template-columns: 1fr; }
    .pt2-detail { display: none; }
    .pt2-layout.pt2-detail-open .pt2-left { display: none; }
    .pt2-layout.pt2-detail-open .pt2-detail { display: block; }
    .pt2-detail-head { display: block; }
    .pt2-main { padding: 12px 10px 8px; }
    .pt2-detail .pt-strip-body { grid-template-columns: 1fr; }
    .pt2-detail .pt2-canvas-slot, .pt2-detail .pt-checklist { grid-column: 1; grid-row: auto; }
    .pt2-detail .pt-checklist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pt2-detail .pt-checklist::before { grid-column: 1 / -1; }
}


/* ── Compact toolbar: buttons, filters, retailer, search, archived ── */
.pt2-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; }
.pt2-toolbar-btns { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.pt2-toolbar .pt-color-filter-row { margin-top: 0; gap: 8px; flex-wrap: nowrap; }
.pt2-toolbar .pt-retailer-filter { padding-top: 0.4rem; padding-bottom: 0.4rem; }
.pt2-search { position: relative; flex: 0 1 170px; min-width: 120px; }
.pt2-search .pt-search-input { padding-top: 0.4rem; padding-bottom: 0.4rem; }
.pt2-toolbar #ptSelectBtn, .pt2-toolbar #ptGalleryToggleBtn, .pt2-toolbar #ptStoryifyToggleBtn,
.pt2-toolbar #ptBulkUploadBtn, .pt2-toolbar #ptNewTicketBtn { padding: 0.4rem 0.7rem; }

/* ── Tighter detail pane so a whole ticket fits on screen ──────────── */
.pt2-detail .pt-strip { padding: 8px 12px 20px; }
.pt2-detail .pt-strip-top { margin-bottom: 4px; }
.pt2-detail .pt-strip-body { gap: 8px; }
.pt2-canvas-slot { min-height: 140px; padding: 6px; }
.pt2-canvas-slot img { max-height: 230px; }
.pt2-detail .pt-checklist { gap: 4px; padding: 8px 10px; }
.pt2-detail .pt-media-zone { padding: 6px; }
.pt2-detail .pt-media-zone--left::before,
.pt2-detail .pt-media-zone--right::before { margin-bottom: 4px; }
.pt2-detail .pt-media-zone--left .pt-media-track { gap: 6px; }
.pt2-detail .pt-media-zone--left .pt-thumb { flex: 0 0 90px; }
.pt2-detail .pt-media-zone--right .pt-media-track { grid-template-columns: repeat(auto-fill, 90px); gap: 6px; }
.pt2-detail .pt-media-add { margin-top: 4px; padding: 4px; }
.pt2-detail .pt-media-download-all { margin-top: 4px; padding: 3px; }
.pt2-detail .pt-field-row { gap: 6px; }
.pt2-detail .pt-schedule { gap: 4px; }

/* Via-Vision canvas panel */
.pt2-canvas-slot { align-items: stretch; justify-content: flex-start; }
.vv { display: flex; gap: 10px; align-items: flex-start; width: 100%; }
.vv-canvas-col { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 4px; max-width: 55%; }
.vv-canvas { display: block; max-width: 100%; border-radius: 6px; box-shadow: 0 1px 6px rgba(0,0,0,0.18); touch-action: none; cursor: grab; background: #fff; }
.vv-hint { font-size: 0.65rem; color: #b3a693; text-align: center; }
.vv-controls { flex: 1 1 140px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.vv-text { width: 100%; box-sizing: border-box; resize: vertical; padding: 6px 8px; border: 1px solid #ddd0c0; border-radius: 8px; font: inherit; font-size: 0.85rem; }
.vv-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 0.75rem; color: #7a6855; }
.vv-lbl { font-weight: 600; }
.vv-chk { display: inline-flex; align-items: center; gap: 3px; }
.vv-row input[type="color"] { width: 26px; height: 22px; padding: 0; border: 1px solid #ddd0c0; border-radius: 4px; background: none; }
.vv-slider { display: flex; flex-direction: column; font-size: 0.72rem; color: #7a6855; }
.vv-slider input { width: 100%; margin: 0; }
.vv-font { flex: 1; min-width: 0; font-size: 0.8rem; padding: 3px; }
.vv-default-font, .vv-save, .vv-export { border: 1px solid #ddd0c0; background: #fff; border-radius: 8px; padding: 5px 9px; font-size: 0.78rem; cursor: pointer; }
.vv-save { background: #7a6855; color: #fff; border-color: #7a6855; }
.vv-actions { display: flex; gap: 6px; }
.vv-empty { padding: 20px; text-align: center; color: #b3a693; font-size: 0.85rem; width: 100%; }
.pt2-vv-source { outline: 3px solid #7a6855; outline-offset: -3px; }

/* ── Phone: squeeze everything so a ticket is ~1.5 screens, not 5 ───── */
@media (max-width: 820px) {
    .pt2-main { padding: 6px 8px 4px; }
    .pt2-toolbar { gap: 6px 8px; }
    .pt2-toolbar-btns { flex-wrap: nowrap; overflow-x: auto; width: 100%; padding-bottom: 2px; -webkit-overflow-scrolling: touch; }
    .pt2-toolbar-btns > * { flex: 0 0 auto; white-space: nowrap; }
    .pt2-toolbar #ptSelectBtn, .pt2-toolbar #ptGalleryToggleBtn, .pt2-toolbar #ptStoryifyToggleBtn,
    .pt2-toolbar #ptBulkUploadBtn, .pt2-toolbar #ptNewTicketBtn { padding: 0.35rem 0.55rem; font-size: 0.78rem; }
    .pt2-toolbar .pt-color-filter-row { gap: 5px; }
    .pt2-toolbar .pt-retailer-filter { flex: 1 1 100px; min-width: 0; width: auto; }
    .pt2-search { flex: 1 1 120px; min-width: 0; }
    .pt2-toolbar label { font-size: 0.8rem; white-space: nowrap; }

    .pt2-detail-head { margin-bottom: 4px; }
    .pt2-detail .pt-strip { padding: 6px 8px 12px; }
    .pt2-detail .pt-strip-body { gap: 6px; }

    .pt2-canvas-slot { padding: 6px; }
    .vv { flex-direction: row; gap: 8px; }
    .vv-canvas-col { max-width: 50%; }
    .vv-hint { display: none; }
    .vv-controls { gap: 4px; flex: 1 1 0; }
    .vv-text { rows: 2; font-size: 0.8rem; padding: 4px 6px; }
    .vv-row { gap: 4px; font-size: 0.7rem; }
    .vv-row input[type="color"] { width: 22px; height: 20px; }
    .vv-slider { flex-direction: row; align-items: center; gap: 4px; font-size: 0.68rem; }
    .vv-slider span { flex: 0 0 62px; white-space: nowrap; }
    .vv-slider input { flex: 1; min-width: 0; }
    .vv-font { font-size: 0.72rem; }
    .vv-default-font, .vv-save, .vv-export { padding: 4px 7px; font-size: 0.72rem; }

    .pt2-detail .pt-checklist { display: flex; flex-direction: row; flex-wrap: wrap; gap: 4px 12px; padding: 6px 8px; }
    .pt2-detail .pt-checklist::before { display: none; }
    .pt2-detail .pt-checklist > * { font-size: 0.8rem; }

    .pt2-trays { display: grid !important; grid-template-columns: 1fr 1fr; gap: 6px; }
    .pt2-detail .pt-media-zone { padding: 4px; min-width: 0; }
    .pt2-detail .pt-media-zone--left::before, .pt2-detail .pt-media-zone--right::before { font-size: 0.7rem; margin-bottom: 2px; }
    .pt2-detail .pt-media-zone--left .pt-thumb { flex: 0 0 64px; }
    .pt2-detail .pt-media-zone--left .pt-media-track { flex-wrap: wrap; }
    .pt2-detail .pt-media-zone--right .pt-media-track { grid-template-columns: repeat(auto-fill, 64px); gap: 4px; }
    .pt2-detail .pt-media-download-all { font-size: 0.68rem; }
    .pt2-detail .pt-field-row input, .pt2-detail .pt-field-row textarea { padding-top: 4px; padding-bottom: 4px; }
}

@media (max-width: 820px) {
    .pt2-detail .pt-strip-body { grid-template-columns: 1fr 1fr; }
    .pt2-detail .pt-strip-body > * { grid-column: 1 / -1; }
    .pt2-detail .pt-strip-body > .pt-field-row:nth-of-type(n) { grid-column: 1 / -1; }
    .pt2-detail .pt-field-label { display: none; }
    .pt2-detail .pt-field-row--notes textarea { min-height: 34px; height: 34px; }
    .vv-row.vv-row-wrap { flex-wrap: nowrap; }
}
@media (max-width: 820px) {
    .pt2-detail .pt-strip-body > .pt-field-row--half { grid-column: auto; }
    .vv-row .vv-lbl:not(:first-child) { margin-left: 2px; }
}
@media (max-width: 820px) {
    .pt2-detail .pt-strip-body > .pt-checklist,
    .pt2-detail .pt-strip-body > .pt2-canvas-slot { grid-column: 1 / -1 !important; }
    .pt2-detail .pt-strip-body > .pt-field-row--half { grid-column: auto !important; }
    .pt2-detail .pt-checklist { gap: 2px 12px; }
}
@media (max-width: 820px) {
    .pt2-detail .pt-mid > * { grid-column: 1 / -1 !important; }
    .pt2-detail .pt-mid > .pt-field-row--half { grid-column: auto !important; }
    .pt2-detail .pt-mid > .pt-schedule { grid-column: 1 / -1 !important; }
}
@media (max-width: 820px) {
    .pt2-detail .pt-strip-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; }
    .pt2-detail .pt-strip-body > *, .pt2-detail .pt-mid > * { min-width: 0; }
    .pt2-detail .pt-field-row--half input { min-width: 0; width: 100%; }
    .pt2-detail .pt-field-row--half .pt-link-open-btn, .pt2-detail .pt-field-row--half .pt-ltk-open-btn { flex: 0 0 26px; width: 26px; padding: 0; }
    .vv-canvas-col { max-width: 48%; }
}
@media (max-width: 820px) {
    .pt2-detail .pt-mid-top > * { grid-column: 1 / -1 !important; min-width: 0; }
}
@media (max-width: 820px) {
    /* While a ticket is open, the list tools are hidden; "All tickets" brings them back */
    .pt2-main:has(.pt2-layout.pt2-detail-open) .pt2-toolbar { display: none; }
}
.pt2-back-btn { display: none; }
@media (max-width: 820px) {
    .pt2-back-btn { display: inline-block; flex: 0 0 auto; padding: 4px 9px; font-size: 0.8rem; margin-right: 6px; }
    .pt2-detail .pt-strip-top-left { display: flex; align-items: center; }
}

/* Labels hidden on every screen size (placeholders say what each box is) */
.pt2-detail .pt-field-label { display: none; }
@media (min-width: 1200px) { .pt2-detail .pt-strip-body { column-gap: 8px; } }
/* Thicker colored borders on gallery tiles */
.pt2-left .pt-gallery-tile-img { border-width: 5px; }

/* Created time: top right, beside the three dots, in black */
.pt2-detail .pt-strip-created {
    left: auto; bottom: auto; right: 46px; top: 14px;
    font-size: 0.75rem; color: #000; font-weight: 500;
}
@media (max-width: 820px) {
    /* no room beside the dots on a phone: stays along the bottom, but black */
    .pt2-detail .pt-strip-created { left: 12px; right: auto; top: auto; bottom: 6px; }
}

/* Date picker ("Scheduled") hidden for now. Nothing is removed from the
   code or the data; delete this one rule to bring it back. */
.pt2-detail .pt-schedule { display: none !important; }

/* Deliverables filter dropdown */
.pt2-dl { position: relative; }
.pt2-dl-btn {
    padding: 0.4rem 0.7rem; border: 1px solid #ddd0c0; border-radius: 8px; background: #fff;
    font: inherit; font-size: 0.9rem; color: #5a4a3a; cursor: pointer; white-space: nowrap;
}
.pt2-dl-btn--on { background: #7a6855; color: #fff; border-color: #7a6855; }
.pt2-dl-panel {
    position: absolute; top: calc(100% + 4px); left: 0; z-index: 60; min-width: 190px;
    display: flex; flex-direction: column; gap: 6px; padding: 10px 12px;
    background: #fff; border: 1px solid #ddd0c0; border-radius: 10px; box-shadow: 0 6px 18px rgba(0,0,0,0.18);
}
.pt2-dl-panel.hidden { display: none; }
.pt2-dl-opt { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; color: #3d3226; cursor: pointer; }
.pt2-dl-clear { align-self: flex-start; margin-top: 2px; border: none; background: none; color: #8a6f56; font-size: 0.8rem; text-decoration: underline; cursor: pointer; padding: 0; }
@media (max-width: 820px) { .pt2-dl-btn { font-size: 0.8rem; padding: 0.35rem 0.55rem; } .pt2-search { flex: 1 1 100px; } }