/* app.css
   Merged stylesheet for the Oliver Stern tenancy static site.
   Source files merged verbatim (byte-for-byte, only whitespace/indent normalized):
     - available-stules.html   (Available Properties page)
     - properties-styles.html  (Property Certificates page)
     - tenant-styles.html      (Tenants page)
   Rules identical (same selector + same body) across files were kept once, below,
   under SHARED. Rules whose selector collides across files but whose body differs
   were kept once per page under that page's section, each flagged with a comment.
*/

/* ============================================================
   SHARED — identical across two or more of the source files
   ============================================================ */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    color: var(--color-text);
    background-color: var(--color-gray-light);
    line-height: 1.6;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.header {
    background-color: var(--color-primary);
    color: var(--color-white);
    padding: 1rem 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: var(--shadow);
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.logo {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-white);
    z-index: 1001;
}

.hamburger {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 21px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1001;
}

.hamburger-line {
    width: 100%;
    height: 3px;
    background-color: var(--color-white);
    border-radius: 3px;
    transition: var(--transition);
}

.nav {
    display: flex;
    gap: 1.5rem;
    transition: var(--transition);
}

.nav-link {
    color: var(--color-white);
    text-decoration: none;
    padding: 0.5rem 1rem;
    border-radius: var(--border-radius);
    transition: var(--transition);
    opacity: 0.8;
    white-space: nowrap;
}

.nav-link:hover,
.nav-link.active {
    opacity: 1;
    background-color: rgba(255, 255, 255, 0.1);
}

.nav-link.active {
    background-color: var(--color-secondary);
}

@media (max-width: 768px) {
    .hamburger {
        display: flex;
    }

    .nav {
        position: fixed;
        top: 0;
        right: -100%;
        width: 70%;
        max-width: 300px;
        height: 100vh;
        background-color: var(--color-primary);
        flex-direction: column;
        padding: 5rem 2rem 2rem;
        box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
        z-index: 1000;
        gap: 0.5rem;
    }

    .nav.active {
        right: 0;
    }

    .nav-link {
        padding: 1rem;
        border-radius: var(--border-radius);
        background-color: rgba(255, 255, 255, 0.05);
    }

    .hamburger.active .hamburger-line:nth-child(1) {
        transform: translateY(9px) rotate(45deg);
    }

    .hamburger.active .hamburger-line:nth-child(2) {
        opacity: 0;
    }

    .hamburger.active .hamburger-line:nth-child(3) {
        transform: translateY(-9px) rotate(-45deg);
    }

    .nav.active::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: -1;
    }
}

.page-header h2 {
    font-size: 1.75rem;
    color: var(--color-primary);
}

.page-header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 12px;
}

.controls {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.search-box {
    position: relative;
    display: flex;
    align-items: center;
}

.search-input {
    padding: 0.75rem 1rem;
    padding-right: 2.5rem;
    border: 2px solid var(--color-gray);
    border-radius: var(--border-radius);
    font-size: 1rem;
    width: 300px;
    transition: var(--transition);
}

.search-input:focus {
    outline: none;
    border-color: var(--color-secondary);
    box-shadow: 0 0 0 3px rgba(43, 173, 23, 0.1);
}

#clearSearch {
    position: absolute;
    right: 0.75rem;
    background: none;
    border: none;
    font-size: 1.25rem;
    cursor: pointer;
    color: var(--color-gray-dark);
    padding: 0.25rem;
    line-height: 1;
}

#clearSearch:hover {
    color: var(--color-primary);
}

.chip.active {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}

.chip.rent-increase {
    background: var(--color-warning);
    color: white;
    border-color: var(--color-warning);
}

.status-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding: 0.75rem 1rem;
    background-color: var(--color-white);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    font-size: 0.9rem;
}

.last-updated {
    color: var(--color-gray-dark);
    font-size: 0.85rem;
}

.btn-primary {
    background-color: var(--color-secondary);
    color: var(--color-white);
}

.btn-primary:hover {
    background-color: #239a14;
    transform: translateY(-1px);
    box-shadow: var(--shadow);
}

.btn-secondary {
    background-color: var(--color-white);
    color: var(--color-primary);
    border-color: var(--color-gray);
}

.btn-secondary:hover {
    background-color: var(--color-gray-light);
}

.btn-small {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
}

.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-copy {
    background: #6c757d;
    color: white;
    padding: 0.5rem 1rem;
    border-radius: var(--border-radius);
    border: none;
    cursor: pointer;
    font-size: 0.9rem;
    transition: var(--transition);
}

.btn-copy:hover {
    background: #5a6268;
}

.btn-compose {
    background: var(--color-secondary);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: var(--border-radius);
    border: none;
    cursor: pointer;
    font-size: 0.9rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: var(--transition);
}

.btn-compose:hover {
    background: #249913;
}

.btn-group {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid var(--color-gray);
    border-top-color: var(--color-secondary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 1rem;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.empty-state-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.empty-state h3 {
    color: var(--color-primary);
    margin-bottom: 0.5rem;
}

.empty-state p {
    color: var(--color-gray-dark);
}

.toast {
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 1rem 1.5rem;
    background-color: var(--color-primary);
    color: var(--color-white);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    transform: translateY(100px);
    opacity: 0;
    transition: var(--transition);
    z-index: 2000;
    max-width: 350px;
}

.toast.show {
    transform: translateY(0);
    opacity: 1;
}

.toast.error {
    background-color: var(--color-error);
}

.tenant-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 3rem;
}

.property-group {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow);
    border: 1px solid var(--color-gray);
}

.property-group-header {
    padding: 16px 20px;
    background: var(--color-primary);
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.2s;
}

.property-group-header:hover {
    background: #243345;
}

.property-group-header-left {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.property-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-white);
    letter-spacing: 0.01em;
}

.property-meta {
    display: flex;
    gap: 16px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.75);
    flex-wrap: wrap;
}

.property-meta-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

.property-meta-item.warning {
    color: #FFB347;
}

.chevron {
    font-size: 20px;
    color: var(--color-secondary);
    transition: transform 0.3s ease;
    flex-shrink: 0;
    margin-left: 12px;
}

.property-group-header.open .chevron {
    transform: rotate(180deg);
}

.tenants-container {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease-out;
}

.tenants-container.open {
    max-height: 10000px;
}

.tenant-item {
    padding: 14px 20px;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    transition: background-color 0.2s;
}

.tenant-item:last-child {
    border-bottom: none;
}

.tenant-item:hover {
    background-color: var(--color-gray-light);
}

.tenant-info {
    flex: 1;
    min-width: 0;
}

.tenant-name {
    font-weight: 600;
    font-size: 15px;
    color: var(--color-primary);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tenant-room {
    font-size: 13px;
    color: var(--color-gray-dark);
}

.tenant-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
}

.action-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-gray-light);
    border: 1px solid var(--color-gray);
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    color: var(--color-primary);
    font-size: 16px;
}

.action-btn:hover {
    background: var(--color-secondary);
    color: white;
    border-color: var(--color-secondary);
}

.action-btn.call:hover {
    background: #4CAF50;
    border-color: #4CAF50;
}

.action-btn.whatsapp:hover {
    background: #25D366;
    border-color: #25D366;
}

.action-btn.email:hover {
    background: #EA4335;
    border-color: #EA4335;
}

.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1500;
    overflow-y: auto;
}

.modal-content {
    position: relative;
    background: white;
    margin: 30px auto;
    width: 90%;
    max-width: 760px;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
    animation: modalSlideIn 0.25s ease-out;
}

@keyframes modalSlideIn {
    from { opacity: 0; transform: translateY(-16px); }
    to   { opacity: 1; transform: translateY(0); }
}

.modal-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--color-gray);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    background: var(--color-primary);
    border-radius: 12px 12px 0 0;
}

.modal-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-white);
}

.modal-subtitle {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 3px;
}

.modal-close {
    background: rgba(255, 255, 255, 0.15);
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: var(--color-white);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s;
    flex-shrink: 0;
    margin-left: 12px;
}

.modal-close:hover {
    background: rgba(255, 255, 255, 0.3);
}

.modal-body {
    padding: 24px;
    max-height: 72vh;
    overflow-y: auto;
}

.modal-section {
    margin-bottom: 24px;
}

.modal-section-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--color-gray-dark);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--color-secondary);
}

.info-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.info-label {
    font-size: 11px;
    color: var(--color-gray-dark);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.info-value {
    font-size: 15px;
    font-weight: 500;
    color: var(--color-primary);
}

.email-group {
    background: var(--color-gray-light);
    padding: 12px 16px;
    border-radius: var(--border-radius);
    margin-bottom: 12px;
}

.email-display {
    font-family: monospace;
    font-size: 13px;
    color: var(--color-primary);
    word-break: break-all;
    margin-bottom: 10px;
}

.tenant-detail-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;
}

.tenant-detail-row:last-child {
    border-bottom: none;
}

.tenant-detail-info {
    flex: 1;
}

.tenant-detail-name {
    font-weight: 600;
    color: var(--color-primary);
    font-size: 15px;
}

.tenant-detail-contact {
    font-size: 13px;
    color: var(--color-gray-dark);
    margin-top: 2px;
}

.form-buttons {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
    margin-top: 8px;
}

.form-btn {
    padding: 12px 16px;
    background: var(--color-primary);
    color: white;
    border: none;
    border-radius: var(--border-radius);
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.2s;
    text-align: center;
    text-decoration: none;
    display: block;
}

.form-btn:hover {
    background: var(--color-secondary);
}

.form-btn.disabled {
    background: #adb5bd;
    cursor: not-allowed;
    opacity: 0.7;
}

.emergency-contact {
    background: #fff3cd;
    border: 1px solid #ffeaa7;
    border-radius: var(--border-radius);
    padding: 16px;
    margin-top: 4px;
}

.emergency-contact h4 {
    color: #856404;
    margin-bottom: 8px;
    font-size: 14px;
}

.emergency-contact p {
    color: #856404;
    font-size: 14px;
    line-height: 1.5;
}

@media (max-width: 768px) {
    .modal-content {
        width: 95%;
        margin: 10px auto;
    }

    .modal-body {
        max-height: 80vh;
    }

    .info-grid {
        grid-template-columns: 1fr 1fr;
    }

    .form-buttons {
        grid-template-columns: 1fr;
    }

    .property-group-header {
        flex-wrap: wrap;
        gap: 8px;
    }

    .property-meta {
        gap: 10px;
    }

    .tenant-item {
        flex-wrap: wrap;
    }
}

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

    .tenant-actions {
        gap: 6px;
    }

    .action-btn {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }
}

.filter-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }

.chip:hover { background: var(--color-gray-light); border-color: var(--color-gray-dark); }

/* ============================================================
   AVAILABLE PROPERTIES (AVAILABLE-STULES.HTML) — page-specific rules
   (rules here are either unique to this page, or share a selector
   with another page's stylesheet but have a different body — kept
   separately below so no page's appearance changes)
   ============================================================ */

/* NOTE: ":root" is also defined differently for: Property Certificates, Tenants — see that page's section */
:root {
    --color-primary: #18222E;
    --color-secondary: #2BAD17;
    --color-white: #FFFFFF;
    --color-warning: #FF6B35;
    --color-spareroom: #FF6B6B;
    --color-otm: #4A6FA5;
    --color-gray-light: #F5F7FA;
    --color-gray: #E4E7EB;
    --color-gray-dark: #7B8794;
    --color-text: #323F4B;
    --color-error: #DC2626;
    --shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    --shadow-heavy: 0 8px 24px rgba(0, 0, 0, 0.15);
    --border-radius: 8px;
    --transition: all 0.3s ease;
}

/* NOTE: ".page-header" is also defined differently for: Property Certificates, Tenants — see that page's section */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 2rem 0 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

/* NOTE: "@media (max-width: 768px)" is also defined differently for: Property Certificates, Tenants — see that page's section */
@media (max-width: 768px) {
    .search-input {
        width: 100%;
    }

    .page-header {
        flex-direction: column;
        align-items: stretch;
    }

    .controls {
        flex-direction: column;
        width: 100%;
    }
}

/* NOTE: ".filter-chips" is also defined differently for: Property Certificates, Tenants — see that page's section */
.filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}

/* NOTE: ".chip" is also defined differently for: Property Certificates, Tenants — see that page's section */
.chip {
    background: #f0f0f0;
    border: 1px solid #ddd;
    border-radius: 20px;
    padding: 5px 14px;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
    color: #333;
    white-space: nowrap;
}

/* NOTE: ".chip:hover" is also defined differently for: Property Certificates, Tenants — see that page's section */
.chip:hover {
    background: #e0e0e0;
}

/* NOTE: ".chip.rent-increase.active" is also defined differently for: Tenants — see that page's section */
.chip.rent-increase.active {
    background: #e55a2b;
    box-shadow: 0 0 0 2px rgba(255, 107, 53, 0.3);
}

.btn-primary,
.btn-secondary,
.btn-outline,
.btn-small {
    padding: 0.75rem 1.5rem;
    border-radius: var(--border-radius);
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
    border: 2px solid transparent;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    text-align: center;
    justify-content: center;
}

.btn-outline {
    background-color: transparent;
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.btn-outline:hover {
    background-color: var(--color-primary);
    color: var(--color-white);
}

.btn-icon-only {
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-gray-light);
    color: var(--color-primary);
    border: none;
    cursor: pointer;
    transition: var(--transition);
    font-weight: bold;
    font-size: 1.1rem;
}

.btn-icon-only:hover {
    background-color: var(--color-secondary);
    color: var(--color-white);
    transform: translateY(-1px);
}

.btn-spareroom {
    background-color: var(--color-spareroom);
    color: var(--color-white);
    border: none;
}

.btn-spareroom:hover {
    background-color: #e05555;
}

.btn-otm {
    background-color: var(--color-otm);
    color: var(--color-white);
    border: none;
}

.btn-otm:hover {
    background-color: #3a5a8c;
}

/* NOTE: ".loading-spinner" is also defined differently for: Property Certificates, Tenants — see that page's section */
.loading-spinner {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: #666;
    text-align: center;
}

/* NOTE: ".empty-state" is also defined differently for: Property Certificates, Tenants — see that page's section */
.empty-state {
    grid-column: 1 / -1;
    text-align: center;
    padding: 4rem 2rem;
    background-color: var(--color-white);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
}

.properties-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 1.5rem;
    margin-bottom: 3rem;
}

/* NOTE: "@media (max-width: 768px)" is also defined differently for: Property Certificates, Tenants — see that page's section */
@media (max-width: 768px) {
    .properties-grid {
        grid-template-columns: 1fr;
    }
}

/* NOTE: "@media (max-width: 480px)" is also defined differently for: Tenants — see that page's section */
@media (max-width: 480px) {
    .header-content {
        flex-direction: row;
    }
}

/* NOTE: ".property-card" is also defined differently for: Property Certificates — see that page's section */
.property-card {
    background-color: var(--color-white);
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: var(--transition);
    display: flex;
    flex-direction: column;
    position: relative;
}

/* NOTE: ".property-card:hover" is also defined differently for: Property Certificates — see that page's section */
.property-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-heavy);
}

.property-image-container {
    position: relative;
    height: 200px;
    width: 100%;
    overflow: hidden;
}

.property-image {
    height: 100%;
    width: 100%;
    object-fit: cover;
    background-color: var(--color-gray);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-gray-dark);
    font-size: 3rem;
}

.image-overlay {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    display: flex;
    justify-content: space-between;
    z-index: 2;
}

.overlay-left,
.overlay-right {
    display: flex;
    gap: 5px;
}

.overlay-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.9);
    color: var(--color-primary);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: var(--transition);
    cursor: pointer;
}

.overlay-icon:hover {
    transform: scale(1.1);
    background-color: var(--color-white);
}

.video-icon {
    background-color: rgba(43, 173, 23, 0.9);
    color: var(--color-white);
}

.occupied-icon {
    background-color: var(--color-warning);
    color: var(--color-white);
    font-weight: bold;
}

.occupied-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: var(--color-warning);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

.spareroom-icon {
    background-color: var(--color-spareroom);
    color: var(--color-white);
    font-size: 0.8rem;
    font-weight: bold;
}

.otm-icon {
    background-color: var(--color-otm);
    color: var(--color-white);
    font-size: 0.8rem;
    font-weight: bold;
}

.property-content {
    padding: 1.5rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.property-card .property-header {
    margin-bottom: 1rem;
}

.property-room {
    font-size: 0.9rem;
    color: var(--color-secondary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.25rem;
}

.property-address {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: 0.5rem;
    line-height: 1.3;
    cursor: pointer;
    transition: var(--transition);
}

.property-address:hover {
    color: var(--color-secondary);
    text-decoration: underline;
}

.property-financial {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding: 0.75rem;
    background-color: var(--color-gray-light);
    border-radius: var(--border-radius);
}

.financial-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.financial-label {
    font-size: 0.75rem;
    color: var(--color-gray-dark);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.25rem;
}

.financial-value {
    font-weight: 600;
    color: var(--color-primary);
    font-size: 0.9rem;
}

.property-details {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 1rem;
    font-size: 0.95rem;
}

.property-detail {
    display: flex;
    flex-direction: column;
}

.detail-label {
    font-size: 0.8rem;
    color: var(--color-gray-dark);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.25rem;
}

.detail-value {
    font-weight: 600;
    color: var(--color-primary);
}

.property-info {
    margin-bottom: 1.5rem;
    font-size: 0.95rem;
    color: var(--color-text);
    line-height: 1.5;
}

.property-actions {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.75rem;
    margin-top: auto;
}

.share-buttons {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.share-buttons .btn-small {
    flex: 1;
    min-width: 80px;
}

.section-header {
    width: 100%;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #888;
    padding: 18px 0 6px;
    border-bottom: 1px solid #e5e5e5;
    margin-bottom: 4px;
    grid-column: 1 / -1;
}

.section-header.under-offer {
    color: var(--color-otm);
    border-color: var(--color-otm);
}

.section-header.on-hold {
    color: var(--color-warning);
    border-color: var(--color-warning);
}

.occupant-tel {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dashed currentColor;
}

.occupant-tel:hover {
    border-bottom-style: solid;
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

.phone-link {
    color: var(--color-primary);
    text-decoration: none;
}

.phone-link:hover {
    text-decoration: underline;
}


/* ============================================================
   PROPERTY CERTIFICATES (PROPERTIES-STYLES.HTML) — page-specific rules
   (rules here are either unique to this page, or share a selector
   with another page's stylesheet but have a different body — kept
   separately below so no page's appearance changes)
   ============================================================ */

/* NOTE: ":root" is also defined differently for: Available Properties, Tenants — see that page's section */
:root {
    --color-primary: #18222E;
    --color-secondary: #2BAD17;
    --color-white: #FFFFFF;
    --color-warning: #FF6B35;
    --color-yellow: #F59E0B;
    --color-gray-light: #F5F7FA;
    --color-gray: #E4E7EB;
    --color-gray-dark: #7B8794;
    --color-text: #323F4B;
    --color-error: #DC2626;
    --shadow: 0 2px 8px rgba(0,0,0,0.1);
    --shadow-heavy: 0 8px 24px rgba(0,0,0,0.15);
    --radius: 8px;
    --transition: all 0.25s ease;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* NOTE: "body" is also defined differently for: Available Properties, Tenants — see that page's section */
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--color-text);
    background: var(--color-gray-light);
    line-height: 1.6;
}

/* NOTE: ".header" is also defined differently for: Available Properties, Tenants — see that page's section */
.header {
    background: var(--color-primary);
    color: var(--color-white);
    padding: 1rem 0;
    position: sticky; top: 0; z-index: 1000;
    box-shadow: var(--shadow);
}

/* NOTE: ".header-content" is also defined differently for: Available Properties, Tenants — see that page's section */
.header-content { display: flex; justify-content: space-between; align-items: center; }

/* NOTE: ".logo" is also defined differently for: Available Properties, Tenants — see that page's section */
.logo { font-size: 1.5rem; font-weight: 600; color: var(--color-white); }

/* NOTE: ".hamburger" is also defined differently for: Available Properties, Tenants — see that page's section */
.hamburger {
    display: none;
    flex-direction: column; justify-content: space-between;
    width: 30px; height: 21px;
    background: none; border: none; cursor: pointer; z-index: 1001;
}

/* NOTE: ".hamburger-line" is also defined differently for: Available Properties, Tenants — see that page's section */
.hamburger-line { width: 100%; height: 3px; background: var(--color-white); border-radius: 3px; transition: var(--transition); }

/* NOTE: ".nav" is also defined differently for: Available Properties, Tenants — see that page's section */
.nav { display: flex; gap: 0.5rem; }

/* NOTE: ".nav-link" is also defined differently for: Available Properties, Tenants — see that page's section */
.nav-link {
    color: var(--color-white); text-decoration: none;
    padding: 0.5rem 1rem; border-radius: var(--radius);
    opacity: 0.8; transition: var(--transition); white-space: nowrap; font-size: 0.95rem;
}

.nav-link:hover { opacity: 1; background: rgba(255,255,255,0.1); }

/* NOTE: ".nav-link.active" is also defined differently for: Available Properties, Tenants — see that page's section */
.nav-link.active { opacity: 1; background: var(--color-secondary); }

/* NOTE: "@media (max-width: 768px)" is also defined differently for: Available Properties, Tenants — see that page's section */
@media (max-width: 768px) {
    .hamburger { display: flex; }
    .nav {
        position: fixed; top: 0; right: -100%;
        width: 70%; max-width: 300px; height: 100vh;
        background: var(--color-primary); flex-direction: column;
        padding: 5rem 2rem 2rem; box-shadow: -5px 0 15px rgba(0,0,0,0.15);
        z-index: 1000; gap: 0.5rem; transition: right 0.3s ease;
    }
    .nav.active { right: 0; }
    .nav-link { background: rgba(255,255,255,0.05); }
    .hamburger.active .hamburger-line:nth-child(1) { transform: translateY(9px) rotate(45deg); }
    .hamburger.active .hamburger-line:nth-child(2) { opacity: 0; }
    .hamburger.active .hamburger-line:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }
    .nav.active::before {
        content: ''; position: fixed; top: 0; left: 0;
        width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: -1;
    }
}

/* NOTE: ".page-header" is also defined differently for: Available Properties, Tenants — see that page's section */
.page-header { margin: 2rem 0 1.25rem; }

/* NOTE: ".page-header-top" is also defined differently for: Available Properties, Tenants — see that page's section */
.page-header-top {
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: 12px;
}

/* NOTE: ".controls" is also defined differently for: Available Properties, Tenants — see that page's section */
.controls { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; }

/* NOTE: ".search-input" is also defined differently for: Available Properties, Tenants — see that page's section */
.search-input {
    padding: 0.65rem 2.5rem 0.65rem 1rem;
    border: 2px solid var(--color-gray); border-radius: var(--radius);
    font-size: 0.95rem; width: 280px; transition: var(--transition); background: white;
}

/* NOTE: ".search-input:focus" is also defined differently for: Available Properties, Tenants — see that page's section */
.search-input:focus {
    outline: none; border-color: var(--color-secondary);
    box-shadow: 0 0 0 3px rgba(43,173,23,0.12);
}

.clear-search-btn {
    position: absolute; right: 0.6rem;
    background: none; border: none; font-size: 1.25rem;
    cursor: pointer; color: var(--color-gray-dark); padding: 0.2rem; line-height: 1;
    transition: color 0.2s;
}

.clear-search-btn:hover { color: var(--color-primary); }

@media (max-width: 600px) {
    .page-header-top { flex-direction: column; align-items: stretch; }
    .controls { flex-direction: column; }
    .search-input { width: 100%; }
}

.sub-filter-container {
    background: white; border-radius: var(--radius);
    padding: 14px 18px; margin-bottom: 12px;
    border: 1px solid var(--color-gray); box-shadow: var(--shadow);
}

/* NOTE: ".chip" is also defined differently for: Available Properties, Tenants — see that page's section */
.chip {
    display: inline-flex; align-items: center; gap: 8px;
    background: white; border: 2px solid var(--color-gray);
    border-radius: 24px;
    padding: 9px 18px;          /* ← bigger than before */
    font-size: 14px;            /* ← larger text */
    font-weight: 600;
    cursor: pointer; color: var(--color-text);
    transition: var(--transition); white-space: nowrap;
    line-height: 1.2;
}

/* NOTE: ".chip.active" is also defined differently for: Available Properties, Tenants — see that page's section */
.chip.active { background: var(--color-primary); color: white; border-color: var(--color-primary); }

.chip.active .chip-badge { background: rgba(255,255,255,0.25); color: white; }

.chip--clear { background: var(--color-gray-light); color: var(--color-gray-dark); border-color: var(--color-gray); font-size: 13px; }

.chip--clear:hover { background: var(--color-error); color: white; border-color: var(--color-error); }

.chip-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 22px; height: 22px; padding: 0 7px;
    border-radius: 11px; font-size: 12px; font-weight: 700;
    background: var(--color-gray); color: var(--color-text); line-height: 1;
}

.chip-badge--red    { background: #fee2e2; color: var(--color-error); }

.chip-badge--orange { background: #ffece3; color: var(--color-warning); }

.chip-badge--yellow { background: #fef3c7; color: #92400e; }

/* NOTE: ".status-bar" is also defined differently for: Available Properties, Tenants — see that page's section */
.status-bar {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 1.25rem; padding: 0.65rem 1rem;
    background: white; border-radius: var(--radius); box-shadow: var(--shadow); font-size: 0.9rem;
}

/* NOTE: ".last-updated" is also defined differently for: Available Properties, Tenants — see that page's section */
.last-updated { color: var(--color-gray-dark); font-size: 0.82rem; }

/* NOTE: ".btn-secondary" is also defined differently for: Available Properties, Tenants — see that page's section */
.btn-secondary {
    padding: 0.65rem 1.25rem; border-radius: var(--radius);
    font-size: 0.95rem; font-weight: 500; cursor: pointer;
    background: white; color: var(--color-primary); border: 1.5px solid var(--color-gray);
    display: inline-flex; align-items: center; gap: 6px; transition: var(--transition);
}

/* NOTE: ".btn-secondary:hover" is also defined differently for: Available Properties, Tenants — see that page's section */
.btn-secondary:hover { background: var(--color-gray-light); }

.btn-copy-message {
    background: var(--color-gray-light); border: 1px solid var(--color-gray);
    color: var(--color-primary); padding: 5px 11px; border-radius: var(--radius);
    cursor: pointer; font-size: 12px; transition: var(--transition); white-space: nowrap;
}

.btn-copy-message:hover { background: var(--color-secondary); color: white; border-color: var(--color-secondary); }

.btn-calendar {
    background: #1a6dd4; border: none; color: white;
    padding: 5px 11px; border-radius: var(--radius); cursor: pointer;
    font-size: 12px; text-decoration: none;
    display: inline-flex; align-items: center; gap: 4px;
    transition: var(--transition); white-space: nowrap;
}

.btn-calendar:hover { background: #1558b0; }

/* NOTE: ".loading-spinner" is also defined differently for: Available Properties, Tenants — see that page's section */
.loading-spinner {
    display: flex; flex-direction: column; align-items: center;
    padding: 60px 20px; color: var(--color-gray-dark);
}

/* NOTE: ".spinner" is also defined differently for: Available Properties, Tenants — see that page's section */
.spinner {
    width: 40px; height: 40px;
    border: 4px solid var(--color-gray); border-top-color: var(--color-secondary);
    border-radius: 50%; animation: spin 0.9s linear infinite; margin-bottom: 1rem;
}

/* NOTE: ".empty-state" is also defined differently for: Available Properties, Tenants — see that page's section */
.empty-state {
    text-align: center; padding: 4rem 2rem;
    background: white; border-radius: var(--radius); box-shadow: var(--shadow);
}

/* NOTE: ".empty-state-icon" is also defined differently for: Available Properties, Tenants — see that page's section */
.empty-state-icon { font-size: 3.5rem; margin-bottom: 1rem; opacity: 0.45; }

/* NOTE: ".empty-state h3" is also defined differently for: Available Properties, Tenants — see that page's section */
.empty-state h3 { color: var(--color-primary); margin-bottom: 0.4rem; }

/* NOTE: ".toast" is also defined differently for: Available Properties, Tenants — see that page's section */
.toast {
    position: fixed; bottom: 20px; right: 20px;
    padding: 0.9rem 1.4rem; background: var(--color-primary); color: white;
    border-radius: var(--radius); box-shadow: var(--shadow-heavy);
    transform: translateY(80px); opacity: 0; transition: var(--transition);
    z-index: 2000; max-width: 340px; font-size: 0.9rem;
}

/* NOTE: ".toast.error" is also defined differently for: Available Properties, Tenants — see that page's section */
.toast.error { background: var(--color-error); }

.property-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 3rem; }

/* NOTE: ".property-card" is also defined differently for: Available Properties — see that page's section */
.property-card {
    background: white; border-radius: 10px; padding: 14px 18px;
    display: flex; justify-content: space-between; align-items: center;
    cursor: pointer; transition: var(--transition);
    box-shadow: var(--shadow); border: 1.5px solid var(--color-gray); gap: 12px;
}

/* NOTE: ".property-card:hover" is also defined differently for: Available Properties — see that page's section */
.property-card:hover {
    box-shadow: var(--shadow-heavy); transform: translateY(-1px);
    border-color: var(--color-secondary);
}

.property-card-info { flex: 1; min-width: 0; }

.property-card-address {
    font-size: 15px; font-weight: 600; color: var(--color-primary); margin-bottom: 3px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.property-card-meta { font-size: 13px; color: var(--color-gray-dark); }

.cert-dots { display: flex; gap: 5px; align-items: center; flex-shrink: 0; }

.cert-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

.cert-dot--red    { background: var(--color-error); }

.cert-dot--orange { background: var(--color-warning); }

.cert-dot--green  { background: var(--color-secondary); }

.cert-dot--gray   { background: var(--color-gray-dark); }

/* NOTE: ".chevron" is also defined differently for: Available Properties, Tenants — see that page's section */
.chevron { font-size: 20px; color: var(--color-secondary); flex-shrink: 0; }

/* NOTE: ".modal" is also defined differently for: Available Properties, Tenants — see that page's section */
.modal {
    display: none; position: fixed; top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.55); z-index: 1500; overflow-y: auto;
}

/* NOTE: ".modal-content" is also defined differently for: Available Properties, Tenants — see that page's section */
.modal-content {
    position: relative; background: white;
    margin: 30px auto; width: 90%; max-width: 800px;
    border-radius: 12px; box-shadow: 0 12px 48px rgba(0,0,0,0.25);
    animation: modalIn 0.22s ease-out;
}

@keyframes modalIn {
    from { opacity: 0; transform: translateY(-12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* NOTE: ".modal-title" is also defined differently for: Available Properties, Tenants — see that page's section */
.modal-title { font-size: 17px; font-weight: 700; color: white; }

/* NOTE: ".modal-subtitle" is also defined differently for: Available Properties, Tenants — see that page's section */
.modal-subtitle { font-size: 13px; color: rgba(255,255,255,0.65); margin-top: 3px; }

/* NOTE: ".modal-close" is also defined differently for: Available Properties, Tenants — see that page's section */
.modal-close {
    background: rgba(255,255,255,0.15); border: none; font-size: 20px;
    cursor: pointer; color: white; width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; transition: background 0.2s; flex-shrink: 0; margin-left: 12px;
}

/* NOTE: ".modal-close:hover" is also defined differently for: Available Properties, Tenants — see that page's section */
.modal-close:hover { background: rgba(255,255,255,0.3); }

/* NOTE: ".modal-body" is also defined differently for: Available Properties, Tenants — see that page's section */
.modal-body { padding: 8px 24px 24px; max-height: 72vh; overflow-y: auto; }

.cert-row {
    display: grid;
    grid-template-columns: 72px 72px 1fr auto auto;
    align-items: center;
    gap: 12px;
    padding: 16px 0;
    border-bottom: 1px solid var(--color-gray);
}

.cert-row:last-child { border-bottom: none; }

.cert-label { font-weight: 700; color: var(--color-primary); font-size: 15px; }

.cert-doc-btn {
    display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; width: 60px; height: 56px; border-radius: 8px;
    text-decoration: none; transition: var(--transition); border: 2px solid transparent;
}

.pdf-icon { width: 22px; height: 22px; flex-shrink: 0; }

.pdf-label { font-size: 10px; font-weight: 700; letter-spacing: 0.5px; line-height: 1; }

.cert-doc-btn--valid {
    background: #f0fdf4; color: var(--color-secondary); border-color: #bbf7d0;
}

.cert-doc-btn--valid:hover { background: #dcfce7; }

.cert-doc-btn--expired {
    background: #fff7ed; color: var(--color-warning); border-color: #fed7aa;
}

.cert-doc-btn--expired:hover { background: #ffedd5; }

.cert-doc-btn--missing {
    background: #fef2f2; color: var(--color-error); border-color: #fecaca;
}

.cert-doc-btn--pending {
    background: #fffbeb; color: var(--color-yellow); border-color: #fde68a;
}

.cert-doc-btn--pending:hover { background: #fef3c7; }

.cert-doc-btn--noGas,
.cert-doc-btn--noLicense {
    background: var(--color-gray-light); color: var(--color-gray-dark); border-color: var(--color-gray);
}

.cert-doc-btn--none {
    background: #fef2f2; color: #f87171; border-color: #fecaca; cursor: default;
}

.cert-expiry {
    font-size: 17px;       /* noticeably larger */
    font-weight: 700;
    letter-spacing: 0.2px;
    line-height: 1.2;
}

.cert-expiry--red    { color: var(--color-error); }

.cert-expiry--amber  { color: #d97706; }

.cert-expiry--green  { color: #16a34a; }

.cert-expiry--na     { color: var(--color-gray-dark); font-weight: 400; font-size: 14px; }

.cert-status {
    font-size: 11px; padding: 4px 10px; border-radius: 12px;
    font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; white-space: nowrap;
}

.cert-status--expired   { background: var(--color-warning); color: white; }

.cert-status--missing   { background: var(--color-error); color: white; }

.cert-status--valid     { background: var(--color-secondary); color: white; }

.cert-status--noGas,
.cert-status--noLicense { background: var(--color-gray); color: var(--color-gray-dark); }

.cert-status--pending   { background: var(--color-yellow); color: white; }

.cert-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }

@media (max-width: 640px) {
    .modal-content { width: 96%; margin: 8px auto; }
    .modal-body { max-height: 80vh; padding: 8px 16px 20px; }

    .cert-row {
        grid-template-columns: 60px 60px 1fr;
        grid-template-rows: auto auto;
        gap: 8px;
    }

    .cert-status { grid-column: 3; }
    .cert-actions { grid-column: 1 / -1; padding-top: 4px; }
    .cert-expiry { font-size: 15px; }
}


/* ============================================================
   TENANTS (TENANT-STYLES.HTML) — page-specific rules
   (rules here are either unique to this page, or share a selector
   with another page's stylesheet but have a different body — kept
   separately below so no page's appearance changes)
   ============================================================ */

/* NOTE: ":root" is also defined differently for: Available Properties, Property Certificates — see that page's section */
:root {
    --color-primary: #18222E;
    --color-secondary: #2BAD17;
    --color-white: #FFFFFF;
    --color-warning: #FF6B35;
    --color-gray-light: #F5F7FA;
    --color-gray: #E4E7EB;
    --color-gray-dark: #7B8794;
    --color-text: #323F4B;
    --color-error: #DC2626;
    --shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    --shadow-heavy: 0 8px 24px rgba(0, 0, 0, 0.15);
    --border-radius: 8px;
    --transition: all 0.3s ease;
}

/* NOTE: ".page-header" is also defined differently for: Available Properties, Property Certificates — see that page's section */
.page-header {
    margin: 2rem 0 1.5rem;
}

/* NOTE: "@media (max-width: 768px)" is also defined differently for: Available Properties, Property Certificates — see that page's section */
@media (max-width: 768px) {
    .search-input { width: 100%; }
    .page-header-top { flex-direction: column; align-items: stretch; }
    .controls { flex-direction: column; width: 100%; }
}

/* NOTE: ".chip" is also defined differently for: Available Properties, Property Certificates — see that page's section */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: white;
    border: 2px solid var(--color-gray);
    border-radius: 24px;
    padding: 9px 18px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
    color: var(--color-text);
    white-space: nowrap;
    line-height: 1.2;
}

.chip.active .chip-count {
    background: rgba(255, 255, 255, 0.25);
    color: white;
}

/* NOTE: ".chip.rent-increase.active" is also defined differently for: Available Properties — see that page's section */
.chip.rent-increase.active {
    background: #e55a2b;
    box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.25);
}

.chip.rent-increase .chip-count,
.chip.rent-increase.active .chip-count {
    background: rgba(255, 255, 255, 0.25);
    color: white;
}

.chip-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    border-radius: 11px;
    font-size: 12px;
    font-weight: 700;
    background: var(--color-gray);
    color: var(--color-text);
    line-height: 1;
}

.btn-primary, .btn-secondary, .btn-small {
    padding: 0.75rem 1.5rem;
    border-radius: var(--border-radius);
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
    border: 2px solid transparent;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    text-align: center;
    justify-content: center;
}

/* NOTE: ".loading-spinner" is also defined differently for: Available Properties, Property Certificates — see that page's section */
.loading-spinner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: #666;
    text-align: center;
}

/* NOTE: ".empty-state" is also defined differently for: Available Properties, Property Certificates — see that page's section */
.empty-state {
    text-align: center;
    padding: 4rem 2rem;
    background-color: var(--color-white);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
}

info-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

@media (min-width: 600px) {
    .info-grid {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    }
    .info-item:first-child {
        grid-column: 1 / -1;
    }
}