/*
===========================================================================
DO NOT MODIFY THIS FILE - NSG STANDARDS
===========================================================================
File: nsg_components.css
Purpose: Reusable components - tables, images, callouts, grids
Location: /var/www/html/nsg_standards/css/
Copy to: /var/www/html/[project]/static/css/

INSTRUCTIONS FOR AI:
- Do NOT edit this file to fix styling issues
- Make your HTML conform to these classes
- If a style doesn't exist, ask the user before adding

AVAILABLE COMPONENTS:
  Tables:     .data-table, .comparison-table, .timeline-table
  Images:     .image-row, .feature-image, .panel-image (click to expand)
  Callouts:   .highlight-box, .callout, .callout-warning, .callout-info
  Grids:      .data-grid, .data-card
  Static:     .overview-static (label/value tables)
===========================================================================
2025-12-19 v1.0 - Initial creation from Leaf River pattern
===========================================================================
*/

/* ===========================================
   HIGHLIGHT BOX - Intro callouts
   =========================================== */

.highlight-box {
    background: linear-gradient(135deg, var(--color-secondary-light), var(--color-secondary));
    border-left: var(--border-accent-width) solid var(--color-primary);
    padding: var(--spacing-lg);
    margin: var(--spacing-lg) 0;
    border-radius: 0 var(--border-radius-lg) var(--border-radius-lg) 0;
}

.highlight-box p {
    margin: var(--spacing-sm) 0;
}

.highlight-box p:first-child {
    margin-top: 0;
}

.highlight-box p:last-child {
    margin-bottom: 0;
}

/* ===========================================
   CALLOUT BOXES - Warnings, info
   =========================================== */

.callout {
    background: var(--color-secondary-light);
    border-left: var(--border-accent-width) solid var(--color-primary);
    padding: var(--spacing-lg);
    margin: var(--spacing-xl) 0;
    border-radius: var(--border-radius-sm);
}

.callout p {
    margin: 0;
}

.callout strong {
    color: var(--color-primary);
}

.callout-warning {
    background: #fff5f5;
    border-left-color: #e53e3e;
}

.callout-warning strong {
    color: #e53e3e;
}

.callout-info {
    background: #fffbeb;
    border-left-color: var(--color-accent);
}

.callout-info strong {
    color: #d69e2e;
}

/* ===========================================
   DATA GRID - Metric cards
   =========================================== */

.data-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--spacing-md);
    margin: var(--spacing-lg) 0;
}

.data-card {
    background: var(--color-secondary-light);
    border: var(--border-width) solid var(--color-secondary);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-lg);
    text-align: center;
}

.data-number {
    display: block;
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-primary);
}

.data-label {
    font-size: var(--font-size-small);
    color: var(--color-text-light);
}

/* ===========================================
   OVERVIEW STATIC - Label/value tables
   =========================================== */

.overview-static {
    margin: var(--spacing-lg) 0;
}

.overview-static table {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-bg);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
}

.overview-static td {
    padding: 12px 16px;
    border-bottom: var(--border-width) solid var(--color-border);
}

.overview-static tr:last-child td {
    border-bottom: none;
}

.overview-static td:first-child {
    width: 40%;
    color: var(--color-text-light);
    font-weight: 500;
}

.overview-static td:last-child {
    color: var(--color-text);
}

/* ===========================================
   DATA TABLES
   =========================================== */

.data-table,
.comparison-table,
.timeline-table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--spacing-md) 0;
}

.data-table th,
.data-table td,
.comparison-table th,
.comparison-table td,
.timeline-table th,
.timeline-table td {
    padding: 0.75rem var(--spacing-md);
    text-align: left;
    border-bottom: var(--border-width) solid var(--color-border);
}

.data-table th,
.comparison-table th,
.timeline-table th {
    background: var(--color-primary);
    color: var(--color-white);
    font-weight: 600;
}

.data-table tr:hover,
.comparison-table tr:hover {
    background: var(--color-secondary-light);
}

.timeline-table .current-step {
    background: var(--color-secondary-light);
    font-weight: 600;
}

/* ===========================================
   IMAGES - Standard display, click to expand
   =========================================== */

.image-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--spacing-lg);
    margin: var(--spacing-lg) 0;
}

.image-row figure {
    margin: 0;
    text-align: center;
}

.feature-image {
    margin: var(--spacing-lg) 0;
    text-align: center;
}

.image-row img,
.feature-image img,
.panel-image {
    width: var(--image-default-width);
    max-width: 100%;
    height: auto;
    border-radius: var(--border-radius-lg);
    border: var(--border-width) solid var(--color-secondary);
    cursor: pointer;
    transition: all 0.3s ease;
    display: block;
    margin: 0 auto;
}

.panel-image {
    margin: var(--spacing-md) auto;
}

figcaption {
    text-align: center;
    font-size: var(--font-size-small);
    color: var(--color-text-light);
    margin-top: var(--spacing-sm);
}

/* ===========================================
   IMAGE EXPAND - Click to view full size
   Requires nsg_accordion.js
   =========================================== */

.image-row img.expanded,
.feature-image img.expanded,
.panel-image.expanded {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: var(--image-expanded-width);
    max-width: var(--image-expanded-max-width);
    max-height: var(--image-expanded-max-height);
    object-fit: contain;
    z-index: 9999;
    border: none;
    border-radius: 0;
    box-shadow: 0 0 0 9999px rgba(0,0,0,0.8);
}

/* ===========================================
   SECTION NAVIGATION
   =========================================== */

.section-nav {
    display: flex;
    justify-content: space-between;
    margin-top: var(--spacing-xl);
    padding-top: var(--spacing-lg);
    border-top: var(--border-width) solid var(--color-border);
}

.nav-prev,
.nav-next {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 600;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--border-radius-md);
    transition: background 0.2s;
}

.nav-prev:hover,
.nav-next:hover {
    background: var(--color-secondary-light);
}

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

@media (max-width: 768px) {
    .data-grid {
        grid-template-columns: 1fr;
    }
    
    .image-row {
        flex-direction: column;
        align-items: center;
    }
    
    .section-nav {
        flex-direction: column;
        gap: var(--spacing-sm);
        text-align: center;
    }
    
    .overview-static td:first-child {
        width: 50%;
    }
}