/*
 * Fire Stopping — Properties surface (FS-specific bits only).
 *
 * The directory + show page wear the module's forked `fss-*` design language
 * (fss-page-header / fss-stats-strip / fss-table / fss-chip / fss-empty-rich,
 * all from fire-stopping.css) so Properties matches Surveys & Tested Systems.
 * This sheet owns only the page-specific bits: the FS-owned detail panels
 * (overview cards, survey list, activity timeline) under the `.fsp-*`
 * namespace, plus a few small directory extras (health-chip tone aliases, the
 * "survey due" badge, the problem-row accent). Built on the global :root tokens
 * so dark mode comes for free.
 */

/* ---- Overview ----------------------------------------------------------- */
.fsp-overview {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.fsp-overview-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.fsp-card {
    min-width: 0;
    background: var(--surface-card);
    border-radius: 12px;
    padding: 18px 20px;
    box-shadow: var(--shadow-card);
}

.fsp-card--wide {
    grid-column: 1 / -1;
}

.fsp-card-eyebrow {
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-4);
}

.fsp-card-title {
    margin: 4px 0 12px;
    font-size: 16px;
    font-weight: 600;
    color: var(--ink);
}

.fsp-card-head-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.fsp-card-head-row .fsp-card-title {
    margin-bottom: 0;
}

/* ---- Stat lists --------------------------------------------------------- */
.fsp-stat-list {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.fsp-stat-list li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
    color: var(--ink-3);
}

.fsp-stat-list li strong {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
}

.fsp-warn {
    color: var(--danger);
}

.fsp-muted {
    color: var(--ink-4);
    font-size: 13px;
}

.fsp-notes {
    margin: 6px 0 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--ink-2, var(--ink-3));
}

/* ---- Latest surveys list ------------------------------------------------ */
.fsp-survey-list {
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.fsp-survey-list li + li {
    border-top: 1px solid var(--rule);
}

.fsp-survey-list a {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 0;
    text-decoration: none;
    color: inherit;
}

.fsp-survey-list a:hover .fsp-survey-list__name {
    color: var(--accent-strong, var(--accent));
}

.fsp-survey-list__name {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
}

.fsp-survey-list__meta {
    font-size: 12px;
    color: var(--ink-4);
}

/* ---- Activity timeline -------------------------------------------------- */
.fsp-activity {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: var(--surface-card);
    border-radius: 12px;
    padding: 8px 20px;
    box-shadow: var(--shadow-card);
}

.fsp-activity__item {
    display: flex;
    gap: 12px;
    padding: 14px 0;
}

.fsp-activity__item + .fsp-activity__item {
    border-top: 1px solid var(--rule);
}

.fsp-activity__dot {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    margin-top: 6px;
    border-radius: 50%;
    background: var(--accent);
}

.fsp-activity__body {
    min-width: 0;
}

.fsp-activity__desc {
    font-size: 13.5px;
    color: var(--ink);
    line-height: 1.5;
}

.fsp-activity__meta {
    margin-top: 3px;
    font-size: 12px;
    color: var(--ink-4);
}

.fsp-activity__meta a {
    color: var(--info, var(--accent));
    text-decoration: none;
}

.fsp-activity__meta a:hover {
    text-decoration: underline;
}

/* ---- Health chips (healthy / attention / risk) — now shared --------------
 * Moved into fire-stopping.css (the shared layer) 2026-06-05 so the defects
 * board / register / modal can use the same severity tones. Kept this note so
 * nobody re-adds them here and creates a duplicate.                          */

/* ---- "Survey due / first survey needed" hint badge under a property name - */
.fss-reminder-badge {
    align-self: flex-start;
    margin-top: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1.4;
    background: var(--accent-soft);
    color: var(--accent-strong);
}

/* ---- Problem-row accent (overdue, or open high-severity defects) ---------
 * A subtle danger bar on the leading cell. Supplementary — the health chip and
 * "Overdue" meta already carry the signal — so it stays desktop-only to avoid
 * fighting the fss-table mobile card layout owned by fire-stopping.css.        */
.fss-row--problem > td:first-child {
    box-shadow: inset 3px 0 0 var(--danger);
}

/* ---- Responsive (≤900px) ------------------------------------------------ */
@media (max-width: 900px) {
    .fsp-overview-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}