/**
 * JEA Property Detail Page CSS
 *
 * Styles for the single-property detail view:  property/tmpl/default.php
 * All BEM classes use the jea-property-* namespace so every element on the
 * property page is targetable without fighting Bootstrap specificity.
 *
 * Class map:
 *   .jea-property-detail        — outer wrapper for the entire property page
 *   .jea-property-header        — title / hero / gallery area
 *   .jea-property-meta          — listing metadata row (listed-by, edit date)
 *   .jea-property-tabs          — tab navigation bar
 *   .jea-property-tabs__item    — single tab nav item  (<li>)
 *   .jea-property-tabs__link    — tab nav button  (<button>)
 *   .jea-property-tab-content   — outer container for all tab panels
 *   .jea-tab-pane               — base class for every tab panel
 *   .jea-tab-pane--overview     — Overview tab
 *   .jea-tab-pane--financial    — Financial tab
 *   .jea-tab-pane--history      — History tab
 *   .jea-tab-pane--issues       — Issues tab
 *   .jea-tab-pane--media        — Media tab
 *   .jea-tab-pane--discussion   — Discussion tab
 *   .jea-tab-pane--contact      — Contact tab
 *   .jea-section                — generic section block inside a tab panel
 *   .jea-section__heading       — section heading row (label + count badge)
 *   .jea-section__body          — content area of a section
 *   .jea-detail-row             — a two-column label/value row in details
 *   .jea-detail-grid            — responsive grid of detail rows
 *   .jea-owner-card             — owner information panel
 *   .jea-score-widget           — transparency score widget
 *   .jea-issues-list            — issues list container
 *   .jea-issue-item             — single issue row
 *   .jea-timeline               — history timeline container
 *   .jea-timeline-group         — accordion group for a single date
 *   .jea-timeline-event         — single timeline event row
 *   .jea-amenities-grid         — grid of amenity tags
 *   .jea-amenity-tag            — single amenity pill
 *
 * @package     com_jea
 * @version     1.0.0
 * @since       2026
 */

/* ─────────────────────────────────────────────────────────────────────────────
   PAGE WRAPPER
   ───────────────────────────────────────────────────────────────────────────── */
.jea-property-detail {
    container-type: inline-size;
    container-name: property-detail;
}

/* ─────────────────────────────────────────────────────────────────────────────
   TAB NAVIGATION
   ───────────────────────────────────────────────────────────────────────────── */
.jea-property-tabs {
    --jea-tab-border-color: #dee2e6;
    --jea-tab-active-bg:    #fff;
    --jea-tab-active-color: #495057;
    --jea-tab-hover-color:  #495057;
    border-bottom: 1px solid var(--jea-tab-border-color);
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}
.jea-property-tabs__item {
    margin-bottom: -1px;
}
.jea-property-tabs__link {
    display: block;
    padding: .5rem 1rem;
    font-size: .9rem;
    font-weight: 500;
    color: #6c757d;
    text-decoration: none;
    background: none;
    border: 1px solid transparent;
    border-top-left-radius: .375rem;
    border-top-right-radius: .375rem;
    cursor: pointer;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
}
.jea-property-tabs__link:hover:not(.active) {
    color: var(--jea-tab-hover-color);
    border-color: #e9ecef #e9ecef var(--jea-tab-border-color);
}
.jea-property-tabs__link.active,
.jea-property-tabs__link[aria-selected="true"] {
    color: var(--jea-tab-active-color);
    background-color: var(--jea-tab-active-bg);
    border-color: var(--jea-tab-border-color) var(--jea-tab-border-color) var(--jea-tab-active-bg);
}
.jea-property-tabs__link.jea-tab-empty {
    color: #adb5bd;
    font-style: italic;
}

/* Badge inside tab button */
.jea-property-tabs__link .jea-badge,
.jea-property-tabs__link .badge {
    font-size: .65em;
    vertical-align: middle;
    margin-left: .25rem;
}

/* ─────────────────────────────────────────────────────────────────────────────
   TAB CONTENT CONTAINER
   ───────────────────────────────────────────────────────────────────────────── */
.jea-property-tab-content {
    border: 1px solid #dee2e6;
    border-top: none;
    border-radius: 0 0 .375rem .375rem;
    padding: 1.25rem;
    background: #fff;
}

/* ─────────────────────────────────────────────────────────────────────────────
   BASE TAB PANE
   ───────────────────────────────────────────────────────────────────────────── */
.jea-tab-pane {
    padding-top: .5rem;
}

/* ─────────────────────────────────────────────────────────────────────────────
   OVERVIEW TAB
   ───────────────────────────────────────────────────────────────────────────── */
.jea-tab-pane--overview {
    --jea-overview-gap: 1.25rem;
}
.jea-tab-pane--overview .jea-owner-card {
    margin-bottom: var(--jea-overview-gap);
}
.jea-tab-pane--overview .jea-score-widget {
    margin-bottom: var(--jea-overview-gap);
}
.jea-tab-pane--overview .jea-detail-grid {
    margin-bottom: var(--jea-overview-gap);
}
.jea-tab-pane--overview .jea-amenities-grid {
    margin-bottom: var(--jea-overview-gap);
}

/* ─────────────────────────────────────────────────────────────────────────────
   FINANCIAL TAB
   ───────────────────────────────────────────────────────────────────────────── */
.jea-tab-pane--financial .jea-section + .jea-section {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #dee2e6;
}
.jea-tab-pane--financial .jea-rent-history-table {
    margin-top: 1rem;
}

/* ─────────────────────────────────────────────────────────────────────────────
   HISTORY TAB
   ───────────────────────────────────────────────────────────────────────────── */
.jea-tab-pane--history {
    --jea-timeline-accent: #0d6efd;
}

/* ─────────────────────────────────────────────────────────────────────────────
   ISSUES TAB
   ───────────────────────────────────────────────────────────────────────────── */
.jea-tab-pane--issues .jea-issues-summary-bar {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1rem;
    padding: .75rem 1rem;
    background: #f8f9fa;
    border-radius: .375rem;
    border: 1px solid #dee2e6;
}
.jea-tab-pane--issues .jea-issues-summary-stat {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-size: .9rem;
}
.jea-tab-pane--issues .jea-issues-summary-stat strong {
    font-size: 1.1em;
}

/* ─────────────────────────────────────────────────────────────────────────────
   SECTIONS (generic section blocks within a tab)
   ───────────────────────────────────────────────────────────────────────────── */
.jea-section {
    margin-bottom: 1.5rem;
}
.jea-section:last-child { margin-bottom: 0; }
.jea-section__heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .5rem;
    padding-bottom: .5rem;
    margin-bottom: .75rem;
    border-bottom: 2px solid #dee2e6;
    font-weight: 600;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #495057;
}
.jea-section__heading .jea-badge,
.jea-section__heading .badge {
    font-size: .7em;
}
.jea-section__body {
    padding: 0;
}

/* ─────────────────────────────────────────────────────────────────────────────
   DETAIL GRID (label/value pairs)
   ───────────────────────────────────────────────────────────────────────────── */
.jea-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: .5rem 1rem;
}
.jea-detail-row {
    display: flex;
    flex-direction: column;
    gap: .1rem;
}
.jea-detail-row__label {
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #6c757d;
}
.jea-detail-row__value {
    font-size: .95rem;
    color: #212529;
}
.jea-detail-section-label {
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #6c757d;
}

/* ─────────────────────────────────────────────────────────────────────────────
   OWNER / MANAGER CARD
   ───────────────────────────────────────────────────────────────────────────── */
.jea-owner-card {
    border: 1px solid #dee2e6;
    border-radius: .375rem;
    padding: 1rem;
    background: #f8f9fa;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-start;
}
.jea-owner-card__avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.jea-owner-card__info {
    flex: 1;
    min-width: 0;
}
.jea-owner-card__name {
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: .25rem;
}
.jea-owner-card__meta {
    font-size: .875rem;
    color: #6c757d;
}

/* ─────────────────────────────────────────────────────────────────────────────
   TRANSPARENCY SCORE WIDGET
   ───────────────────────────────────────────────────────────────────────────── */
.jea-score-widget {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .75rem;
    padding: .75rem 1rem;
    border: 1px solid #dee2e6;
    border-radius: .375rem;
    background: #fff;
}
.jea-score-widget__value {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
}
.jea-score-widget__label {
    font-size: .85rem;
    color: #6c757d;
}

/* ─────────────────────────────────────────────────────────────────────────────
   AMENITIES GRID
   ───────────────────────────────────────────────────────────────────────────── */
.jea-amenities-grid {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    padding: 0;
    list-style: none;
}
.jea-amenity-tag {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .25rem .65rem;
    background: #e9ecef;
    border-radius: 999px;
    font-size: .82rem;
    color: #495057;
    border: 1px solid #dee2e6;
    white-space: nowrap;
}
.jea-amenity-tag--active {
    background: #d1e7dd;
    color: #0f5132;
    border-color: #badbcc;
}
.jea-amenity-category {
    margin-bottom: .75rem;
}
.jea-amenity-category__label {
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #6c757d;
    margin-bottom: .35rem;
    display: block;
}

/* ─────────────────────────────────────────────────────────────────────────────
   ISSUES LIST
   ───────────────────────────────────────────────────────────────────────────── */
.jea-issues-list {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.jea-issue-item {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .75rem;
    border: 1px solid #dee2e6;
    border-radius: .375rem;
    background: #fff;
    flex-wrap: wrap;
}
.jea-issue-item--current {
    border-left: 4px solid #dc3545;
    background: #fff8f8;
}
.jea-issue-item--resolved {
    border-left: 4px solid #198754;
    background: #f8fff9;
    opacity: .85;
}
.jea-issue-item__icon {
    flex-shrink: 0;
    width: 32px;
    text-align: center;
    font-size: 1rem;
    padding-top: .15rem;
}
.jea-issue-item__body {
    flex: 1;
    min-width: 0;
}
.jea-issue-item__title {
    font-weight: 600;
    font-size: .95rem;
    margin-bottom: .2rem;
}
.jea-issue-item__meta {
    font-size: .82rem;
    color: #6c757d;
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    align-items: center;
}
.jea-issue-item__actions {
    flex-shrink: 0;
    display: flex;
    gap: .35rem;
    align-items: center;
}

/* Issue severity indicators */
.jea-issue-severity--minor    { color: #6c757d; }
.jea-issue-severity--moderate { color: #ffc107; }
.jea-issue-severity--major    { color: #fd7e14; }
.jea-issue-severity--critical { color: #dc3545; }

/* ─────────────────────────────────────────────────────────────────────────────
   TIMELINE (History tab)
   ───────────────────────────────────────────────────────────────────────────── */
.jea-timeline {
    position: relative;
}
.jea-timeline-group {
    margin-bottom: .5rem;
    border: 1px solid #dee2e6;
    border-radius: .375rem;
    overflow: hidden;
}
.jea-timeline-group__toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .6rem 1rem;
    background: #f8f9fa;
    border: none;
    cursor: pointer;
    text-align: left;
    font-size: .9rem;
    font-weight: 600;
    color: #495057;
    transition: background-color .15s;
    gap: .5rem;
}
.jea-timeline-group__toggle:hover { background: #e9ecef; }
.jea-timeline-group__toggle-icon {
    flex-shrink: 0;
    transition: transform .2s;
}
.jea-timeline-group.is-open .jea-timeline-group__toggle-icon {
    transform: rotate(180deg);
}
.jea-timeline-group__date {
    font-weight: 600;
    color: #0d6efd;
}
.jea-timeline-group__count {
    font-weight: normal;
    font-size: .8em;
    color: #6c757d;
}
.jea-timeline-group__body {
    border-top: 1px solid #dee2e6;
}

/* Timeline event rows */
.jea-timeline-event {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .6rem 1rem;
    border-bottom: 1px solid #f0f0f0;
    flex-wrap: wrap;
    font-size: .9rem;
}
.jea-timeline-event:last-child { border-bottom: none; }
.jea-timeline-event:hover { background: #fafafa; }
.jea-timeline-event__icon {
    flex-shrink: 0;
    width: 28px;
    text-align: center;
    color: #6c757d;
    padding-top: .1rem;
}
.jea-timeline-event__body {
    flex: 1;
    min-width: 0;
}
.jea-timeline-event__title {
    font-weight: 500;
    color: #212529;
}
.jea-timeline-event__meta {
    font-size: .82rem;
    color: #6c757d;
    margin-top: .15rem;
}
.jea-timeline-event__actions {
    flex-shrink: 0;
    display: flex;
    gap: .3rem;
    align-items: center;
}
.jea-timeline-event__detail {
    width: 100%;
    padding: .5rem;
    background: #f8f9fa;
    border-radius: .25rem;
    border: 1px solid #e9ecef;
    font-size: .875rem;
    margin-top: .35rem;
}

/* Event type color accents */
.jea-timeline-event--issue         { border-left: 3px solid #dc3545; }
.jea-timeline-event--amenity       { border-left: 3px solid #198754; }
.jea-timeline-event--tenancy       { border-left: 3px solid #0d6efd; }
.jea-timeline-event--inspection    { border-left: 3px solid #6f42c1; }
.jea-timeline-event--lease         { border-left: 3px solid #fd7e14; }
.jea-timeline-event--maintenance   { border-left: 3px solid #20c997; }
.jea-timeline-event--disclosure    { border-left: 3px solid #ffc107; }
.jea-timeline-event--walkthrough   { border-left: 3px solid #0dcaf0; }

/* ─────────────────────────────────────────────────────────────────────────────
   PROFESSIONAL INSPECTION PANEL
   ───────────────────────────────────────────────────────────────────────────── */
.jea-pro-inspection-panel {
    border: 1px solid #dee2e6;
    border-radius: .375rem;
    margin-top: 1rem;
}
.jea-pro-inspection-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .5rem;
    padding: .75rem 1rem;
    background: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
    border-radius: .375rem .375rem 0 0;
}
.jea-pro-inspection-panel__body { padding: 1rem; }

/* ─────────────────────────────────────────────────────────────────────────────
   CONTACT FORM TAB
   ───────────────────────────────────────────────────────────────────────────── */
.jea-tab-pane--contact .jea-contact-form {
    max-width: 640px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   PROPERTY LISTING META (author, dates)
   ───────────────────────────────────────────────────────────────────────────── */
.jea-listing-meta.jea-list-unstyled {
    font-size: .875rem;
    color: #6c757d;
    display: flex;
    flex-wrap: wrap;
    gap: .3rem .75rem;
    margin-bottom: .75rem;
}
.jea-listing-meta li {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
}
.jea-meta-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    vertical-align: middle;
}
.jea-meta-user-link {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    color: inherit;
    text-decoration: none;
    font-weight: 600;
}
.jea-meta-user-link:hover { text-decoration: underline; }

/* ─────────────────────────────────────────────────────────────────────────────
   DETAIL TABLE (two-col key/value within card body)
   ───────────────────────────────────────────────────────────────────────────── */
.jea-detail-table td:first-child {
    font-weight: 500;
    white-space: nowrap;
    width: 40%;
    color: #6c757d;
    padding-right: 1rem;
}
.jea-detail-table td:last-child {
    font-weight: 600;
}

/* ─────────────────────────────────────────────────────────────────────────────
   RESPONSIVE OVERRIDES
   ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 576px) {
    .jea-property-tabs__link { padding: .4rem .65rem; font-size: .82rem; }
    .jea-property-tab-content { padding: .75rem; }
    .jea-detail-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
    .jea-issue-item { flex-direction: column; }
    .jea-timeline-event { padding: .5rem .75rem; }
}
@media (max-width: 400px) {
    .jea-property-tabs { overflow-x: auto; flex-wrap: nowrap; }
}