:root {
    --ink: #16181b; --ink-soft: #565c63; --line: #e3e1dc; --bg: #fbfaf8; --bg-soft: #f4f2ee; --accent: #1c6e5c; --accent-soft: #e3f3ec;
    --danger: #dc2626; --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --shadow-sm: 0 1px 2px rgba(11,11,11,.04), 0 2px 8px rgba(11,11,11,.04);
    --shadow-md: 0 2px 4px rgba(11,11,11,.05), 0 8px 20px rgba(11,11,11,.07);

    /* Colorblind-safe basic palette for charts/tables/status — deliberately plain
       hues (no brown/muddy tones), kept separate from --accent (general UI brand color). */
    --basic-green: #16a34a; --basic-green-text: #15803d; --basic-green-bg: #dcfce7;
    --basic-red: #dc2626; --basic-red-text: #b91c1c; --basic-red-bg: #fee2e2;
    --basic-blue: #2563eb; --basic-blue-text: #1d4ed8; --basic-blue-bg: #dbeafe;
    --basic-orange: #ea580c; --basic-orange-text: #c2410c; --basic-orange-bg: #ffedd5;
    --basic-yellow: #eab308; --basic-yellow-text: #a16207; --basic-yellow-bg: #fef9c3;
    --basic-purple: #7c3aed; --basic-purple-text: #6d28d9; --basic-purple-bg: #ede9fe;
    --basic-teal: #0d9488; --basic-teal-text: #0f766e; --basic-teal-bg: #ccfbf1;
    --basic-pink: #db2777; --basic-pink-text: #be185d; --basic-pink-bg: #fce7f3;
}
* { box-sizing: border-box; }
.sr-only {
    position: absolute !important; width: 1px !important; height: 1px !important;
    padding: 0 !important; margin: -1px !important; overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important;
}
body { margin: 0; font-family: var(--font); color: var(--ink); background: var(--bg); }
a { color: var(--accent); transition: color .15s ease; }
.admin-header { background: #16181b; color: #fff; padding: 0 24px; box-shadow: 0 2px 12px rgba(0,0,0,.15); position: sticky; top: 0; z-index: 10; }
.admin-header .row { display: flex; align-items: center; justify-content: space-between; max-width: 1180px; margin: 0 auto; padding: 14px 0; }
.admin-header .brand { font-weight: 700; letter-spacing: .03em; }
.admin-header nav { display: flex; gap: 20px; font-size: 14px; }
.admin-header nav a { color: #cfd3d6; transition: color .15s ease; position: relative; padding-bottom: 2px; }
.admin-header nav a.active, .admin-header nav a:hover { color: #fff; }
.admin-header nav a.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -15px; height: 2px; background: var(--accent); }
.admin-nav-menu { position: relative; }
.admin-nav-menu > summary {
    list-style: none; color: #cfd3d6; cursor: pointer; white-space: nowrap;
    transition: color .15s ease; user-select: none;
}
.admin-nav-menu > summary::-webkit-details-marker { display: none; }
.admin-nav-menu > summary::after { content: ' \25BE'; font-size: 10px; }
.admin-nav-menu > summary:hover, .admin-nav-menu > summary.active, .admin-nav-menu[open] > summary { color: #fff; }
.admin-nav-menu > summary.active { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 6px; }
.admin-nav-menu-panel {
    position: absolute; z-index: 30; top: calc(100% + 14px); left: -12px;
    min-width: 210px; padding: 8px; border: 1px solid #34383d; border-radius: 9px;
    background: #16181b; box-shadow: 0 12px 28px rgba(0,0,0,.28);
}
.admin-nav-menu-panel a { display: block; padding: 9px 10px; border-radius: 6px; white-space: nowrap; }
.admin-nav-menu-panel a:hover { background: #292d32; }
.admin-nav-menu-panel a.active { color: #fff; background: var(--accent); }
.admin-nav-menu-panel a.active::after { display: none; }
.admin-header .who { font-size: 13px; color: #9aa0a6; }
.logout-form { display: inline; margin: 0; }
.logout-button {
    appearance: none; background: none; border: 0; color: #fff; cursor: pointer;
    font: inherit; padding: 0; text-decoration: underline;
}
@media (max-width: 960px) {
    .admin-header .row { align-items: flex-start; flex-wrap: wrap; gap: 12px; }
    .admin-header .row > div:first-child { flex-wrap: wrap; gap: 14px !important; }
    .admin-header nav { flex-wrap: wrap; gap: 14px; }
}

.admin-wrap { max-width: 1180px; margin: 0 auto; padding: 32px 24px 64px; animation: fadeIn .25s ease; }
.admin-wrap h1 { font-size: 24px; margin: 0 0 4px; }
.admin-wrap .sub { color: var(--ink-soft); margin: 0 0 28px; font-size: 14px; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

.card { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 24px; margin-bottom: 20px; box-shadow: var(--shadow-sm); transition: box-shadow .2s ease; }
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap: 16px; margin-bottom: 28px; }
.stat {
    background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 12px;
    padding: 18px 20px; box-shadow: var(--shadow-sm); transition: transform .18s ease, box-shadow .18s ease;
}
.stat:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.stat .num { font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; }
.stat .label { color: var(--ink-soft); font-size: 13px; }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); }
th { color: var(--ink-soft); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
tr:hover td { background: #f7f6f3; }
tbody tr { transition: background-color .12s ease; }

/* Leads table -- several free-text columns (name, email, message summary)
   have no natural length limit, so on real data they push the table wider
   than the admin content area and force a horizontal scrollbar. Tighter
   padding/font plus a capped+ellipsized width on those columns keeps the
   whole grid inside the viewport; the full value is still in the title
   tooltip and the mailto:/tel: link itself. */
.leads-table th, .leads-table td { padding: 7px 6px; font-size: 13px; }
.leads-table td.truncate {
    max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.leads-table td.truncate-sm { max-width: 100px; }
.leads-table td.truncate-wide { max-width: 170px; }
.leads-table .badge { font-size: 11px; padding: 2px 8px; }

.btn {
    display: inline-block; background: var(--accent); color: #fff; padding: 9px 18px; border-radius: 8px;
    font-weight: 600; font-size: 14px; border: none; cursor: pointer; text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.btn:active { transform: translateY(0); }
.btn.small { padding: 5px 12px; font-size: 13px; }
.btn.secondary { background: #fff; color: var(--ink); border: 1px solid var(--line); }
.btn.danger { background: var(--danger); }

.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap: 16px; }
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 13px; color: var(--ink-soft); margin-bottom: 6px; }
.field input, .field select, .field textarea {
    width: 100%; padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; font-family: var(--font);
}
.field textarea { resize: vertical; min-height: 70px; }

.availability-window {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    font-size: 13px; color: var(--ink-soft); margin-bottom: 7px;
}
.availability-edit { position: relative; }
.availability-edit > summary { list-style: none; }
.availability-edit > summary::-webkit-details-marker { display: none; }
.availability-edit-form {
    display: flex; gap: 8px; align-items: end; flex-wrap: wrap;
    width: min(720px, calc(100vw - 80px)); margin-top: 8px; padding: 12px;
    background: var(--bg-soft); border: 1px solid var(--line); border-radius: 8px;
}
.availability-edit-form label { display: grid; gap: 4px; font-size: 12px; color: var(--ink-soft); }
.availability-edit-form input { padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; font: inherit; }

.badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.badge.active { background: var(--basic-green-bg); color: var(--basic-green-text); }
.badge.inactive { background: var(--basic-red-bg); color: var(--basic-red-text); }
.badge.role-admin { background: var(--basic-orange-bg); color: var(--basic-orange-text); }
.badge.role-staff { background: var(--basic-blue-bg); color: var(--basic-blue-text); }
.badge.role-owner { background: var(--basic-purple-bg); color: var(--basic-purple-text); }
.badge.role-prospect { background: var(--basic-teal-bg); color: var(--basic-teal-text); }
.badge.type-renter_search { background: var(--basic-blue-bg); color: var(--basic-blue-text); }
.badge.type-list_property { background: var(--basic-orange-bg); color: var(--basic-orange-text); }
.badge.type-contact_message { background: var(--basic-green-bg); color: var(--basic-green-text); }
.badge.type-quote_request { background: var(--basic-yellow-bg); color: var(--basic-yellow-text); }
.badge.type-roney_owner { background: var(--basic-purple-bg); color: var(--basic-purple-text); }
.badge.type-availability_alert { background: var(--basic-teal-bg); color: var(--basic-teal-text); }
.badge.type-mls_inquiry { background: var(--basic-red-bg); color: var(--basic-red-text); }
.badge.type-tour_request { background: var(--basic-pink-bg); color: var(--basic-pink-text); }
.badge.type-peak { background: var(--basic-red-bg); color: var(--basic-red-text); }
.badge.type-holiday { background: var(--basic-purple-bg); color: var(--basic-purple-text); }
.badge.type-spring { background: var(--basic-green-bg); color: var(--basic-green-text); }
.badge.type-low { background: var(--basic-blue-bg); color: var(--basic-blue-text); }

.alert { padding: 12px 16px; border-radius: 8px; margin-bottom: 20px; font-size: 14px; }
.alert.error { background: var(--basic-red-bg); color: var(--basic-red-text); border: 1px solid #f8b4b4; }
.alert.success { background: var(--basic-green-bg); color: var(--basic-green-text); border: 1px solid #a7e3bc; }

.login-wrap { max-width: 380px; margin: 100px auto; }
.login-wrap .card { padding: 32px; }
.login-wrap h1 { font-size: 22px; margin: 0 0 20px; text-align: center; }

.tabs { display: flex; gap: 4px; margin-bottom: 20px; border-bottom: 1px solid var(--line); }
.tabs a { padding: 10px 16px; font-size: 14px; color: var(--ink-soft); border-bottom: 2px solid transparent; }
.tabs a.active { color: var(--ink); border-color: var(--accent); font-weight: 600; }

/* Lead CRM: readable inbox, conversation timeline, and contact records. */
.admin-page-heading {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 16px; flex-wrap: wrap; margin-bottom: 22px;
}
.admin-page-heading .sub { margin-bottom: 0; }
.crm-stat-row { grid-template-columns: repeat(4, minmax(150px, 1fr)); }
.crm-stat-row .stat:nth-child(1) { border-left-color: var(--basic-blue); }
.crm-stat-row .stat:nth-child(2) { border-left-color: var(--basic-orange); }
.crm-stat-row .stat:nth-child(3) { border-left-color: var(--basic-green); }
.crm-stat-row .stat:nth-child(4) { border-left-color: var(--basic-red); }
.lead-term-priority-bar {
    display: flex; gap: 7px; overflow-x: auto; margin: -8px 0 20px; padding: 2px 0 8px;
}
.lead-term-priority-bar a {
    display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
    padding: 8px 10px; border: 1px solid var(--line); border-radius: 999px;
    background: #fff; color: var(--ink); text-decoration: none; font-size: 12px;
}
.lead-term-priority-bar a:hover, .lead-term-priority-bar a.active {
    border-color: var(--basic-blue); background: var(--basic-blue-bg);
}
.lead-term-priority-bar a.disqualified { color: var(--basic-red-text); }
.lead-term-priority-bar a.disqualified.active { border-color: var(--basic-red); background: var(--basic-red-bg); }
.lead-type-tabs { overflow-x: auto; padding-bottom: 1px; }
.lead-type-tabs a { white-space: nowrap; }
.crm-filter-card { padding: 18px 20px; }
.crm-filter-form {
    display: flex; gap: 12px; align-items: end; flex-wrap: wrap;
}
.crm-filter-form .field { margin: 0; min-width: 150px; }
.crm-filter-form .crm-filter-search { flex: 1 1 320px; }
.lead-bulk-bar {
    display: flex; justify-content: flex-end; margin: -6px 0 12px;
}
.lead-bulk-bar form { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.lead-bulk-bar button:disabled { opacity: .5; cursor: not-allowed; }
.lead-bulk-delete { color: var(--basic-red-text); }
.lead-select-all-label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 650; }
.lead-select-all-label input { width: 18px; height: 18px; accent-color: var(--basic-blue); }
#lead-selected-count { min-width: 72px; color: var(--ink-soft); font-size: 13px; font-weight: 600; }
.lead-inbox-table { table-layout: fixed; }
.lead-inbox-table .lead-select-col { width: 46px; }
.lead-inbox-table th:nth-child(2) { width: 20%; }
.lead-inbox-table th:nth-child(3) { width: 19%; }
.lead-inbox-table th:nth-child(4) { width: 32%; }
.lead-inbox-table th:nth-child(5) { width: 17%; }
.lead-inbox-table th:nth-child(6) { width: 12%; }
.lead-inbox-table td { vertical-align: top; padding: 16px 14px; overflow-wrap: anywhere; }
.lead-select-cell { text-align: center; }
.lead-select-cell input, .lead-select-col input { width: 18px; height: 18px; accent-color: var(--basic-blue); }
.lead-inbox-row { border-left: 4px solid var(--basic-blue); }
.lead-inbox-row.status-contacted { border-left-color: var(--basic-orange); }
.lead-inbox-row.status-closed { border-left-color: var(--basic-red); opacity: .72; }
.lead-inbox-row.status-closed:hover { opacity: 1; }
.lead-inbox-row.term-disqualified { box-shadow: inset 5px 0 0 var(--basic-red); background: var(--basic-red-bg); }
.lead-inbox-name { display: inline-block; font-size: 16px; font-weight: 700; margin-bottom: 6px; }
.lead-inbox-meta, .crm-muted {
    display: flex; flex-direction: column; gap: 3px; color: var(--ink-soft); font-size: 12px;
}
.lead-inbox-row .badge { margin-top: 8px; }
.lead-request-summary { line-height: 1.48; }
.lead-term-badge {
    display: inline-flex; flex-direction: column; gap: 2px; margin: 0 0 10px;
    padding: 7px 9px; border: 1px solid var(--basic-blue); border-radius: 7px;
    background: var(--basic-blue-bg); color: var(--basic-blue-text); font-size: 12px;
}
.lead-term-badge strong { font-size: 12px; }
.lead-term-badge span { color: var(--ink-soft); font-weight: 500; }
.lead-term-badge.term-six_months,
.lead-term-badge.term-two_months { border-color: var(--basic-green); background: var(--basic-green-bg); color: var(--basic-green-text); }
.lead-term-badge.term-four_months,
.lead-term-badge.term-three_months { border-color: var(--basic-orange); background: var(--basic-orange-bg); color: var(--basic-orange-text); }
.lead-term-badge.term-thirty_days { border-color: var(--basic-yellow); background: var(--basic-yellow-bg); color: var(--ink); }
.lead-term-badge.term-dates_needed { border-color: var(--basic-orange); background: var(--basic-orange-bg); color: var(--basic-orange-text); }
.lead-term-badge.term-under_30 { border-color: var(--basic-red); background: var(--basic-red-bg); color: var(--basic-red-text); }
.lead-summary-note {
    margin-top: 10px; padding: 9px 10px; border-left: 3px solid var(--basic-yellow);
    background: var(--basic-yellow-bg); color: var(--ink); line-height: 1.4;
}
.lead-full-message { margin-top: 10px; border: 1px solid var(--line); border-radius: 7px; background: #fff; }
.lead-full-message summary { padding: 9px 10px; cursor: pointer; color: var(--basic-blue-text); font-weight: 650; }
.lead-full-message > div {
    padding: 10px 12px 14px; border-top: 1px solid var(--line); line-height: 1.55;
    white-space: normal; overflow-wrap: anywhere; word-break: break-word;
}
.lead-read-more { display: inline-block; margin-top: 10px; font-weight: 600; }
.lead-status-form select { width: 100%; min-width: 120px; padding: 8px 9px; border: 1px solid var(--line); border-radius: 7px; }
.lead-answer-form { margin-top: 9px; }
.lead-answered { color: var(--basic-green-text); font-weight: 700; }
.lead-actions-cell { white-space: normal; }
.lead-actions-cell form { margin-top: 8px; }
.lead-delete-button { color: var(--basic-red-text); }
.crm-th-secondary { text-transform: none; letter-spacing: 0; font-weight: 400; }
.crm-empty { color: var(--ink-soft); padding: 24px !important; }

.lead-detail-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: 20px; align-items: start; }
.lead-conversation-card { min-width: 0; }
.lead-contact-card { position: sticky; top: 82px; }
.lead-activity-form { display: grid; grid-template-columns: minmax(140px, .35fr) minmax(260px, 1fr) auto; gap: 12px; align-items: end; }
.lead-activity-form .field { margin-bottom: 0; }
.lead-activity-form .btn { margin-bottom: 0; }
.lead-timeline { list-style: none; padding: 0; margin: 26px 0 0; }
.lead-timeline li { position: relative; display: grid; grid-template-columns: 18px 1fr; gap: 10px; padding-bottom: 20px; }
.lead-timeline li:not(:last-child)::before {
    content: ''; position: absolute; left: 6px; top: 14px; bottom: 0; width: 2px; background: var(--line);
}
.lead-timeline-marker { width: 14px; height: 14px; border-radius: 50%; background: var(--basic-blue); border: 3px solid var(--basic-blue-bg); }
.lead-timeline-content { min-width: 0; }
.lead-timeline-meta { display: flex; gap: 9px; align-items: baseline; flex-wrap: wrap; font-size: 12px; color: var(--ink-soft); }
.lead-timeline-meta strong { color: var(--ink); font-size: 13px; }
.lead-timeline-body { margin-top: 5px; line-height: 1.5; overflow-wrap: anywhere; }
.lead-timeline-empty { display: block !important; padding: 14px !important; background: var(--bg-soft); border-radius: 8px; color: var(--ink-soft); }
.lead-original-message {
    padding: 14px 16px; border: 1px solid var(--line); border-left: 4px solid var(--basic-blue);
    border-radius: 8px; background: #fff; line-height: 1.6; white-space: normal; overflow-wrap: anywhere;
}

.crm-contact-table { table-layout: fixed; }
.crm-contact-table th:nth-child(1) { width: 24%; }
.crm-contact-table th:nth-child(2) { width: 16%; }
.crm-contact-table th:nth-child(3) { width: 32%; }
.crm-contact-table th:nth-child(4) { width: 16%; }
.crm-contact-table th:nth-child(5) { width: 12%; }
.crm-contact-table td { vertical-align: top; overflow-wrap: anywhere; }
.crm-description-cell { line-height: 1.45; }
.crm-contact-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.crm-linked-leads { display: grid; gap: 10px; }
.crm-linked-lead {
    display: flex; flex-direction: column; gap: 4px; padding: 12px;
    border: 1px solid var(--line); border-radius: 8px; text-decoration: none;
}
.crm-linked-lead:hover { border-color: var(--basic-blue); background: var(--basic-blue-bg); }

@media (max-width: 900px) {
    .crm-stat-row { grid-template-columns: repeat(2, minmax(140px, 1fr)); }
    .lead-detail-grid { grid-template-columns: 1fr; }
    .lead-contact-card { position: static; }
    .lead-activity-form { grid-template-columns: 1fr; }
    .lead-activity-form .btn { justify-self: start; }
}

@media (max-width: 720px) {
    .lead-inbox-card .table-scroll { overflow: visible; }
    .lead-inbox-table, .lead-inbox-table tbody, .lead-inbox-table tr, .lead-inbox-table td { display: block; width: 100%; }
    .lead-inbox-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
    .lead-inbox-table tr { margin: 0 0 14px; border: 1px solid var(--line); border-left-width: 5px; border-radius: 9px; background: #fff; }
    .lead-inbox-table td { border-bottom: 1px solid var(--line); padding: 12px 14px 12px 112px; position: relative; min-height: 44px; }
    .lead-inbox-table td:last-child { border-bottom: 0; }
    .lead-inbox-table td::before { content: attr(data-label); position: absolute; left: 14px; top: 12px; width: 86px; font-size: 11px; font-weight: 700; color: var(--ink-soft); text-transform: uppercase; }
    .lead-inbox-table .lead-select-cell { padding: 10px 14px; min-height: 0; text-align: left; }
    .lead-inbox-table .lead-select-cell::before { display: none; }
    .crm-contact-table { min-width: 760px; }
}

/* Wide sortable/filterable data grid (admin listings) */
.table-scroll { overflow-x: auto; }
.admin-grid { white-space: nowrap; }
.admin-grid th { white-space: nowrap; }
.admin-grid th a { text-decoration: none; }
.admin-grid th a:hover { text-decoration: underline; }
.filter-row td { padding: 6px 8px; background: #fafaf8; }
.filter-row input, .filter-row select {
    width: 100%; min-width: 64px; max-width: 110px; padding: 5px 6px; font-size: 12px;
    border: 1px solid var(--line); border-radius: 6px; font-family: var(--font);
}

/* Pin the unit number and the Edit/Delete actions so they stay in view across
   a table wide enough to need horizontal scroll (data-rent.xlsx has ~25 columns). */
.admin-grid .col-pin-left, .admin-grid .col-pin-right { position: sticky; z-index: 1; background: #fff; }
.admin-grid .col-pin-left { left: 0; box-shadow: 2px 0 4px rgba(0,0,0,.06); }
.admin-grid .col-pin-right { right: 0; box-shadow: -2px 0 4px rgba(0,0,0,.06); }
.admin-grid .filter-row .col-pin-left, .admin-grid .filter-row .col-pin-right { background: #fafaf8; }
.admin-grid tbody tr:hover .col-pin-left, .admin-grid tbody tr:hover .col-pin-right { background: #f7f6f3; }

/* Inactive/unavailable listings sort to the bottom (see the ORDER BY in listings.php)
   and are greyed out here so they stay visible for reactivating or deleting later,
   without competing for attention with the day-to-day active ones. */
.admin-grid tbody tr.row-inactive { opacity: .5; }
.admin-grid tbody tr.row-inactive:hover { opacity: .85; }

/* Password resets stay inside the page so the value is masked and browser
   password managers can handle it. The panel expands in the table cell to
   avoid being clipped by the table's horizontal scroll container. */
.password-reset { display: inline-block; vertical-align: top; }
.password-reset > summary { list-style: none; cursor: pointer; }
.password-reset > summary::-webkit-details-marker { display: none; }
.password-reset-form {
    display: grid; gap: 8px; min-width: 220px; margin-top: 8px; padding: 10px;
    border: 1px solid var(--line); border-radius: 8px; background: #fff;
    box-shadow: 0 4px 14px rgba(0,0,0,.1); white-space: normal;
}
.password-reset-form label { font-size: 12px; font-weight: 600; color: var(--ink); }
.password-reset-form input { width: 100%; }

/* Full-width section-header rows inside any admin table (listings.php's
   inactive divider, customers_health.php's junk-rule groups) — deliberately
   unscoped so .admin-grid and .leads-table tables style identically. */
.group-divider td {
    background: var(--bg-soft); color: var(--ink-soft); font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .04em; padding: 8px 12px; border-top: 2px solid var(--line);
}

/* Photo gallery */
.photo-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 14px; margin: 16px 0 24px;
}
.photo-card {
    border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #fff;
    cursor: grab;
}
.photo-card.dragging { opacity: 0.4; }
.photo-card-bar {
    background: #e7e5e0; color: #444; font-size: 12px; font-weight: 600;
    padding: 6px 8px; display: flex; align-items: center; justify-content: space-between;
}
.photo-delete {
    background: none; border: none; color: #a33; font-size: 16px; line-height: 1; cursor: pointer;
    padding: 0 2px;
}
.photo-thumb { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; cursor: zoom-in; }

.lightbox-overlay {
    display: none; position: fixed; inset: 0; background: rgba(10,10,10,.9);
    z-index: 100; align-items: center; justify-content: center; flex-direction: column; gap: 12px;
}
.lightbox-overlay.open { display: flex; }
.lightbox-overlay img { max-width: 90vw; max-height: 82vh; border-radius: 6px; }
.lightbox-overlay .lightbox-meta { color: #ddd; font-size: 13px; }
.lightbox-close {
    position: absolute; top: 20px; right: 28px; background: none; border: none;
    color: #fff; font-size: 32px; line-height: 1; cursor: pointer;
}

/* Occupancy heatmap — status colors (fixed, not themed): good=available, critical=occupied */
table.heatmap { border-collapse: collapse; }
table.heatmap th, table.heatmap td { border: none; padding: 0; }
table.heatmap th {
    font-size: 10px; color: var(--ink-soft); text-align: center; font-weight: 600;
    padding-bottom: 6px; font-variant-numeric: tabular-nums;
}
.heatmap-unit-h { text-align: left !important; }
.heatmap-unit { font-size: 12px; font-weight: 600; padding-right: 12px !important; white-space: nowrap; vertical-align: middle; }
.heatmap-cell {
    width: 22px; height: 22px; border-radius: 5px; border: 2px solid var(--bg);
    background-clip: padding-box; cursor: default;
}
.heatmap-cell.available { background-color: var(--basic-green); }
.heatmap-cell.occupied { background-color: var(--basic-red); }
.heatmap-swatch {
    display: inline-block; width: 12px; height: 12px; border-radius: 3px;
    margin-right: 5px; vertical-align: middle;
}
.heatmap-swatch.available { background: var(--basic-green); }
.heatmap-swatch.occupied { background: var(--basic-red); }