/* ==========================================================================
   paperless-modern.css
   Shared stylesheet for "View as HTML" report rendering.
   Used by Check-Out (and future document types).
   Designed to coexist with the existing Site.css / Inventory Paperless CSS.
   ========================================================================== */

/* ---------- Custom properties ---------- */
:root {
    --bg: #F1F5F9;
    --surface: #FFFFFF;
    --ink: #1E293B;
    --ink-muted: #64748B;
    --ink-faint: #94A3B8;
    --border: #E2E8F0;
    --accent: #0D9488;
    --accent-hover: #0F766E;
    --accent-light: #F0FDFA;
    --radius: 0.75rem;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
    --shadow-md: 0 4px 24px rgba(0,0,0,0.08);
    --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-heading: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---------- Base ---------- */
.pm-report {
    font-family: var(--font-body);
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--ink);
}

/* ---------- Client logo banner (letterhead above hero) ---------- */
.pm-client-banner {
    background: var(--surface);
    padding: 1rem 1.5rem;
    border-radius: var(--radius);
    margin-bottom: 0.75rem;
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: center;
    gap: 1.25rem;
}
.pm-client-banner .pm-client-logo {
    max-height: 80px;
    width: auto;
    display: block;
}
.pm-client-banner-details {
    color: var(--ink);
    font-size: 0.875rem;
    line-height: 1.4;
}
.pm-client-banner-name {
    font-weight: 700;
    font-size: 1rem;
    color: #1A202C;
}
.pm-client-banner-address {
    color: var(--ink-muted);
    margin-top: 0.125rem;
}

/* ---------- Hero / header block ---------- */
.pm-hero {
    background: var(--ink);
    color: #fff;
    padding: 2.5rem 2rem;
    border-radius: var(--radius);
    margin-bottom: 1.5rem;
}
.pm-hero-address {
    font-family: var(--font-heading);
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 0.25rem;
    color: #fff;
}
.pm-hero-sub {
    font-size: 0.9375rem;
    color: rgba(255,255,255,0.6);
    margin: 0 0 1.25rem;
}
.pm-hero-meta {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
}
.pm-hero-meta-item {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}
.pm-hero-meta-label {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255,255,255,0.45);
}
.pm-hero-meta-value {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #fff;
}

/* ---------- Section cards ---------- */
.pm-section {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 1.25rem;
    overflow: hidden;
}
.pm-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.875rem 1.25rem;
    border-bottom: 1px solid var(--border);
    background: #F8FAFC;
}
.pm-section-title {
    font-family: var(--font-heading);
    font-size: 1.125rem;
    font-weight: 600;
    color: #1A202C;
    margin: 0;
}
.pm-section-badge {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ink-muted);
    background: var(--border);
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
}
.pm-section-body {
    padding: 1.25rem;
}

/* ---------- Field grid (key-value pairs) ---------- */
.pm-fields {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
}
.pm-field {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}
.pm-field-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ink-muted);
}
.pm-field-value {
    font-size: 0.9375rem;
    color: var(--ink);
}
.pm-field-value:empty::after {
    content: "\2014";
    color: var(--ink-faint);
}
.pm-field--full {
    grid-column: 1 / -1;
}

/* ---------- Tags ---------- */
.pm-tag {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.1875rem 0.5rem;
    border-radius: 9999px;
}
.pm-tag--yes {
    background: #DCFCE7;
    color: #166534;
}
.pm-tag--no {
    background: #FEE2E2;
    color: #991B1B;
}
.pm-tag--na {
    background: var(--border);
    color: var(--ink-muted);
}

/* ---------- Photo grid ---------- */
.pm-photos {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.75rem;
    margin-top: 1rem;
}
.pm-photos--inline {
    margin-top: 0.75rem;
}
.pm-photos a {
    display: inline-block;
    border-radius: 0.5rem;
    overflow: hidden;
    border: 1px solid var(--border);
    transition: box-shadow 0.15s ease;
    line-height: 0;
}
.pm-photos a:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}
.pm-photos img {
    max-height: 300px;
    width: auto;
    height: auto;
    display: block;
    cursor: pointer;
}

/* ---------- Issue-item pattern ----------
   Used by: Bulbs, Maintenance, MissingItems, RemoveItems,
   TenantAlterations, Carpets, Windows sub-lists.              */
.pm-issue-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.pm-issue-item {
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    padding: 1rem;
    background: var(--surface);
}
.pm-issue-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}
.pm-issue-title {
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--ink);
}
.pm-issue-fields {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}
.pm-issue-body {
    font-size: 0.875rem;
    color: var(--ink-muted);
    line-height: 1.5;
    margin-bottom: 0.5rem;
}
.pm-issue-body:empty {
    display: none;
}

/* ---------- Tenant cards ---------- */
.pm-tenant-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
}
.pm-tenant-card {
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    padding: 1rem;
    background: var(--surface);
}
.pm-tenant-name {
    font-weight: 600;
    font-size: 1rem;
    color: var(--ink);
    margin: 0 0 0.5rem;
}

/* ---------- Room section ---------- */
.pm-room {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 1.25rem;
    overflow: hidden;
    --room-color: #6B7280;
}
.pm-room-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1.25rem;
    border-bottom: 1px solid var(--border);
    background: #F8FAFC;
}
.pm-room-accent {
    width: 4px;
    height: 28px;
    border-radius: 2px;
    background: var(--room-color);
    flex-shrink: 0;
}
.pm-room-title {
    font-family: var(--font-heading);
    font-size: 1.125rem;
    font-weight: 600;
    color: #1A202C;
    margin: 0;
}
.pm-room-body {
    padding: 1.25rem;
}
.pm-room-subsection {
    margin-bottom: 1.25rem;
}
.pm-room-subsection:last-child {
    margin-bottom: 0;
}
.pm-room-subsection-title {
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ink-muted);
    margin: 0 0 0.75rem;
}

/* ---------- Issue table (within rooms) ---------- */
.pm-issue-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}
.pm-issue-table th {
    text-align: left;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ink-muted);
    padding: 0.5rem 0.75rem;
    border-bottom: 2px solid var(--border);
}
.pm-issue-table td {
    padding: 0.625rem 0.75rem;
    border-bottom: 1px solid var(--border);
    color: var(--ink);
    vertical-align: top;
}
.pm-issue-table tr:last-child td {
    border-bottom: none;
}
.pm-issue-table .pm-photos {
    margin-top: 0.5rem;
}

/* ---------- Utility suppliers table ---------- */
.pm-utility-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}
.pm-utility-table th {
    text-align: left;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ink-muted);
    padding: 0.5rem 0.75rem;
    border-bottom: 2px solid var(--border);
}
.pm-utility-table td {
    padding: 0.625rem 0.75rem;
    border-bottom: 1px solid var(--border);
    color: var(--ink);
}
.pm-utility-table tr:last-child td {
    border-bottom: none;
}

/* ---------- Empty state ---------- */
.pm-empty {
    text-align: center;
    padding: 1.5rem;
    color: var(--ink-faint);
    font-size: 0.875rem;
    font-style: italic;
}

/* ---------- Disclaimer ---------- */
.pm-disclaimer {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 1.25rem;
    overflow: hidden;
}
.pm-disclaimer .pm-section-head {
    background: #FEF2F2;
    border-bottom-color: #FECACA;
}
.pm-disclaimer .pm-section-title {
    color: #991B1B;
}
.pm-disclaimer .pm-section-body {
    font-size: 0.875rem;
    line-height: 1.7;
    color: var(--ink-muted);
}

/* ---------- Lightbox2 positioning fixes ---------- */
.lightboxOverlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 9999 !important;
}
.lightbox {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 10000 !important;
    margin: 0 !important;
}
/* Force a MINIMUM lightbox image size regardless of the underlying
   bytes. Without this, lightbox2 sizes the container to the image's
   natural dimensions — so an elevation photo stored at full
   4000x3000 camera resolution renders large while a room photo
   stored at ~800x600 renders small. min-height pushes small images
   up; max-height/max-width still cap the big ones. The container
   shrink-wraps the image so there's no white frame around it. */
.lb-outerContainer {
    max-height: 95vh !important;
    max-width: 95vw !important;
}
.lb-outerContainer img {
    min-height: 85vh !important;
    max-height: 95vh !important;
    max-width: 95vw !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
}

/* ---------- Declaration + Signatures (read-only HTML view) ---------- */
.pm-declaration {
    padding: 1rem 1.25rem;
    line-height: 1.6;
    color: #2D3748;
}
.pm-declaration p {
    margin: 0 0 0.75rem;
}
.pm-declaration p:last-child {
    margin-bottom: 0;
}

.pm-sig-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0.5rem 0;
}
.pm-sig-table th,
.pm-sig-table td {
    padding: 0.75rem 1rem;
    border: 1px solid var(--border);
    vertical-align: middle;
    text-align: left;
}
.pm-sig-table th {
    background: #F7FAFC;
    font-weight: 600;
    color: #4A5568;
}
.pm-sig-img {
    max-height: 80px;
    max-width: 280px;
    display: block;
}

/* ---------- Responsive ---------- */
@media only screen and (max-width: 1024px) {
    .pm-hero-address {
        font-size: 1.375rem;
    }
    .pm-fields {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    }
}

@media only screen and (max-width: 640px) {
    .pm-hero {
        padding: 1.5rem 1.25rem;
    }
    .pm-hero-address {
        font-size: 1.25rem;
    }
    .pm-hero-meta {
        gap: 1rem;
    }
    .pm-section-body {
        padding: 1rem;
    }
    .pm-fields {
        grid-template-columns: 1fr;
    }
    .pm-issue-fields {
        grid-template-columns: 1fr;
    }
    .pm-photos img {
        max-height: 220px;
    }
    .pm-room-body {
        padding: 1rem;
    }
}

/* ---------- Print ---------- */
@media print {
    .pm-report {
        font-size: 11pt;
    }
    .pm-hero {
        background: #1E293B !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        color: #fff !important;
        page-break-inside: avoid;
    }
    .pm-section,
    .pm-room,
    .pm-disclaimer {
        break-inside: avoid;
        box-shadow: none;
        border: 1px solid #ccc;
    }
    .pm-room {
        break-inside: auto;
    }
    .pm-room-head {
        break-inside: avoid;
        break-after: avoid;
    }
    .pm-photos img {
        height: auto;
        max-height: 120px;
    }
    .pm-room-accent {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    .pm-section-head {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}