/* opportunity-components.css — Opportunity report components
 * Used by: holliday_lighting/illumination_opportunities_report.html
 * Extracted from theme.css section 5 to reduce bundle size for non-opportunity pages.
 */

/* Additional tokens (complements report-base.css + theme.css :root) */
:root {
    --font-size-opp-title: 1.05rem;
    --font-size-opp-details: 0.92rem;
    --font-size-sources: 0.88rem;
    --font-size-priority-count: 2rem;
    --color-action-bg: #d4edda;
    --color-action-border: #28a745;
    --color-priority-label: #4a4a4a;
    --letter-spacing-priority: 0.5px;
    --spacing-opp-gap: 0.4rem;
    --spacing-tiny: 0.3rem;
}


/* ==========================================================================
   TOC BOX
   ========================================================================== */

.toc {
    background: var(--color-white);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.toc h2 { color: var(--primary); margin-bottom: var(--spacing-sm); font-size: var(--font-size-h2); }
.toc h3 { color: var(--primary); margin-bottom: var(--spacing-table-cell); }
.toc ol { padding-left: var(--spacing-md); }
.toc li { margin-bottom: var(--spacing-tiny); }
.toc a { color: var(--secondary); text-decoration: none; }
.toc a:hover { text-decoration: underline; }


/* ==========================================================================
   OPPORTUNITY CARDS
   ========================================================================== */

.opp-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--padding-card, 1.25rem);
    margin: var(--spacing-sm) 0;
    transition: box-shadow var(--transition-fast);
}
.opp-card:hover { box-shadow: var(--shadow-lg); }
.opp-card .opp-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--spacing-table-cell);
    flex-wrap: wrap;
    gap: var(--spacing-xs);
}
.opp-card .opp-title { font-weight: var(--font-weight-semibold); color: var(--primary); font-size: var(--font-size-opp-title); }
.opp-card .opp-badges { display: flex; gap: var(--spacing-opp-gap); flex-wrap: wrap; }
.opp-card .opp-details { font-size: var(--font-size-opp-details); }
.opp-card .opp-details dt { font-weight: var(--font-weight-semibold); color: var(--secondary); margin-top: var(--spacing-xs); }
.opp-card .opp-details dd { margin-left: 0; margin-bottom: var(--spacing-detail-gap); }


/* ==========================================================================
   PRIORITY SUMMARY GRID
   ========================================================================== */

.priority-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-sm);
    margin: var(--spacing-sm) 0;
}
.priority-card {
    background: var(--light);
    padding: var(--spacing-sm);
    border-radius: var(--radius-lg);
    text-align: center;
}
.priority-card .count { font-size: var(--font-size-priority-count); font-weight: var(--font-weight-bold); color: var(--primary); }
.priority-card .label { font-size: var(--font-size-xs); color: var(--color-priority-label); text-transform: uppercase; letter-spacing: var(--letter-spacing-priority); }


/* ==========================================================================
   ACTION BOX & SOURCES
   ========================================================================== */

.action-box {
    background: var(--color-action-bg);
    border-left: var(--border-accent-width) solid var(--color-action-border);
    padding: var(--spacing-sm) var(--spacing-md);
    margin: var(--spacing-sm) 0;
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}

.sources-section { font-size: var(--font-size-sources); }
.sources-section li { margin-bottom: var(--spacing-tiny); word-break: break-word; }

/* Opportunity report table font-size */
.section-content table { font-size: var(--font-size-opp-details); }


/* ==========================================================================
   BRAND-SPECIFIC OVERRIDES
   ========================================================================== */

[data-brand="integrity-studio"] .toc a { color: var(--accent); }
[data-brand="integrity-studio"] .priority-summary { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin: var(--spacing-md) 0; }


/* ==========================================================================
   DARK MODE
   ========================================================================== */

@media (prefers-color-scheme: dark) {
    :root {
        --color-dark-opp-details-dt: #c0d0e0;
        --color-dark-priority-count: #90c0f0;
        --color-dark-priority-label: #c0c0c0;
        --color-dark-action-bg: #1a2a1a;
    }
    .toc { background: var(--color-dark-surface); }
    .toc h2, .toc h3 { color: var(--color-text-secondary); }
    .opp-card { border-color: var(--border); background: var(--color-dark-surface); }
    .opp-card .opp-title { color: var(--color-text-secondary); }
    .opp-card .opp-details dt { color: var(--color-dark-opp-details-dt); }
    .priority-card { background: var(--color-dark-th-bg); }
    .priority-card .count { color: var(--color-dark-priority-count); }
    .priority-card .label { color: var(--color-dark-priority-label); }
    .action-box { background: var(--color-dark-action-bg); }
}


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 640px) {
    [data-brand="integrity-studio"] .priority-summary { grid-template-columns: repeat(2, 1fr); }
}


/* ==========================================================================
   PRINT
   ========================================================================== */

@media print {
    [data-brand="integrity-studio"] .opp-card { break-inside: avoid; }
    [data-brand="integrity-studio"] header { background: var(--primary) !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}