/* House photo slots (shared by pages that load /js/house-photos.js) + View Reports compaction (2026-08-29) */
.house-photo { display: none; position: relative; overflow: hidden !important; contain: paint; isolation: isolate; background: #f1f5f9; }
.house-photo img { display: block; width: 100%; height: 100%; max-height: 100% !important; object-fit: cover; }
.house-photo.has-photo { display: block; cursor: zoom-in; }
.house-photo.is-map::after { content: "MAP"; position: absolute; right: 4px; bottom: 4px; font-size: 8.5px; font-weight: 800; letter-spacing: .06em; color: #fff; background: rgba(15,23,42,.55); padding: 1px 5px; border-radius: 999px; }
.house-photo--row { width: 56px; height: 40px; border-radius: 8px; flex: none; }
@media (max-width: 768px) { .house-photo--row { width: 44px; height: 32px; border-radius: 7px; } }
/* hover preview + lightbox (same look as the dashboard) */
.hp-preview { position: fixed; z-index: 10050; width: 300px; background: #fff; border-radius: 12px; box-shadow: 0 16px 40px -8px rgba(15,23,42,.45), 0 0 0 1px rgba(15,23,42,.06); overflow: hidden; opacity: 0; transform: scale(.96); pointer-events: none; transition: opacity .15s ease, transform .15s ease; }
.hp-preview.show { opacity: 1; transform: none; }
.hp-preview img { display: block; width: 300px; height: 188px; object-fit: cover; }
.hp-cap { padding: 6px 10px; font-size: 11.5px; font-weight: 600; color: #334155; background: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hp-lightbox { position: fixed; inset: 0; z-index: 10060; background: rgba(15,23,42,.72); display: none; align-items: center; justify-content: center; padding: 20px; }
.hp-lightbox.show { display: flex; }
.hp-lightbox-box { position: relative; background: #fff; border-radius: 14px; overflow: hidden; max-width: min(92vw, 720px); box-shadow: 0 30px 80px -20px rgba(0,0,0,.6); }
.hp-lightbox-box img { display: block; width: 100%; height: auto; max-height: 70vh; object-fit: cover; }
.hp-lightbox-box .hp-cap { font-size: 13px; padding: 10px 14px; white-space: normal; }
.hp-close { position: absolute; top: 8px; right: 8px; width: 34px; height: 34px; border-radius: 50%; border: 0; background: rgba(255,255,255,.92); color: #0f172a; font-size: 22px; line-height: 1; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.25); }
body.hp-lightbox-open { overflow: hidden; }

/* ── View Reports (2026-08-30 layout): separate Photo column; Access + Permission are compact chips WITH text;
   the Customer cell is just the name, so long names stop wrapping into the photo. ── */
/* photo lives in its own cell now */
.reports-table td[data-label="Photo"] .house-photo--row { width: 92px; height: 62px; border-radius: 9px; margin: 0 auto; }
.reports-table td[data-label="Photo"] { text-align: center; }
/* customer cell: name only (avatar is redundant next to the photo) */
.reports-table td[data-label="Customer"] .customer-avatar { display: none !important; }
.reports-table td[data-label="Customer"] .customer-info { display: block !important; }
.reports-table td[data-label="Customer"] .customer-details h6 { margin: 0 !important; line-height: 1.3; overflow-wrap: anywhere; }
/* access ("#") + permission chips: small, one line, text kept */
.reports-table td[data-label="Report #"], .reports-table td[data-label="Access"], .reports-table td[data-label="Permission"] { text-align: center; }
td[data-label="Permission"] .permission-indicator { display: inline-flex !important; align-items: center; gap: 5px; padding: 3px 8px !important; border-radius: 999px; font-size: 10.5px; line-height: 1.3; }
td[data-label="Permission"] .permission-chip-text { display: inline !important; font-size: 10.5px; white-space: nowrap; }
td[data-label="Permission"] .permission-label { display: block !important; font-size: 9.5px !important; color: #6b7280 !important; margin-top: 2px !important; line-height: 1.15 !important; }
td[data-label="Permission"] .permission-toggle { text-align: center; }
@media (min-width: 769px) {
  .reports-table thead th:nth-child(1), .reports-table thead th:nth-child(2) { width: 92px; }     /* Access, Photo-ish guard */
  .reports-table thead th[data-sort="customer_name"] { width: 150px; }
}

/* View Reports: Permission column = one icon with a tooltip (the "#" column already says Unlocked / Needs Payment / Needs Signature) */
td[data-label="Permission"] .permission-chip-text, td[data-label="Permission"] .permission-label { display: none !important; }
td[data-label="Permission"] .permission-indicator { width: 30px; height: 30px; border-radius: 50%; display: inline-flex !important; align-items: center; justify-content: center; padding: 0 !important; margin: 0 auto; font-size: 13px; }
td[data-label="Permission"] .permission-toggle { text-align: center; }
/* View Reports: address on one line on desktop (full address + Zillow hint in the tooltip); wraps normally on phones */
@media (min-width: 769px) { .reports-table td[data-label="Address"] .vr-addr { display: block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } }
/* desktop: narrower "#" and Permission columns (the two <th>s right before Customer), thumbnail a bit larger */
@media (min-width: 769px) {
  .reports-table thead th:has(+ th + th[data-sort="customer_name"]) { width: 92px; }   /* # */
  .reports-table thead th:has(+ th[data-sort="customer_name"]) { width: 78px; }        /* Permission */
}
/* desktop row compaction (2026-08-29): tighter cells, date+time on one line, narrower fixed columns, bigger thumbnail */
@media (min-width: 769px) {
  .reports-table tbody td { padding-top: .45rem !important; padding-bottom: .45rem !important; }
  .reports-table thead th[data-sort="inspection_date"] { width: 118px; }
  .reports-table thead th[data-sort="report_price"] { width: 86px; }
  .reports-table thead th:has(+ th[data-sort="status"]) { width: 96px; }      /* Payment */
  .reports-table thead th[data-sort="status"] { width: 120px; }
  .reports-table thead th[data-sort="services_summary"] { width: 200px; }
  .reports-table td[data-label="Date"] .date-cell > *, .reports-table td[data-label="Date"] > div > * { margin: 0 !important; }
  .reports-table td[data-label="Services"] > div { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-start; }
  .reports-table td[data-label="Services"] .service-pill { margin: 0 !important; }
}

/* ── Access column (state + permission stacked) and a dedicated Photo column (2026-08-30) ── */
.reports-table td[data-label="Report #"], .reports-table td[data-label="Status"]:has(.permission-toggle) { text-align: center; }
td .permission-toggle { display: inline-flex !important; flex-direction: column; align-items: center; gap: 2px; margin-top: 6px; cursor: pointer; }
td .permission-toggle .permission-chip-text { display: none !important; }
td .permission-toggle .permission-indicator { width: 26px; height: 26px; border-radius: 50%; display: inline-flex !important; align-items: center; justify-content: center; padding: 0 !important; font-size: 12px; }
td .permission-toggle .permission-indicator i::before { content: "\f084"; }                          /* key = full access */
td .permission-toggle .permission-indicator:not(.permission-state-full) i::before { content: "\f502"; } /* user-lock = restricted */
td .permission-toggle .permission-label { display: block !important; font-size: 10px !important; line-height: 1.15 !important; margin: 0 !important; color: #6b7280 !important; white-space: nowrap; }
.reports-table td[data-label="Photo"] .house-photo--row { width: 88px !important; height: 60px !important; border-radius: 9px; margin: 0 auto; }
.reports-table td[data-label="Photo"] .house-photo--row:not(.has-photo) { display: block; background: #f1f5f9; }   /* neutral slot when no photo */
.reports-table td[data-label="Customer"] .customer-avatar { display: none !important; }                          /* initials no longer needed */
@media (min-width: 769px) {
  .reports-table thead th:has(+ th + th[data-sort="customer_name"]) { width: 104px; }   /* Access */
  .reports-table thead th:has(+ th[data-sort="customer_name"]) { width: 104px; }        /* Photo */
  .reports-table td[data-label="Date"] .date-cell, .reports-table td[data-label="Date"] > div { flex-direction: column !important; align-items: center !important; gap: 2px !important; text-align: center; }
  .reports-table td[data-label="Date"] { text-align: center; }
  .reports-table td[data-label="Customer"] .customer-details h6 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 768px) {
  .reports-table td[data-label="Photo"]::before { display: none !important; }
  .reports-table td[data-label="Photo"] .house-photo--row:not(.has-photo) { display: none !important; }
}
/* Access column: keep the permission label on ONE line (it was stacking "Full / Access") */
@media (min-width: 769px) {
  .reports-table thead th:first-child, .reports-table td[data-label="Permission"], .reports-table td[data-label="Access"] { min-width: 104px; }
  td[data-label="Permission"] .permission-label { white-space: nowrap !important; }
  /* Date + time: two centered lines that line up under each other */
  .reports-table td[data-label="Date"] { text-align: center !important; }
  .reports-table td[data-label="Date"] .date-cell, .reports-table td[data-label="Date"] > div { display: block !important; text-align: center !important; white-space: nowrap; }
  .reports-table td[data-label="Date"] .date-cell > *, .reports-table td[data-label="Date"] > div > * { justify-content: center !important; }
  .reports-table th[data-sort="inspection_date"] { text-align: center; }
}
/* date column: wide enough for both lines, time forced onto its own line, nothing clipped */
@media (min-width: 769px) {
  .reports-table thead th[data-sort="inspection_date"] { width: 132px !important; }
  .reports-table td[data-label="Date"] { overflow: visible !important; }
  .reports-table td[data-label="Date"] .date-cell > *, .reports-table td[data-label="Date"] > div > * { display: flex !important; width: 100% !important; justify-content: center !important; align-items: center; gap: 4px; white-space: nowrap; }
  /* access chips: text on one line, tighter stack */
  .reports-table thead th:first-child { width: 116px !important; }
  .reports-table td[data-label="Permission"] .permission-label, .reports-table td[data-label="Access"] .permission-label, .reports-table td[data-label="Report #"] .status-chip-row { white-space: nowrap !important; }
  .reports-table td[data-label="Report #"] * , .reports-table td[data-label="Access"] * { white-space: nowrap !important; }
}
/* the access/permission labels sit in an inline-styled div — beat it with an id-level selector */
@media (min-width: 769px) {
  #reportsTableBody td[data-label="Permission"] div, #reportsTableBody td[data-label="Access"] div,
  .reports-table tbody td[data-label="Permission"] .permission-toggle div { white-space: nowrap !important; }
  .reports-table thead th:first-child { width: 124px !important; min-width: 124px !important; }
}

/* ── Access + Permission (final): ICONS on one top row, then one short label per line, one shared font ── */
@media (min-width: 769px) {
  .reports-table thead th:first-child { width: 86px !important; min-width: 86px !important; }
  .reports-table thead th:nth-child(2):not([data-sort]) { width: 76px !important; }
  .reports-table td[data-label="Report #"], .reports-table td[data-label="Access"], .reports-table td[data-label="Permission"] { padding: .45rem .2rem !important; text-align: center !important; vertical-align: top !important; }
  /* one type scale for BOTH cells */
  .reports-table td[data-label="Report #"] *, .reports-table td[data-label="Access"] *, .reports-table td[data-label="Permission"] * {
    font-family: inherit !important; font-size: 9.5px !important; font-weight: 700 !important; letter-spacing: .01em !important; line-height: 1.15 !important; text-transform: none !important;
  }
  /* icon row on top, label under — identical structure in both cells */
  .reports-table td[data-label="Status"] .status-chip-row > div,
  .reports-table td[data-label="Report #"] .status-chip-row > div,
  .reports-table td[data-label="Access"] .status-chip-row > div,
  .reports-table tbody td[data-label="Permission"] > .permission-toggle { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; gap: 3px !important; padding: 0 !important; margin: 0 !important; }
  .reports-table td[data-label="Report #"] .status-chip-row i, .reports-table td[data-label="Access"] .status-chip-row i,
  .reports-table tbody td[data-label="Permission"] .permission-indicator i { font-size: 15px !important; line-height: 1 !important; }
  .reports-table tbody td[data-label="Permission"] .permission-indicator { padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; width: auto !important; height: auto !important; }
  .reports-table tbody td[data-label="Permission"] .permission-chip-text { display: none !important; }
  /* labels: one line each, never split ("Full Access" stays together) */
  .reports-table td[data-label="Report #"] .status-chip-row > div > span,
  .reports-table td[data-label="Access"] .status-chip-row > div > span,
  .reports-table tbody td[data-label="Permission"] > .permission-toggle > div:last-child { display: block !important; margin: 0 !important; white-space: nowrap !important; word-break: keep-all !important; overflow-wrap: normal !important; color: inherit !important; }
  .reports-table tbody td[data-label="Permission"] > .permission-toggle > div:last-child { color: #6b7280 !important; }
}
/* thumbnails: rounded on every corner, in every context */
.house-photo, .house-photo--row, .house-photo--card, .house-photo img { border-radius: 10px !important; }
.reports-table td[data-label="Photo"] .house-photo--row, .reports-table td[data-label="Photo"] .house-photo--row img { border-radius: 10px !important; }
/* customer name: readable, not huge */
.reports-table td[data-label="Customer"] .customer-details h6 { font-size: .78rem !important; font-weight: 600 !important; line-height: 1.3 !important; margin: 0 !important; }
/* breathing room between the photo column and the name */
.reports-table td[data-label="Photo"] { padding-right: .75rem !important; }
.reports-table td[data-label="Customer"] { padding-left: .85rem !important; padding-right: .6rem !important; }


/* Status column: narrow — the pill only needs its own width */
@media (min-width: 769px) {
  .reports-table thead th[data-sort="status"] { width: 104px !important; }
  .reports-table td[data-label="Status"]:not(:has(.status-chip-row)) { padding-left: .25rem !important; padding-right: .25rem !important; text-align: center !important; }
  .reports-table td[data-label="Status"] .status-pill, .reports-table td[data-label="Status"] .vr-status-pill { font-size: 9.5px !important; padding: 2px 8px !important; letter-spacing: .02em !important; white-space: nowrap !important; }
  .reports-table thead th:has(+ th[data-sort="status"]) { width: 92px !important; }  /* Payment */
}

/* ── Access + Permission: 3 rows max (icon row, then one word per line) and a lighter, centered name ── */
@media (min-width: 769px) {
  /* hide the long label and print a short one instead, so it can never wrap */
  .reports-table tbody td[data-label="Permission"] > .permission-toggle > div:last-child { font-size: 9.5px !important; line-height: 1.15 !important; font-weight: 700 !important; color: #6b7280 !important; white-space: nowrap !important; }
  /* customer name: regular weight, centered in its column */
  .reports-table td[data-label="Customer"] { text-align: center !important; }
  .reports-table td[data-label="Customer"] .customer-info, .reports-table td[data-label="Customer"] .customer-details { text-align: center !important; }
  .reports-table td[data-label="Customer"] .customer-details h6 { font-weight: 500 !important; font-size: .78rem !important; text-align: center !important; }
}
/* centre the name in its own column (equal gap to the photo and to the address) */
@media (min-width: 769px) {
  .reports-table td[data-label="Customer"] { padding-left: .6rem !important; padding-right: .6rem !important; vertical-align: middle !important; }
  .reports-table td[data-label="Customer"] .customer-info { display: flex !important; align-items: center !important; justify-content: center !important; }
  .reports-table td[data-label="Photo"] { padding-right: .5rem !important; }
}

/* ── Access cell: both icons on the SAME top row, each label directly beneath (2 rows total) ── */
@media (min-width: 769px) {
  .reports-table thead th:first-child { width: 132px !important; min-width: 132px !important; }
  .reports-table tbody td[data-label="Report #"], .reports-table tbody td[data-label="Access"] { display: grid !important; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; align-items: start; justify-items: center; column-gap: 8px; row-gap: 2px; padding: .5rem .3rem !important; }
  /* left half: signature/payment state */
  .reports-table tbody td[data-label="Report #"] > .status-chip-row, .reports-table tbody td[data-label="Access"] > .status-chip-row { grid-column: 1; grid-row: 1 / span 2; }
  /* right half: access permission */
  .reports-table tbody td[data-label="Report #"] > .permission-toggle, .reports-table tbody td[data-label="Access"] > .permission-toggle { grid-column: 2; grid-row: 1 / span 2; }
  /* hide the ID/clipboard block that used to sit in this cell so it doesn't push things around */
  .reports-table tbody td[data-label="Report #"] > div:not(.status-chip-row):not(.permission-toggle), .reports-table tbody td[data-label="Access"] > div:not(.status-chip-row):not(.permission-toggle) { display: none !important; }
}
/* the chip + permission sit inside a wrapper; make the wrapper the flex row so both icons share the top line */
@media (min-width: 769px) {
  .reports-table tbody td[data-label="Report #"], .reports-table tbody td[data-label="Access"] { display: table-cell !important; }
  .reports-table tbody td[data-label="Report #"] > *, .reports-table tbody td[data-label="Access"] > * { display: block; }
  .reports-table tbody td[data-label="Report #"] .status-chip-row, .reports-table tbody td[data-label="Access"] .status-chip-row { display: inline-flex !important; vertical-align: top; margin-right: 6px !important; }
  .reports-table tbody td[data-label="Report #"] .permission-toggle, .reports-table tbody td[data-label="Access"] .permission-toggle { display: inline-flex !important; vertical-align: top; }
  .reports-table tbody td[data-label="Report #"] > div:has(> .status-chip-row), .reports-table tbody td[data-label="Access"] > div:has(> .status-chip-row) { display: inline-block !important; }
  .reports-table tbody td[data-label="Report #"], .reports-table tbody td[data-label="Access"] { white-space: nowrap !important; text-align: center !important; }
}

/* ── FINAL: the access cell's data-label is "Status" (the first one in the row), not "Access".
   Target the FIRST cell of each row: both icon blocks side by side, icons on the top line. ── */
@media (min-width: 769px) {
  .reports-table tbody tr[data-report-id] > td:first-child { display: flex !important; flex-direction: row !important; align-items: flex-start !important; justify-content: center !important; gap: 10px !important; padding: .5rem .35rem !important; white-space: nowrap !important; }
  .reports-table tbody tr[data-report-id] > td:first-child > .status-chip-row,
  .reports-table tbody tr[data-report-id] > td:first-child > .permission-toggle { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 3px !important; margin: 0 !important; flex: 0 0 auto !important; }
  .reports-table tbody tr[data-report-id] > td:first-child .status-chip-row > div { flex-direction: column !important; align-items: center !important; gap: 3px !important; padding: 0 !important; }
  .reports-table tbody tr[data-report-id] > td:first-child i { font-size: 15px !important; line-height: 1 !important; }
  .reports-table tbody tr[data-report-id] > td:first-child span,
  .reports-table tbody tr[data-report-id] > td:first-child .permission-label { font-size: 9.5px !important; font-weight: 700 !important; line-height: 1.15 !important; white-space: nowrap !important; }
}
/* icons on line 1, labels on line 2 (grid: two columns, icons row then labels row) */
@media (min-width: 769px) {
  .reports-table tbody tr[data-report-id] > td:first-child { display: grid !important; grid-template-columns: auto auto !important; grid-template-rows: auto auto !important; align-items: center !important; justify-content: center !important; column-gap: 14px !important; row-gap: 3px !important; }
  .reports-table tbody tr[data-report-id] > td:first-child > .status-chip-row { display: contents !important; }
  .reports-table tbody tr[data-report-id] > td:first-child .status-chip-row > div { display: contents !important; }
  .reports-table tbody tr[data-report-id] > td:first-child .status-chip-row i { grid-column: 1; grid-row: 1; justify-self: center; }
  .reports-table tbody tr[data-report-id] > td:first-child .status-chip-row > div > span { grid-column: 1; grid-row: 2; justify-self: center; }
  .reports-table tbody tr[data-report-id] > td:first-child > .permission-toggle { display: contents !important; }
  .reports-table tbody tr[data-report-id] > td:first-child .permission-indicator { display: contents !important; }
  .reports-table tbody tr[data-report-id] > td:first-child .permission-indicator i { grid-column: 2; grid-row: 1; justify-self: center; }
  .reports-table tbody tr[data-report-id] > td:first-child .permission-label { grid-column: 2; grid-row: 2; justify-self: center; }
  /* display:contents above collapses .permission-toggle to a 0x0 box, so the click
     that opens the permissions modal had nothing to land on (its onclick never fired).
     The icon and label are the only painted parts left — make them the hit target so
     the click still bubbles to the wrapper's handler. Layout is unchanged. */
  .reports-table tbody tr[data-report-id] > td:first-child .permission-indicator i,
  .reports-table tbody tr[data-report-id] > td:first-child .permission-label { cursor: pointer !important; pointer-events: auto !important; }
}
/* explicit placement: icons both on row 1, labels both on row 2 */
@media (min-width: 769px) {
  .reports-table tbody tr[data-report-id] > td:first-child { display: grid !important; grid-template-columns: minmax(58px, auto) minmax(58px, auto) !important; grid-template-areas: "i1 i2" "t1 t2" !important; align-items: center !important; justify-items: center !important; column-gap: 12px !important; row-gap: 2px !important; }
  .reports-table tbody tr[data-report-id] > td:first-child .status-chip-row i { grid-area: i1 !important; }
  .reports-table tbody tr[data-report-id] > td:first-child .status-chip-row > div > span { grid-area: t1 !important; }
  .reports-table tbody tr[data-report-id] > td:first-child .permission-indicator i { grid-area: i2 !important; }
  .reports-table tbody tr[data-report-id] > td:first-child .permission-label { grid-area: t2 !important; }
}
/* THREE rows: [icon icon] / [label 1] / [label 2] — each label centred on its own full-width row */
@media (min-width: 769px) {
  .reports-table tbody tr[data-report-id] > td:first-child { display: grid !important; grid-template-columns: 1fr 1fr !important; grid-template-areas: "i1 i2" "t1 t1" "t2 t2" !important; align-items: center !important; justify-items: center !important; column-gap: 10px !important; row-gap: 1px !important; }
  .reports-table tbody tr[data-report-id] > td:first-child .status-chip-row i { grid-area: i1 !important; }
  .reports-table tbody tr[data-report-id] > td:first-child .permission-indicator i { grid-area: i2 !important; }
  .reports-table tbody tr[data-report-id] > td:first-child .status-chip-row > div > span { grid-area: t1 !important; }
  .reports-table tbody tr[data-report-id] > td:first-child .permission-label { grid-area: t2 !important; }
}
/* icons closer together, a touch more breathing room before the labels */
@media (min-width: 769px) {
  .reports-table tbody tr[data-report-id] > td:first-child { grid-template-columns: auto auto !important; column-gap: 6px !important; row-gap: 0 !important; }
  .reports-table tbody tr[data-report-id] > td:first-child .status-chip-row i,
  .reports-table tbody tr[data-report-id] > td:first-child .permission-indicator i { margin-bottom: 5px !important; }
}
/* the agreement / sent / report status icons under the customer name: centred as a group */
@media (min-width: 769px) {
  .reports-table td[data-label="Customer"] .customer-details { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 4px !important; }
  .reports-table td[data-label="Customer"] .customer-details > *:not(h6) { display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; margin: 0 auto !important; }
  .reports-table td[data-label="Customer"] .customer-details a, .reports-table td[data-label="Customer"] .customer-details i, .reports-table td[data-label="Customer"] .customer-details img, .reports-table td[data-label="Customer"] .customer-details svg { margin: 0 !important; }
}
/* date + time right-aligned in their column (both lines flush right) */
@media (min-width: 769px) {
  .reports-table th[data-sort="inspection_date"] { text-align: right !important; padding-right: .75rem !important; }
  .reports-table td[data-label="Date"] { text-align: right !important; padding-right: .75rem !important; }
  .reports-table td[data-label="Date"] .date-cell, .reports-table td[data-label="Date"] > div { display: block !important; text-align: right !important; }
  .reports-table td[data-label="Date"] .date-cell > *, .reports-table td[data-label="Date"] > div > * { display: flex !important; justify-content: flex-end !important; align-items: center; gap: 5px; }
}
/* thumbnails: rounded on all four corners, image clipped to match (final override) */
.reports-table td[data-label="Photo"] .house-photo,
.reports-table td[data-label="Photo"] .house-photo--row { border-radius: 10px !important; overflow: hidden !important; }
.reports-table td[data-label="Photo"] .house-photo img,
.reports-table td[data-label="Photo"] .house-photo--row img { border-radius: 10px !important; display: block !important; }
.house-photo, .house-photo img { border-radius: 10px !important; }
/* keep the icon pair tight regardless of how wide the labels are (e.g. "Needs Signature") */
@media (min-width: 769px) {
  .reports-table tbody tr[data-report-id] > td:first-child { grid-template-columns: 1fr 1fr !important; column-gap: 0 !important; }
  .reports-table tbody tr[data-report-id] > td:first-child .status-chip-row i { justify-self: end !important; margin-right: 3px !important; }
  .reports-table tbody tr[data-report-id] > td:first-child .permission-indicator i { justify-self: start !important; margin-left: 3px !important; }
}
/* headers centred over their columns; date header centred while its values stay right-aligned */
@media (min-width: 769px) {
  .reports-table thead th { text-align: center !important; }
  .reports-table thead th[data-sort="inspection_date"] { text-align: center !important; padding-right: .3rem !important; }
  .reports-table td[data-label="Date"] { text-align: right !important; }
}
/* thumbnail: fixed frame, image fills it exactly — rounded on all four corners, nothing clipped square */
.reports-table td[data-label="Photo"] .house-photo,
.reports-table td[data-label="Photo"] .house-photo--row {
  width: 92px !important; height: 62px !important; border-radius: 10px !important; overflow: hidden !important;
  display: inline-block !important; margin: 0 auto !important; line-height: 0 !important; background: #f1f5f9 !important;
}
.reports-table td[data-label="Photo"] .house-photo img,
.reports-table td[data-label="Photo"] .house-photo--row img {
  width: 100% !important; height: 100% !important; max-width: 100% !important; object-fit: cover !important; border-radius: 10px !important; display: block !important;
}
/* Cost Estimates page: small house thumb + address stacked in the address cell */
.property-address .house-photo--row { width: 72px; height: 50px; border-radius: 9px; float: left; margin: 0 10px 0 0; }
.property-address .ce-addr { display: block; }
@media (max-width: 768px) { .property-address .house-photo--row { width: 56px; height: 40px; } }
/* demo/sample photo marker so it is never mistaken for the real property */
.house-photo.is-sample::after { content: "SAMPLE"; position: absolute; right: 4px; bottom: 4px; font-size: 8px; font-weight: 800; letter-spacing: .06em; color: #fff; background: rgba(100,116,139,.75); padding: 1px 5px; border-radius: 999px; }
/* photo cell: never clip the rounded thumbnail (row/cell overflow was chopping the corners) */
.reports-table td[data-label="Photo"] { overflow: visible !important; padding: .45rem .5rem !important; }
.reports-table td[data-label="Photo"] .house-photo,
.reports-table td[data-label="Photo"] .house-photo--row { border-radius: 10px !important; overflow: hidden !important; -webkit-mask-image: -webkit-radial-gradient(#fff, #000); box-shadow: 0 0 0 1px rgba(15,23,42,.06); }

/* ── View Reports tightening (2026-08-30) ── */
@media (min-width: 769px) {
  /* Access: narrower column, smaller type, no wasted padding */
  .reports-table thead th:first-child { width: 104px !important; min-width: 104px !important; }
  .reports-table tbody tr[data-report-id] > td:first-child { padding: .4rem .2rem !important; column-gap: 4px !important; }
  .reports-table tbody tr[data-report-id] > td:first-child i { font-size: 13px !important; }
  .reports-table tbody tr[data-report-id] > td:first-child span,
  .reports-table tbody tr[data-report-id] > td:first-child .permission-label { font-size: 9px !important; letter-spacing: -.01em !important; }
  /* Service type: let each service wrap onto its own row instead of being cut off */
  .reports-table thead th[data-sort="services_summary"] { width: 190px !important; }
  .reports-table td[data-label="Services"] { white-space: normal !important; }
  .reports-table td[data-label="Services"] > div { display: flex !important; flex-wrap: wrap !important; gap: 3px !important; justify-content: center !important; }
  .reports-table td[data-label="Services"] .service-pill { white-space: normal !important; max-width: 100% !important; font-size: 10px !important; line-height: 1.25 !important; padding: 2px 7px !important; }
  /* conflict chip: wraps rather than clipping */
  .reports-table td[data-label="Address"] .drive-conflict { white-space: normal !important; line-height: 1.25; max-width: 100%; }
}