/* common/css/containers.css - Underground Theme + Modern Enhancements */

/* === UNDERGROUND THEME CONTAINER VARIABLES === */
:root {
    /* Primary Colors */
    --container_primary: rgba(168, 85, 247, 1);      /* Punk purple */
    --container_primary_rgb: 168, 85, 247;
    --container_secondary: rgba(14, 165, 233, 1);    /* Ska blue */
    --container_secondary_rgb: 14, 165, 233;
    --container_accent: rgba(239, 68, 68, 1);        /* Rebellious red */
    --container_accent_rgb: 239, 68, 68;
    
    /* Supporting Colors */
    --container_light: rgba(248, 250, 252, 1);
    --container_dark: rgba(15, 23, 42, 1);
    --container_dark_rgb: 15, 23, 42;
    
    /* Text colors */
    --container_text_on_light: rgba(200, 200, 200, 1);
    --container_text_on_dark: rgba(200, 200, 200, 1);
    
    /* Border colors */
    --container_border_light: rgba(226, 232, 240, 1);
    --container_border_dark: rgba(51, 65, 85, 1);
    
    /* Shadows - Modern and subtle */
    --container_shadow_sm: 0 1px 3px rgba(0, 0, 0, 0.1);
    --container_shadow_md: 0 4px 6px rgba(0, 0, 0, 0.05);
    --container_shadow_lg: 0 10px 15px rgba(0, 0, 0, 0.08);
    
    /* Border radius */
    --container_radius_sm: 6px;
    --container_radius_md: 10px;
    --container_radius_lg: 15px;
    
    /* Mobile-optimized spacing - Max 15px */
    --container_pad_xs: 4px;
    --container_pad_sm: 8px;
    --container_pad_md: 12px;
    --container_pad_lg: 15px;
    --container_pad_xl: 15px;
    
    --container_gap_xs: 6px;
    --container_gap_sm: 10px;
    --container_gap_md: 15px;
    --container_gap_lg: 20px;
    --container_gap_xl: 25px;
    
    /* Grid item colors */
    --grid_item_bg_1: rgba(243, 244, 246, 1);
    --grid_item_bg_2: rgba(255, 255, 255, 1);
    --grid_item_hover_bg: rgba(237, 233, 254, 1); /* Light purple tint */
    
    /* Card specific */
    --card_bg: rgba(255, 255, 255, 1);
    --card_header_bg: rgba(241, 245, 249, 1);
    --card_footer_bg: rgba(248, 250, 252, 1);
    
    /* Table specific */
    --table_header_bg: var(--container_primary);
    --table_row_even: rgba(243, 244, 246, 1);
    --table_row_odd: rgba(255, 255, 255, 1);
    --table_row_hover: rgba(237, 233, 254, 1); /* Light purple on hover */
    --data_table_header_bg: var(--container_primary);
    
    /* Alternate color scheme for tables */
    --table_alt_even: rgba(240, 245, 255, 1); /* Light blue tint */
    --table_alt_odd: rgba(255, 255, 255, 1);
    
    /* Hero specific */
    --hero_bg: var(--container_primary);
    --hero_light_bg: var(--container_light);
    --hero_dark_bg: var(--container_dark);
    --hero_gradient_start: var(--container_primary);
    --hero_gradient_end: var(--container_secondary);
    --hero_overlay_bg: rgba(0, 0, 0, 0.4);
}

/* Dark mode variables overrides */
@media (prefers-color-scheme: dark) {
    :root {
        /* Common dark mode overrides */
        --container_light: rgba(30, 41, 59, 1);
        --container_dark: rgba(15, 23, 42, 1);
        --container_text_on_light: rgba(200, 200, 200, 1);
        --container_border_light: rgba(51, 65, 85, 1);
        --container_border_dark: rgba(71, 85, 105, 1);
        
        /* Grid specific dark mode */
        --grid_item_bg_1: rgba(30, 41, 59, 1);
        --grid_item_bg_2: rgba(39, 50, 71, 1);
        --grid_item_hover_bg: rgba(76, 29, 149, 1); /* Darker purple */
        
        /* Card specific dark mode */
        --card_bg: rgba(30, 41, 59, 1);
        --card_header_bg: rgba(15, 23, 42, 1);
        --card_footer_bg: rgba(15, 23, 42, 1);
        
        /* Table specific dark mode */
        --table_header_bg: var(--container_dark);
        --table_row_even: rgba(30, 41, 59, 1);
        --table_row_odd: rgba(39, 50, 71, 1);
        --table_row_hover: rgba(76, 29, 149, 1);
        
        /* Alternate table colors for dark mode */
        --table_alt_even: rgba(35, 46, 56, 1);
        --table_alt_odd: rgba(28, 38, 47, 1);
        
        /* Hero specific dark mode */
        --hero_light_bg: var(--container_dark);
        
        /* Adjust shadows for dark mode */
        --container_shadow_sm: 0 1px 3px rgba(0, 0, 0, 0.3);
        --container_shadow_md: 0 4px 6px rgba(0, 0, 0, 0.2);
        --container_shadow_lg: 0 10px 15px rgba(0, 0, 0, 0.25);
    }
}

/* Mobile-first responsive adjustments */
@media (max-width: 480px) {
    :root {
        --container_pad_md: 10px;
        --container_pad_lg: 12px;
        --container_gap_md: 12px;
        --container_gap_lg: 16px;
    }
}

@media (min-width: 768px) {
    :root {
        --container_gap_lg: 24px;
        --container_gap_xl: 32px;
    }
}

/* === GRID CONTAINERS === */
.grid_container_2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--container_gap_md);
    width: 100%;
}

.grid_container_3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--container_gap_md);
    width: 100%;
}

.grid_container_4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--container_gap_md);
    width: 100%;
}

/* Modern grid with auto-fit */
.grid_modern {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--container_gap_md);
    width: 100%;
}

/* Single child centering */
.grid_container_2:has(.content_box:only-child),
.grid_container_3:has(.content_box:only-child),
.grid_container_4:has(.content_box:only-child),
.grid_modern:has(.content_box:only-child) {
    display: flex;
    justify-content: center;
}

.grid_container_2:has(.content_box:only-child) .content_box,
.grid_container_3:has(.content_box:only-child) .content_box,
.grid_container_4:has(.content_box:only-child) .content_box,
.grid_modern:has(.content_box:only-child) .content_box {
    width: 100%;
}

/* Content box styling with modern enhancements */
.content_box {
    padding: var(--container_pad_md);
    border-radius: var(--container_radius_md);
    box-shadow: var(--container_shadow_sm);
    text-align: left;
    background-color: var(--container_light);
    color: var(--container_text_on_light);
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), 
                box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

.content_box:hover {
    transform: translateY(-2px);
    box-shadow: var(--container_shadow_md);
}

/* Alternating Grid Items with Underground Theme */
.grid_container_2 > *:nth-child(4n+1),
.grid_container_2 > *:nth-child(4n+4),
.grid_container_3 > *:nth-child(4n+1),
.grid_container_3 > *:nth-child(4n+4),
.grid_container_4 > *:nth-child(4n+1),
.grid_container_4 > *:nth-child(4n+4),
.grid_modern > *:nth-child(4n+1),
.grid_modern > *:nth-child(4n+4) {
    background-color: var(--grid_item_bg_1);
}

.grid_container_2 > *:nth-child(4n+2),
.grid_container_2 > *:nth-child(4n+3),
.grid_container_3 > *:nth-child(4n+2),
.grid_container_3 > *:nth-child(4n+3),
.grid_container_4 > *:nth-child(4n+2),
.grid_container_4 > *:nth-child(4n+3),
.grid_modern > *:nth-child(4n+2),
.grid_modern > *:nth-child(4n+3) {
    background-color: var(--grid_item_bg_2);
}

.grid_container_2 > *:hover,
.grid_container_3 > *:hover,
.grid_container_4 > *:hover,
.grid_modern > *:hover {
    background-color: var(--grid_item_hover_bg);
}

/* === ROW & COLUMN LAYOUTS === */

/* Row-based layouts */
.two_rows {
    display: grid;
    grid-template-rows: repeat(2, auto);
    gap: var(--container_gap_md);
}

.three_rows {
    display: grid;
    grid-template-rows: repeat(3, auto);
    gap: var(--container_gap_md);
}

.four_rows {
    display: grid;
    grid-template-rows: repeat(4, auto);
    gap: var(--container_gap_md);
}

.five_rows {
    display: grid;
    grid-template-rows: repeat(5, auto);
    gap: var(--container_gap_md);
}

/* Column-based layouts */
.two_columns { 
    display: grid; 
    grid-template-columns: repeat(2, 1fr); 
    gap: var(--container_gap_md); 
}

.three_columns { 
    display: grid; 
    grid-template-columns: repeat(3, 1fr);
    gap: var(--container_gap_md); 
}

.four_columns { 
    display: grid; 
    grid-template-columns: repeat(4, 1fr);
    gap: var(--container_gap_md); 
}

/* === SPECIAL SHAPE LAYOUTS === */

/* L-shaped layout */
.l_shape {
    display: grid;
    grid-template-areas: 
        "a ."
        "a b";
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: var(--container_gap_md);
}

.l_shape .vertical_part {
    grid-area: a;
}

.l_shape .horizontal_part {
    grid-area: b;
}

/* Inverted L shape */
.inverted_l_shape {
    display: grid;
    grid-template-areas: 
        ". a"
        "b a";
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: var(--container_gap_md);
}

.inverted_l_shape .vertical_part {
    grid-area: a;
}

.inverted_l_shape .horizontal_part {
    grid-area: b;
}

/* 7 shape */
.shape_7 {
    display: grid;
    grid-template-areas: 
        "a a"
        ". b";
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: var(--container_gap_md);
}

.shape_7 .horizontal_part {
    grid-area: a;
}

.shape_7 .vertical_part {
    grid-area: b;
}

/* Inverted 7 shape */
.inverted_7_shape {
    display: grid;
    grid-template-areas: 
        "a b"
        ". a";
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: var(--container_gap_md);
}

.inverted_7_shape .part_a {
    grid-area: a;
}

.inverted_7_shape .part_b {
    grid-area: b;
}

/* === FLEX CONTAINER === */
.flex_container {
    display: flex;
    flex-wrap: wrap;
    gap: var(--container_gap_lg);
    justify-content: center;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--container_pad_lg);
    background-color: var(--container_light);
    color: var(--container_text_on_light);
    border-radius: var(--container_radius_md);
    box-shadow: var(--container_shadow_md);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.flex_item {
    flex: 1 1 300px;
    min-height: 200px;
    padding: var(--container_pad_md);
    background-color: var(--grid_item_bg_2);
    border-radius: var(--container_radius_sm);
    box-shadow: var(--container_shadow_sm);
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), 
                box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

.flex_item:hover {
    transform: translateY(-2px);
    box-shadow: var(--container_shadow_lg);
}

/* === CARD LAYOUTS === */
.card_container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--container_gap_lg);
    width: 100%;
}

.card {
    display: flex;
    flex-direction: column;
    background-color: var(--card_bg);
    border-radius: var(--container_radius_md);
    box-shadow: var(--container_shadow_sm);
    overflow: hidden;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), 
                box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: var(--container_shadow_lg);
}

.card_header {
    padding: var(--container_pad_md);
    background-color: var(--card_header_bg);
    border-bottom: 1px solid var(--container_border_light);
    font-weight: 600;
}

.card_content {
    padding: var(--container_pad_md);
    flex-grow: 1;
    line-height: 1.6;
}

.card_footer {
    padding: var(--container_pad_sm) var(--container_pad_md);
    background-color: var(--card_footer_bg);
    border-top: 1px solid var(--container_border_light);
}

/* === MASONRY LAYOUT === */
.masonry_container {
    columns: 3 250px;
    column-gap: var(--container_gap_lg);
    width: 100%;
}

.masonry_item {
    break-inside: avoid;
    margin-bottom: var(--container_gap_md);
    border-radius: var(--container_radius_md);
    overflow: hidden;
    box-shadow: var(--container_shadow_sm);
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

.masonry_item:hover {
    transform: scale(1.02);
}

/* === HERO SECTION === */
.hero {
    padding: var(--container_pad_xl) var(--container_pad_md);
    background-color: var(--hero_bg);
    color: var(--container_text_on_dark);
    text-align: left;
    position: relative;
    overflow: hidden;
}

.hero_title {
    font-size: 2.5rem;
    margin-bottom: var(--container_gap_md);
    font-weight: 700;
    background: linear-gradient(135deg, var(--container_secondary), var(--container_accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero_subtitle {
    font-size: 1.25rem;
    margin-bottom: var(--container_gap_lg);
    opacity: 0.9;
    line-height: 1.6;
}

.hero_light {
    background-color: var(--hero_light_bg);
    color: var(--container_text_on_light);
}

.hero_dark {
    background-color: var(--hero_dark_bg);
    color: var(--container_text_on_dark);
}

.hero_gradient {
    background: linear-gradient(135deg, var(--hero_gradient_start), var(--hero_gradient_end));
    color: var(--container_text_on_dark);
}

.hero_content {
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.hero_actions {
    display: flex;
    gap: var(--container_gap_md);
    justify-content: center;
    margin-top: var(--container_gap_lg);
    flex-wrap: wrap;
}

/* Full-width hero with background image */
.hero_bg_image {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}

.hero_bg_image::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--hero_overlay_bg);
    z-index: 1;
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
}

.hero_bg_image .hero_content {
    position: relative;
    z-index: 2;
}

/* Split hero (text on one side, image on other) */
.hero_split {
    display: flex;
    align-items: center;
    padding: 0;
    text-align: left;
    overflow: hidden;
    min-height: 500px;
}

.hero_split_content {
    flex: 1;
    padding: var(--container_pad_xl);
    z-index: 2;
}

.hero_split_image {
    flex: 1;
    height: 100%;
    min-height: 400px;
    background-size: cover;
    background-position: center;
    position: relative;
}

/* === TABLES === */
table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: var(--container_gap_md);
    position: relative;
    z-index: 1;
    border-radius: var(--container_radius_md);
    overflow: hidden;
    box-shadow: var(--container_shadow_sm);
}

th, td {
    padding: var(--container_pad_sm);
    text-align: left;
    border-bottom: 1px solid var(--container_border_light);
}

th {
    background-color: var(--table_header_bg);
    color: var(--container_text_on_dark);
    font-weight: 600;
    position: sticky;
    top: 0;
    z-index: 2;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Standard alternating row colors for tables with hover */
tr:nth-child(even) {
    background-color: var(--table_row_even);
}

tr:nth-child(odd) {
    background-color: var(--table_row_odd);
}

tbody tr:hover {
    background-color: var(--table_row_hover);
    position: relative;
    z-index: 3;
    box-shadow: var(--container_shadow_sm);
    transform: scale(1.01);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Table with alternating pairs of rows (for master-detail views) */
.table_paired tr:nth-child(4n+1),
.table_paired tr:nth-child(4n+2) {
    background-color: var(--table_row_even);
}

.table_paired tr:nth-child(4n+3),
.table_paired tr:nth-child(4n+4) {
    background-color: var(--table_row_odd);
}

/* Alternate color scheme for regular alternating rows */
.table_alt tr:nth-child(even) {
    background-color: var(--table_alt_even);
}

.table_alt tr:nth-child(odd) {
    background-color: var(--table_alt_odd);
}

/* Alternate color scheme for paired rows */
.table_paired_alt tr:nth-child(4n+1),
.table_paired_alt tr:nth-child(4n+2) {
    background-color: var(--table_alt_even);
}

.table_paired_alt tr:nth-child(4n+3),
.table_paired_alt tr:nth-child(4n+4) {
    background-color: var(--table_alt_odd);
}

/* Table hover effects for all table types */
.table_paired tbody tr:hover,
.table_alt tbody tr:hover,
.table_paired_alt tbody tr:hover {
    background-color: var(--table_row_hover);
    position: relative;
    z-index: 3;
    box-shadow: var(--container_shadow_sm);
    transform: scale(1.01);
}

/* Data tables with more pronounced styling */
.data_table {
    width: 100%;
    border-collapse: collapse;
    box-shadow: var(--container_shadow_md);
    border-radius: var(--container_radius_md);
    overflow: hidden;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.data_table th {
    background: linear-gradient(135deg, var(--data_table_header_bg), var(--container_secondary));
    color: var(--container_text_on_dark);
    font-weight: 600;
    padding: var(--container_pad_md) var(--container_pad_sm);
    text-align: left;
    position: sticky;
    top: 0;
    z-index: 2;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 0.75rem;
}

.data_table tr:nth-child(even) {
    background-color: var(--table_row_even);
}

.data_table tr:nth-child(odd) {
    background-color: var(--table_row_odd);
}

.data_table tbody tr:hover {
    background-color: var(--table_row_hover);
    position: relative;
    z-index: 3;
    transform: scale(1.01);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.data_table td {
    padding: var(--container_pad_sm);
    border-bottom: 1px solid var(--container_border_light);
    font-size: 0.875rem;
}

/* === RESPONSIVE ADJUSTMENTS === */
@media (max-width: 800px) {
    /* Grid container adjustments */
    .grid_container_3,
    .grid_container_4 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Hero adjustments */
    .hero {
        padding: var(--container_pad_lg) var(--container_pad_sm);
    }
    
    .hero_title {
        font-size: 2rem;
    }
    
    .hero_subtitle {
        font-size: 1.1rem;
    }
    
    .hero_split {
        flex-direction: column;
        min-height: auto;
    }
    
    .hero_split_content,
    .hero_split_image {
        flex: none;
        width: 100%;
    }
    
    .hero_split_content {
        padding: var(--container_pad_lg) var(--container_pad_md);
    }
    
    .hero_split_image {
        min-height: 250px;
    }
    
    .hero_actions {
        flex-direction: column;
        align-items: center;
        gap: var(--container_gap_sm);
    }
    
    /* Adjust masonry for tablets */
    .masonry_container {
        columns: 2 200px;
        column-gap: var(--container_gap_md);
    }
}

@media (max-width: 500px) {
    /* Grid container adjustments */
    .grid_container_2,
    .grid_container_3,
    .grid_container_4,
    .grid_modern {
        grid-template-columns: 1fr;
    }
    
    /* Shape adjustments */
    .l_shape,
    .inverted_l_shape,
    .shape_7,
    .inverted_7_shape {
        grid-template-areas: 
            "a"
            "b";
        grid-template-columns: 1fr;
    }
    
    .two_columns,
    .three_columns,
    .four_columns {
        grid-template-columns: 1fr;
    }
    
    /* Hero adjustments */
    .hero {
        padding: var(--container_pad_md) var(--container_pad_xs);
    }
    
    .hero_title {
        font-size: 1.75rem;
        margin-bottom: var(--container_gap_sm);
    }
    
    .hero_subtitle {
        font-size: 1rem;
        margin-bottom: var(--container_gap_md);
    }
    
    /* Single column masonry on mobile */
    .masonry_container {
        columns: 1;
        column-gap: 0;
    }
    
    /* Table responsiveness */
    table {
        font-size: 0.75rem;
    }
    
    th, td {
        padding: var(--container_pad_xs);
    }
}

/* === CONTAINER QUERIES (Progressive Enhancement) === */
@supports (container-type: inline-size) {
    .container_responsive {
        container-type: inline-size;
    }
    
    @container (max-width: 400px) {
        .card_header,
        .card_content,
        .card_footer {
            padding: var(--container_pad_sm);
        }
    }
    
    @container (min-width: 600px) {
        .flex_item {
            min-height: 250px;
        }
    }
}

/* === DARK MODE SUPPORT === */
@media (prefers-color-scheme: dark) {
    .grid_container_2 > *:nth-child(4n+1),
    .grid_container_2 > *:nth-child(4n+4),
    .grid_container_3 > *:nth-child(4n+1),
    .grid_container_3 > *:nth-child(4n+4),
    .grid_container_4 > *:nth-child(4n+1),
    .grid_container_4 > *:nth-child(4n+4),
    .grid_modern > *:nth-child(4n+1),
    .grid_modern > *:nth-child(4n+4) {
        background-color: var(--grid_item_bg_1);
    }

    .grid_container_2 > *:nth-child(4n+2),
    .grid_container_2 > *:nth-child(4n+3),
    .grid_container_3 > *:nth-child(4n+2),
    .grid_container_3 > *:nth-child(4n+3),
    .grid_container_4 > *:nth-child(4n+2),
    .grid_container_4 > *:nth-child(4n+3),
    .grid_modern > *:nth-child(4n+2),
    .grid_modern > *:nth-child(4n+3) {
        background-color: var(--grid_item_bg_2);
    }

    .grid_container_2 > *:hover,
    .grid_container_3 > *:hover,
    .grid_container_4 > *:hover,
    .grid_modern > *:hover {
        background-color: var(--grid_item_hover_bg);
    }
    
    .flex_item,
    .card {
        background-color: var(--card_bg);
        color: var(--container_text_on_dark);
    }
    
    .card_header,
    .card_footer {
        background-color: var(--card_header_bg);
        border-color: var(--container_border_dark);
    }
    
    .hero_light {
        background-color: var(--hero_light_bg);
        color: var(--container_text_on_dark);
    }
    
    th {
        background-color: var(--table_header_bg);
        border-bottom-color: var(--container_border_dark);
    }
    
    td {
        border-bottom-color: var(--container_border_dark);
    }
    
    tr:nth-child(even) {
        background-color: var(--table_row_even);
    }
    
    tr:nth-child(odd) {
        background-color: var(--table_row_odd);
    }
/* ── Responsive table wrapper ────────────────────────────────────────────── */
.table_responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ── Table column width helpers ──────────────────────────────────────────── */
.col_15  { width: 15%; }
.col_30  { width: 30%; }
.col_60  { width: 60px; }
.col_80  { width: 80px; }
.col_100 { width: 100px; }
.col_120 { width: 120px; }
.col_160 { width: 160px; }

/* ── Inline-edit row states (data tables) ────────────────────────────────── */
.config-row-readonly    { background: #fafafa; }
.config-row-readonly td { color: #aaa; }
.config-row.saving td   { opacity: 0.6; pointer-events: none; }
.config-row.saved td    { background-color: #e8f5e9; transition: background-color 1s; }
.config-row.error td    { background-color: #ffebee; transition: background-color 1s; }
.config-row-staged td:first-child { border-left: 3px solid #f57f17; }

/* ── Activity log note rows ──────────────────────────────────────────────── */
.notes_cell    { background-color: #f9f9f9; padding: 5px; border-bottom: 1px solid #ddd; }
.notes_content { white-space: pre-wrap; line-height: 1.5; }

/* === Info / Note Box === */
.info_box {
    color: #333;
    padding: 5px;
    background-color: white;
}