/* ── BUG-256 — Pre-Ticket page-level styles ──────────────────────────────── */

/* Page container */
.pt-page {
    padding: 24px;
    max-width: 1600px;
    margin: 0 auto;
}

/* Header */
.pt-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
    flex-wrap: wrap;
    gap: 10px;
}

.pt-page-title {
    font-size: 20px;
    font-weight: bold;
    color: #e8eaf0;
}

body[data-theme="light"] .pt-page-title {
    color: #1a202c;
}

/* Header buttons */
.pt-refresh-btn {
    background: #4a90d9;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 7px 16px;
    cursor: pointer;
    font-size: 13px;
    font-weight: bold;
    transition: background 0.15s;
}

.pt-refresh-btn:hover {
    background: #3a7fd9;
}

.pt-raise-new-btn {
    background: #28a745;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 7px 16px;
    cursor: pointer;
    font-size: 13px;
    font-weight: bold;
    white-space: nowrap;
    transition: background 0.15s;
}

.pt-raise-new-btn:hover {
    background: #218838;
}

/* Filter bar */
.pt-filter-bar {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    align-items: flex-end;
}

.pt-filter-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 160px;
}

.pt-filter-label {
    font-size: 12px;
    color: #9aa3b5;
    white-space: nowrap;
}

.pt-dropdown {
    min-width: 160px;
    color: #1a1f2e;
}

/* Date inputs */
.pt-date-input {
    background: #1e2537;
    color: #e8eaf0;
    border: 1px solid #2d3548;
    border-radius: 4px;
    padding: 7px 10px;
    font-size: 13px;
    min-width: 160px;
    box-sizing: border-box;
    outline: none;
}

.pt-date-input:focus {
    border-color: #4a90d9;
}

.pt-date-input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(0.7);
    cursor: pointer;
}

body[data-theme="light"] .pt-date-input {
    background: #f7f9fc;
    color: #1a202c;
    border-color: #d1d9e0;
}

body[data-theme="light"] .pt-date-input:focus {
    border-color: #4a90d9;
}

body[data-theme="light"] .pt-date-input[type="date"]::-webkit-calendar-picker-indicator {
    filter: none;
}

/* Action status */
.pt-action-status {
    min-height: 24px;
    font-size: 13px;
    color: #9aa3b5;
    margin-bottom: 10px;
}

body[data-theme="light"] .pt-action-status {
    color: #4a5568;
}

/* Section wrap */
.pt-section-wrap {
    position: relative;
}

/* Table wrap — overflow-y:clip prevents a scroll container on the y-axis, so the
   react-select Transition dropdown menu can extend below a short (1-row) table
   without triggering a vertical scrollbar. overflow-clip-margin gives 300 px of
   paint room outside the box before clipping kicks in (BUG-394). */
.pt-table-wrap {
    overflow-x: auto;
    overflow-y: clip;
    overflow-clip-margin: 300px;
}

/* Mobile (<=480px) */
@media (max-width: 480px) {
    .pt-page {
        padding: 12px;
    }

    .pt-filter-bar {
        flex-direction: column;
    }

    .pt-filter-group {
        width: 100%;
        min-width: unset;
    }

    .pt-dropdown,
    .pt-date-input {
        width: 100%;
        min-width: unset;
    }

    .pt-refresh-btn,
    .pt-raise-new-btn {
        min-height: 44px;
        padding: 10px 16px;
    }
}

/* ── FEAT-147 — Pre-ticket image upload & timeline images ──────────────────── */

/* ── Image upload row in Raise modal ──────────────────────────────────────── */
.pt-img-upload-row {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}

.pt-img-slot {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.pt-img-upload {
    border: 2px dashed #2d3548;
    border-radius: 6px;
    padding: 8px 4px;
    text-align: center;
    cursor: pointer;
    color: #9aa3b5;
    font-size: 12px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.2s, color 0.2s;
}

.pt-img-upload:hover {
    border-color: #4a9eff;
    color: #4a9eff;
}

body[data-theme="light"] .pt-img-upload {
    border-color: #c8d0de;
    color: #5a6070;
}

body[data-theme="light"] .pt-img-upload:hover {
    border-color: #4a9eff;
    color: #4a9eff;
}

.pt-img-upload-label {
    font-size: 12px;
    pointer-events: none;
}

.pt-img-preview {
    width: 100%;
    max-height: 80px;
    object-fit: cover;
    border-radius: 4px;
    margin-top: 4px;
    border: 1px solid #2d3548;
}

body[data-theme="light"] .pt-img-preview {
    border-color: #d0d7e3;
}

/* ── Timeline images section ──────────────────────────────────────────────── */
.pt-timeline-images {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 4px;
}

.pt-timeline-img-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.pt-timeline-img-thumb {
    width: 100px;
    height: 80px;
    object-fit: cover;
    border-radius: 6px;
    cursor: pointer;
    border: 1px solid #2d3548;
    transition: opacity 0.2s, border-color 0.2s;
    display: block;
}

.pt-timeline-img-thumb:hover {
    opacity: 0.82;
    border-color: #4a9eff;
}

body[data-theme="light"] .pt-timeline-img-thumb {
    border-color: #c8d0de;
}

.pt-timeline-img-dl {
    font-size: 11px;
    color: #4a9eff;
    text-decoration: none;
}

.pt-timeline-img-dl:hover {
    text-decoration: underline;
}

/* ── Mobile (390px) ───────────────────────────────────────────────────────── */
@media (max-width: 390px) {
    .pt-img-upload-row {
        flex-direction: column;
    }

    .pt-timeline-images {
        gap: 6px;
    }

    .pt-timeline-img-thumb {
        width: 80px;
        height: 64px;
    }
}

/* ── FEAT-168 — Severity + Category pills ─────────────────────────────────── */

.pt-severity-pills,
.pt-category-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}

.pt-pill-input {
    display: none;
}

.pt-sev-pill,
.pt-cat-pill {
    display: inline-block;
    padding: 5px 14px;
    border-radius: 20px;
    border: 1.5px solid #3d4860;
    background: #1e2537;
    color: #9aa3b5;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    user-select: none;
    white-space: nowrap;
}

/* Severity color-coded — nth-child matches option order in raise_ticket_modal.py: critical, major, minor */
.pt-severity-pills > div:nth-child(1) .pt-sev-pill { border-color: #dc354544; color: #dc3545; }
.pt-severity-pills > div:nth-child(2) .pt-sev-pill { border-color: #fd7e1444; color: #fd7e14; }
.pt-severity-pills > div:nth-child(3) .pt-sev-pill { border-color: #5ec97e44; color: #5ec97e; }

/* BUG-328 — :has() survives React re-renders; :checked+ was unreliable on controlled inputs */
.pt-severity-pills > .pt-sev-pill:nth-child(1):has(input:checked), .pt-severity-pills > div:nth-child(1) .pt-sev-pill:has(input:checked) { background: #dc354522; border-color: #dc3545; }
.pt-severity-pills > .pt-sev-pill:nth-child(2):has(input:checked), .pt-severity-pills > div:nth-child(2) .pt-sev-pill:has(input:checked) { background: #fd7e1422; border-color: #fd7e14; }
.pt-severity-pills > .pt-sev-pill:nth-child(3):has(input:checked), .pt-severity-pills > div:nth-child(3) .pt-sev-pill:has(input:checked) { background: #5ec97e22; border-color: #5ec97e; }

/* Category pills — neutral accent */
.pt-cat-pill { color: #c0c6d4; border-color: #3d4860; }
.pt-cat-pill:has(input:checked) {
    background: #4a9eff22;
    border-color: #4a9eff;
    color: #4a9eff;
}

/* Light theme */
body[data-theme="light"] .pt-sev-pill,
body[data-theme="light"] .pt-cat-pill {
    background: #f7f9fc;
    border-color: #c8d0de;
    color: #4a5568;
}

body[data-theme="light"] .pt-severity-pills > div:nth-child(1) .pt-sev-pill { color: #c82333; border-color: #c8233366; }
body[data-theme="light"] .pt-severity-pills > div:nth-child(2) .pt-sev-pill { color: #d66a0a; border-color: #d66a0a66; }
body[data-theme="light"] .pt-severity-pills > div:nth-child(3) .pt-sev-pill { color: #2e9e5a; border-color: #2e9e5a66; }

body[data-theme="light"] .pt-severity-pills > .pt-sev-pill:nth-child(1):has(input:checked), body[data-theme="light"] .pt-severity-pills > div:nth-child(1) .pt-sev-pill:has(input:checked) { background: #c8233318; border-color: #c82333; }
body[data-theme="light"] .pt-severity-pills > .pt-sev-pill:nth-child(2):has(input:checked), body[data-theme="light"] .pt-severity-pills > div:nth-child(2) .pt-sev-pill:has(input:checked) { background: #d66a0a18; border-color: #d66a0a; }
body[data-theme="light"] .pt-severity-pills > .pt-sev-pill:nth-child(3):has(input:checked), body[data-theme="light"] .pt-severity-pills > div:nth-child(3) .pt-sev-pill:has(input:checked) { background: #2e9e5a18; border-color: #2e9e5a; }

body[data-theme="light"] .pt-cat-pill:has(input:checked) {
    background: #4a9eff18;
    border-color: #4a90d9;
    color: #4a90d9;
}

/* ── FEAT-168 — Image format warning ──────────────────────────────────────── */
.pt-img-warn {
    font-size: 11px;
    color: #dc3545;
    margin-top: 3px;
    min-height: 14px;
}

/* ── FEAT-168 — Lightbox overlay ──────────────────────────────────────────── */
.pt-lightbox-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.88);
    display: flex;
    align-items: center;
    justify-content: center;
}

.pt-lightbox-img {
    max-width: 92vw;
    max-height: 88vh;
    object-fit: contain;
    border-radius: 6px;
    box-shadow: 0 8px 48px rgba(0, 0, 0, 0.7);
    display: block;
}

.pt-lightbox-close {
    position: fixed;
    top: 18px;
    right: 22px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #fff;
    font-size: 20px;
    line-height: 1;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
    z-index: 10001;
}

.pt-lightbox-close:hover {
    background: rgba(255, 255, 255, 0.25);
}

/* Light theme — lightbox stays dark (it's a full overlay) */

/* ── FEAT-169 — Ticket-no clickable link ──────────────────────────────────── */
.pt-ticket-link {
    background: none;
    border: none;
    color: #4a9eff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 0.15s;
}

.pt-ticket-link:hover {
    color: #7ec8ff;
}

body[data-theme="light"] .pt-ticket-link {
    color: #2563c4;
}

body[data-theme="light"] .pt-ticket-link:hover {
    color: #1a4fa0;
}

/* ── FEAT-169 — Detail popup modal ────────────────────────────────────────── */
.pt-detail-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.75);
    z-index: 9999;
    justify-content: center;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
}

.pt-detail-box {
    background: #1e2537;
    border-radius: 12px;
    width: 100%;
    max-width: 680px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.65);
    overflow: hidden;
}

body[data-theme="light"] .pt-detail-box {
    background: #ffffff;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.22);
}

.pt-detail-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px 14px;
    border-bottom: 1px solid #2d3548;
    flex-shrink: 0;
}

body[data-theme="light"] .pt-detail-header-row {
    border-bottom-color: #d1d9e0;
}

.pt-detail-header-info {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.pt-detail-ticket-no {
    color: #e8eaf0;
    font-size: 16px;
    font-weight: bold;
}

body[data-theme="light"] .pt-detail-ticket-no {
    color: #1a202c;
}

.pt-detail-plate {
    color: #9aa3b5;
    font-size: 14px;
}

body[data-theme="light"] .pt-detail-plate {
    color: #4a5568;
}

.pt-detail-close-btn {
    background: none;
    border: none;
    color: #9aa3b5;
    font-size: 20px;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
    flex-shrink: 0;
    transition: color 0.15s;
}

.pt-detail-close-btn:hover {
    color: #e8eaf0;
}

body[data-theme="light"] .pt-detail-close-btn {
    color: #718096;
}

body[data-theme="light"] .pt-detail-close-btn:hover {
    color: #1a202c;
}

.pt-detail-body {
    flex: 1;
    max-height: calc(85vh - 150px); /* cap body so header + comment bar always reachable */
    overflow-y: auto;
    padding: 16px 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pt-detail-section {
    background: #252b3b;
    border-radius: 8px;
    padding: 14px 16px;
}

body[data-theme="light"] .pt-detail-section {
    background: #f7f9fc;
    border: 1px solid #e2e8f0;
}

.pt-detail-section-title {
    color: #4a90d9;
    font-weight: bold;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.pt-detail-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 16px;
}

@media (max-width: 480px) {
    .pt-detail-fields {
        grid-template-columns: 1fr;
    }
}

.pt-detail-row {
    display: flex;
    gap: 6px;
    align-items: baseline;
}

.pt-detail-label {
    color: #6b7fa8;
    font-size: 11px;
    white-space: nowrap;
    min-width: 80px;
}

body[data-theme="light"] .pt-detail-label {
    color: #718096;
}

.pt-detail-value {
    color: #c0c6d4;
    font-size: 12px;
    word-break: break-word;
}

body[data-theme="light"] .pt-detail-value {
    color: #2d3748;
}

/* ── FEAT-169 — Comment section ────────────────────────────────────────────── */
.pt-comment-section {
    padding: 12px 24px 16px;
    border-top: 1px solid #2d3548;
    flex-shrink: 0;
    background: #1e2537;
}

body[data-theme="light"] .pt-comment-section {
    border-top-color: #d1d9e0;
    background: #fff;
}

.pt-comment-textarea {
    width: 100%;
    background: #1a1f2e;
    color: #e8eaf0;
    border: 1px solid #2d3548;
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 13px;
    resize: vertical;
    min-height: 60px;
    max-height: 120px;
    box-sizing: border-box;
    outline: none;
    font-family: inherit;
}

.pt-comment-textarea:focus {
    border-color: #4a90d9;
}

body[data-theme="light"] .pt-comment-textarea {
    background: #f7f9fc;
    color: #1a202c;
    border-color: #d1d9e0;
}

body[data-theme="light"] .pt-comment-textarea:focus {
    border-color: #4a90d9;
}

.pt-comment-footer {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
}

.pt-comment-add-btn {
    background: #4a90d9;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 7px 16px;
    cursor: pointer;
    font-size: 13px;
    font-weight: bold;
    white-space: nowrap;
    transition: background 0.15s;
}

.pt-comment-add-btn:hover {
    background: #3a7fd9;
}

.pt-comment-status {
    font-size: 12px;
    color: #dc3545;
}

/* Mobile (390px) — BUG-291: constrain popup to dvh, let flex size the body */
@media (max-width: 390px) {
    .pt-detail-overlay {
        padding: 0;
        align-items: stretch;
    }

    .pt-detail-box {
        height: 100dvh;
        max-height: 100dvh;
        border-radius: 0;
        min-height: 0;
        /* BUG-293 (verified fix): the flex body would NOT shrink to make room, so an attached-photo
           preview pushed the comment footer off-screen (clipped, unreachable). Make the whole BOX the
           scroller instead — everything (header, body, comment footer) is reachable no matter what's
           attached. */
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .pt-detail-header-row {
        padding: 14px 16px 10px;
    }

    .pt-detail-body {
        /* BUG-293: body takes its natural height; the BOX is the scroller now (see above) */
        max-height: none;
        padding: 12px 16px;
        overflow: visible;
        flex: 0 0 auto;
        min-height: 0;
    }

    .pt-comment-section {
        padding: 10px 16px 14px;
        /* flex-shrink: 0 already set; this keeps the footer pinned at the box bottom */
    }

    .pt-comment-add-btn,
    .pt-attach-label {
        min-height: 44px; /* iOS tap target minimum */
        min-width: 44px;
    }
}

/* ── FEAT-172 — Stage duration journey strip ──────────────────────────────── */

.pt-journey-strip-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
}

/* Light theme — node labels already themed via inline color; dots + lines are fine */

/* ── FEAT-155 — Edit button + cancelled row styles ────────────────────────── */

.pt-edit-btn {
    background: #2d3548;
    color: #c0c6d4;
    border: 1px solid #3d4860;
    border-radius: 4px;
    padding: 4px 10px;
    cursor: pointer;
    font-size: 12px;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}

.pt-edit-btn:hover {
    background: #4a90d9;
    color: #fff;
    border-color: #4a90d9;
}

body[data-theme="light"] .pt-edit-btn {
    background: #f0f3f8;
    color: #4a5568;
    border-color: #c8d0de;
}

body[data-theme="light"] .pt-edit-btn:hover {
    background: #4a90d9;
    color: #fff;
    border-color: #4a90d9;
}

/* ── FEAT-173-FE — Comment attachment upload + preview ─────────────────────── */

.pt-attach-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
}

.pt-attach-upload {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    flex-shrink: 0;
}

.pt-attach-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    font-size: 18px;
    line-height: 1;
    color: #9aa3b5;
    border: 1px dashed #3d4860;
    border-radius: 6px;
    cursor: pointer;
    user-select: none;
    transition: color 0.15s, border-color 0.15s;
}

.pt-attach-label:hover {
    color: #4a9eff;
    border-color: #4a9eff;
}

body[data-theme="light"] .pt-attach-label {
    color: #4a5568;
    border-color: #c8d0de;
}

body[data-theme="light"] .pt-attach-label:hover {
    color: #4a90d9;
    border-color: #4a90d9;
}

.pt-attach-warn {
    font-size: 12px;
    color: #dc3545;
    flex: 1;
}

.pt-attach-strip {
    display: flex;
    flex-wrap: nowrap;        /* single row — no wrapping so strip height stays fixed */
    gap: 6px;
    margin-top: 4px;
    max-height: 64px;         /* cap so footer never grows past one thumbnail row */
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    min-height: 0;
}

.pt-attach-thumb-wrap {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
}

.pt-attach-remove-btn {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #dc3545;
    color: #fff;
    border: none;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    z-index: 1;
}

.pt-attach-remove-btn:hover {
    background: #b02a37;
}

.pt-attach-preview-thumb {
    width: 52px;
    height: 52px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid #2d3548;
    cursor: pointer;
}

body[data-theme="light"] .pt-attach-preview-thumb {
    border-color: #c8d0de;
}

.pt-attach-preview-chip {
    display: inline-block;
    background: #1a2035;
    color: #c0c6d4;
    border: 1px solid #2d3548;
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 11px;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

body[data-theme="light"] .pt-attach-preview-chip {
    background: #f7f9fc;
    color: #2d3748;
    border-color: #c8d0de;
}

/* Comment attachment: image thumb (reuses lightbox-activatable class) */
.pt-comment-attach-thumb {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 4px;
    margin-top: 4px;
    cursor: zoom-in;
}

/* Comment PDF chip */
.pt-comment-attach-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.pt-comment-pdf-chip {
    display: inline-block;
    background: #1a2035;
    color: #c0c6d4;
    border: 1px solid #2d3548;
    border-radius: 4px;
    padding: 3px 8px;
    font-size: 11px;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s;
}

.pt-comment-pdf-chip:hover {
    background: #253050;
    color: #4a9eff;
}

body[data-theme="light"] .pt-comment-pdf-chip {
    background: #f7f9fc;
    color: #2d3748;
    border-color: #c8d0de;
}

body[data-theme="light"] .pt-comment-pdf-chip:hover {
    background: #e8f0fb;
    color: #4a90d9;
}

/* ── FEAT-175 — Stage tooltip cursor hint ────────────────────────────────── */

/* Reached stage dots with tooltip show help cursor (set inline in controller) */