/* =====================================================
   MODAL LAYER 2 - Full Accordion Modal
   V4 Flag Engine Aligned

   All styles scoped under .l2-modal parent or prefixed
   with l2- to avoid collision with other components.
   ===================================================== */

/* =====================================================
   LAYER 2 OVERLAY CONTAINER
   ===================================================== */

.l2-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 10002;
    display: none;
    justify-content: center;
    align-items: flex-start;
    padding: 30px 20px;
    overflow-y: auto;
}

.l2-modal-overlay.active {
    display: flex;
}

.l2-modal-container {
    background: white;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    width: 100%;
    max-width: 900px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.l2-modal-close-bar {
    display: flex;
    justify-content: flex-end;
    padding: 8px 12px;
    background: #f8f9fa;
    border-bottom: 1px solid #e0e0e0;
}

.l2-modal-close-btn {
    background: none;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 4px 12px;
    font-size: 12px;
    color: #666;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
}

.l2-modal-close-btn:hover {
    background: #f0f0f0;
    color: #333;
}

.l2-modal-scroll {
    overflow-y: auto;
    flex: 1;
}

/* =====================================================
   MODAL HEADER
   ===================================================== */

.l2-modal .modal-header {
    background: #f8f9fa;
    padding: 16px 20px;
    border-bottom: 1px solid #e0e0e0;
}

.l2-modal .modal-header-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

.l2-modal .modal-title-section h2 {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 4px;
}

.l2-modal .modal-subtitle {
    font-size: 12px;
    color: #666;
}

.l2-modal .direction-badge {
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
}

.l2-modal .direction-badge.underbilled {
    background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
    color: #2e7d32;
}

.l2-modal .direction-badge.overbilled {
    background: linear-gradient(135deg, #ffebee 0%, #ffcdd2 100%);
    color: #c62828;
}

.l2-modal .direction-badge.balanced,
.l2-modal .direction-badge.match,
.l2-modal .direction-badge.info {
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    color: #1565c0;
}

.l2-modal .direction-badge.hidden-revenue {
    background: linear-gradient(135deg, #f3e5f5 0%, #e1bee7 100%);
    color: #7b1fa2;
}

/* Current Snapshot Summary */
.l2-modal .snapshot-summary {
    display: flex;
    gap: 16px;
    padding: 12px 16px;
    background: white;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
}

.l2-modal .snapshot-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.l2-modal .snapshot-item i {
    color: #1976d2;
    font-size: 14px;
}

.l2-modal .snapshot-label {
    font-size: 11px;
    color: #666;
}

.l2-modal .snapshot-value {
    font-size: 13px;
    font-weight: 600;
    color: #333;
}

.l2-modal .snapshot-divider {
    width: 1px;
    background: #e0e0e0;
}

/* =====================================================
   UNIFIED ACCORDION CONTAINER
   ===================================================== */

.l2-modal .accordion-container {
    border-top: 1px solid #e0e0e0;
}

.l2-modal .accordion-item {
    border-bottom: 1px solid #e8e8e8;
}

.l2-modal .accordion-item:last-child {
    border-bottom: none;
}

.l2-modal .accordion-header {
    display: flex;
    align-items: center;
    padding: 14px 20px;
    cursor: pointer;
    background: white;
    transition: background 0.2s;
    border: none;
    width: 100%;
    text-align: left;
    font-family: inherit;
}

.l2-modal .accordion-header:hover {
    background: #f5f5f5;
}

.l2-modal .accordion-header i:first-child {
    width: 24px;
    color: #1976d2;
    font-size: 14px;
}

.l2-modal .accordion-header .title {
    flex: 1;
    font-size: 13px;
    font-weight: 500;
    color: #333;
}

.l2-modal .accordion-badge {
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    margin-right: 12px;
}

.l2-modal .accordion-badge.state { background: #e3f2fd; color: #1565c0; }
.l2-modal .accordion-badge.ok { background: #e8f5e9; color: #2e7d32; }
.l2-modal .accordion-badge.underbilled { background: #e8f5e9; color: #2e7d32; }
.l2-modal .accordion-badge.overbilled { background: #ffebee; color: #c62828; }
.l2-modal .accordion-badge.count { background: #f5f5f5; color: #666; }
.l2-modal .accordion-badge.priority-high { background: #ffebee; color: #c62828; }
.l2-modal .accordion-badge.priority-medium { background: #fff3e0; color: #e65100; }
.l2-modal .accordion-badge.priority-low { background: #e8f5e9; color: #2e7d32; }
.l2-modal .accordion-badge.confidence-high { background: #e8f5e9; color: #2e7d32; }
.l2-modal .accordion-badge.confidence-medium { background: #fff3e0; color: #e65100; }
.l2-modal .accordion-badge.confidence-low { background: #ffebee; color: #c62828; }
.l2-modal .accordion-badge.trend-stable { background: #e3f2fd; color: #1565c0; }
.l2-modal .accordion-badge.trend-improving { background: #e8f5e9; color: #2e7d32; }
.l2-modal .accordion-badge.trend-worsening { background: #ffebee; color: #c62828; }
.l2-modal .accordion-badge.trend-unknown { background: #f5f5f5; color: #666; }

.l2-modal .accordion-arrow {
    color: #999;
    font-size: 12px;
    transition: transform 0.2s;
}

.l2-modal .accordion-item.expanded .accordion-arrow {
    transform: rotate(180deg);
}

.l2-modal .accordion-content {
    display: none;
    padding: 0 20px 16px 56px;
    background: #fafafa;
}

.l2-modal .accordion-item.expanded .accordion-content {
    display: block;
}

/* Nested accordion (Property Details) */
.l2-modal .nested-accordion {
    background: white;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    overflow: hidden;
}

.l2-modal .nested-accordion .accordion-item {
    border-bottom: 1px solid #f0f0f0;
}

.l2-modal .nested-accordion .accordion-header {
    padding: 10px 14px;
    background: #fafafa;
}

.l2-modal .nested-accordion .accordion-header:hover {
    background: #f0f0f0;
}

.l2-modal .nested-accordion .accordion-content {
    padding: 10px 14px 14px 40px;
    background: white;
}

.l2-modal .nested-accordion .accordion-header i:first-child {
    width: 20px;
    font-size: 12px;
}

.l2-modal .nested-accordion .accordion-header .title {
    font-size: 12px;
}

/* Content Grids */
.l2-modal .content-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.l2-modal .content-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 12px;
    background: white;
    border-radius: 4px;
    font-size: 12px;
}

.l2-modal .content-row .label {
    color: #666;
}

.l2-modal .content-row .value {
    font-weight: 500;
    color: #333;
}

/* =====================================================
   HEADER PERIOD SELECTOR (Global Filter)
   ===================================================== */

.l2-modal .period-selector-header {
    background: white;
    padding: 14px 16px;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    margin-top: 12px;
}

.l2-modal .period-selector-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.l2-modal .period-label {
    font-size: 12px;
    font-weight: 600;
    color: #1976d2;
    display: flex;
    align-items: center;
    gap: 6px;
}

.l2-modal .period-inputs {
    display: flex;
    align-items: center;
    gap: 8px;
}

.l2-modal .period-inputs input[type="date"] {
    padding: 6px 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 12px;
    width: 130px;
}

.l2-modal .period-inputs span {
    font-size: 12px;
    color: #666;
}

.l2-modal .period-divider {
    width: 1px;
    height: 24px;
    background: #e0e0e0;
    margin: 0 4px;
}

.l2-modal .quick-selects {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.l2-modal .quick-btn {
    padding: 5px 10px;
    background: #f5f5f5;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    font-size: 11px;
    color: #666;
    cursor: pointer;
    transition: all 0.2s;
}

.l2-modal .quick-btn:hover {
    background: #e3f2fd;
    border-color: #1976d2;
    color: #1976d2;
}

.l2-modal .quick-btn.active {
    background: #1976d2;
    border-color: #1976d2;
    color: white;
}

/* Historical Timeline Chart */
.l2-modal .historical-timeline {
    margin-top: 16px;
    background: white;
    padding: 16px;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
}

.l2-modal .timeline-chart {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 140px;
    padding: 12px 0;
}

.l2-modal .timeline-bar-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.l2-modal .timeline-bars {
    display: flex;
    gap: 2px;
    align-items: flex-end;
    height: 100px;
}

.l2-modal .timeline-bar {
    width: 14px;
    border-radius: 3px 3px 0 0;
    min-height: 4px;
}

.l2-modal .timeline-bar.billed { background: #90caf9; }
.l2-modal .timeline-bar.expected { background: #1976d2; }

.l2-modal .timeline-label {
    font-size: 10px;
    color: #666;
}

/* =====================================================
   V4 SECTIONS - PRIORITY, PORTFOLIO, TEMPORAL, CONFIDENCE
   ===================================================== */

/* Priority Score Display */
.l2-modal .priority-display {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.l2-modal .priority-score-circle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    flex-shrink: 0;
}

.l2-modal .priority-score-circle.high {
    background: linear-gradient(135deg, #ffebee 0%, #ffcdd2 100%);
    color: #c62828;
}

.l2-modal .priority-score-circle.medium {
    background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
    color: #e65100;
}

.l2-modal .priority-score-circle.low {
    background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
    color: #2e7d32;
}

.l2-modal .priority-score-value {
    font-size: 24px;
}

.l2-modal .priority-score-label {
    font-size: 10px;
    text-transform: uppercase;
}

.l2-modal .priority-factors {
    flex: 1;
}

.l2-modal .factor-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.l2-modal .factor-label {
    width: 120px;
    font-size: 12px;
    color: #666;
}

.l2-modal .factor-bar-container {
    flex: 1;
    height: 8px;
    background: #e0e0e0;
    border-radius: 4px;
    overflow: hidden;
}

.l2-modal .factor-bar {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s;
}

.l2-modal .factor-bar.impact { background: #1976d2; }
.l2-modal .factor-bar.persistence { background: #7b1fa2; }
.l2-modal .factor-bar.confidence { background: #388e3c; }
.l2-modal .factor-bar.recoverability { background: #f57c00; }

.l2-modal .factor-value {
    width: 40px;
    text-align: right;
    font-size: 12px;
    font-weight: 500;
}

/* Portfolio Chart */
.l2-modal .portfolio-chart {
    display: flex;
    gap: 16px;
}

.l2-modal .portfolio-bars {
    flex: 1;
}

.l2-modal .portfolio-bar-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.l2-modal .portfolio-bar-row .cause-name {
    width: 140px;
    font-size: 12px;
    color: #333;
}

.l2-modal .portfolio-bar-container {
    flex: 1;
    height: 20px;
    background: #f5f5f5;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

.l2-modal .portfolio-bar {
    height: 100%;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 8px;
    font-size: 11px;
    font-weight: 500;
    color: white;
}

.l2-modal .portfolio-bar.primary { background: #1976d2; }
.l2-modal .portfolio-bar.secondary { background: #42a5f5; }
.l2-modal .portfolio-bar.tertiary { background: #90caf9; color: #333; }

.l2-modal .portfolio-exposure {
    width: 80px;
    text-align: right;
    font-size: 12px;
    font-weight: 500;
    color: #333;
}

/* Temporal Display */
.l2-modal .temporal-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.l2-modal .temporal-card {
    background: white;
    padding: 14px;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    text-align: center;
}

.l2-modal .temporal-card-value {
    font-size: 20px;
    font-weight: 600;
    color: #333;
    margin-bottom: 4px;
}

.l2-modal .temporal-card-label {
    font-size: 11px;
    color: #666;
}

.l2-modal .temporal-card.trend-improving .temporal-card-value { color: #2e7d32; }
.l2-modal .temporal-card.trend-worsening .temporal-card-value { color: #c62828; }
.l2-modal .temporal-card.trend-stable .temporal-card-value { color: #1565c0; }

/* Confidence Display */
.l2-modal .confidence-display {
    display: flex;
    gap: 20px;
}

.l2-modal .confidence-badge-large {
    width: 100px;
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    flex-shrink: 0;
}

.l2-modal .confidence-badge-large.high {
    background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
    color: #2e7d32;
}

.l2-modal .confidence-badge-large.medium {
    background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
    color: #e65100;
}

.l2-modal .confidence-badge-large.low {
    background: linear-gradient(135deg, #ffebee 0%, #ffcdd2 100%);
    color: #c62828;
}

.l2-modal .confidence-level {
    font-size: 18px;
    font-weight: 700;
}

.l2-modal .confidence-subtitle {
    font-size: 10px;
    margin-top: 4px;
}

.l2-modal .plausibility-tests {
    flex: 1;
}

.l2-modal .plausibility-title {
    font-size: 12px;
    font-weight: 600;
    color: #333;
    margin-bottom: 10px;
}

.l2-modal .test-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
}

.l2-modal .test-row:last-child {
    border-bottom: none;
}

.l2-modal .test-icon {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
}

.l2-modal .test-icon.passed { background: #e8f5e9; color: #2e7d32; }
.l2-modal .test-icon.failed { background: #ffebee; color: #c62828; }

.l2-modal .test-name {
    flex: 1;
    font-size: 12px;
    color: #333;
}

.l2-modal .test-result {
    font-size: 11px;
    font-weight: 500;
}

.l2-modal .test-result.passed { color: #2e7d32; }
.l2-modal .test-result.failed { color: #c62828; }

/* =====================================================
   V4 BASELINE COMPARISON (Dual-Baseline Analysis)
   ===================================================== */

/* Flag type colors */
.l2-modal .flag-type-data-quality { --flag-color: #1976d2; }
.l2-modal .flag-type-revenue { --flag-color: #c62828; }
.l2-modal .flag-type-compound { --flag-color: #f57c00; }
.l2-modal .flag-type-hidden-revenue { --flag-color: #7b1fa2; }
.l2-modal .flag-type-insufficient { --flag-color: #757575; }
.l2-modal .flag-type-none { --flag-color: #388e3c; }

.l2-modal .accordion-badge.baseline-data-quality { background: #1976d2; color: white; }
.l2-modal .accordion-badge.baseline-revenue { background: #c62828; color: white; }
.l2-modal .accordion-badge.baseline-compound { background: #f57c00; color: white; }
.l2-modal .accordion-badge.baseline-hidden-revenue { background: #7b1fa2; color: white; }
.l2-modal .accordion-badge.baseline-insufficient { background: #757575; color: white; }
.l2-modal .accordion-badge.baseline-none { background: #388e3c; color: white; }

.l2-modal .baseline-display {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.l2-modal .baseline-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.l2-modal .baseline-card {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
}

.l2-modal .baseline-card-header {
    padding: 10px 14px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.l2-modal .baseline-card.policy .baseline-card-header {
    background: linear-gradient(135deg, #e8eaf6 0%, #c5cae9 100%);
    color: #3949ab;
}

.l2-modal .baseline-card.reality .baseline-card-header {
    background: linear-gradient(135deg, #e0f2f1 0%, #b2dfdb 100%);
    color: #00796b;
}

.l2-modal .baseline-card-body {
    padding: 12px 14px;
}

.l2-modal .baseline-field {
    display: flex;
    justify-content: space-between;
    padding: 5px 0;
    font-size: 13px;
}

.l2-modal .baseline-field-label { color: #666; }
.l2-modal .baseline-field-value { font-weight: 500; }

.l2-modal .baseline-billed {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: #f5f5f5;
    border-radius: 8px;
}

.l2-modal .baseline-billed-label {
    font-size: 11px;
    text-transform: uppercase;
    color: #666;
}

.l2-modal .baseline-billed-amount {
    font-size: 18px;
    font-weight: 600;
}

.l2-modal .baseline-delta-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.l2-modal .baseline-delta-table th,
.l2-modal .baseline-delta-table td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid #e0e0e0;
}

.l2-modal .baseline-delta-table th {
    background: #f5f5f5;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #666;
    font-weight: 600;
}

.l2-modal .baseline-delta-value {
    font-weight: 500;
}

.l2-modal .baseline-delta-value.positive { color: #c62828; }
.l2-modal .baseline-delta-value.negative { color: #388e3c; }
.l2-modal .baseline-delta-value.muted { color: #bbb; text-decoration: line-through; }

.l2-modal .baseline-indicator {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
}

.l2-modal .baseline-indicator.actionable { background: #ffebee; color: #c62828; }
.l2-modal .baseline-indicator.noise { background: #e3f2fd; color: #1976d2; }
.l2-modal .baseline-indicator.match { background: #e8f5e9; color: #388e3c; }

.l2-modal .baseline-classification {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 14px;
}

.l2-modal .baseline-classification-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.l2-modal .baseline-classification-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 13px;
}

.l2-modal .baseline-classification-icon.data-quality { background: #1976d2; }
.l2-modal .baseline-classification-icon.revenue { background: #c62828; }
.l2-modal .baseline-classification-icon.compound { background: #f57c00; }
.l2-modal .baseline-classification-icon.hidden-revenue { background: #7b1fa2; }
.l2-modal .baseline-classification-icon.insufficient { background: #757575; }
.l2-modal .baseline-classification-icon.none { background: #388e3c; }

.l2-modal .baseline-classification-title {
    font-weight: 600;
    font-size: 14px;
}

.l2-modal .baseline-classification-desc {
    font-size: 12px;
    color: #555;
    line-height: 1.5;
}

.l2-modal .baseline-evidence {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #e0e0e0;
}

.l2-modal .baseline-evidence-title {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    color: #666;
    margin-bottom: 8px;
}

.l2-modal .baseline-evidence-item {
    display: flex;
    align-items: center;
    padding: 6px 0;
    font-size: 12px;
}

.l2-modal .baseline-evidence-icon {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    font-size: 9px;
}

.l2-modal .baseline-evidence-icon.valid { background: #e8f5e9; color: #388e3c; }
.l2-modal .baseline-evidence-icon.invalid { background: #f5f5f5; color: #bbb; }

.l2-modal .baseline-evidence-source { flex: 1; }
.l2-modal .baseline-evidence-inferred { font-weight: 500; margin-right: 10px; }
.l2-modal .baseline-evidence-weight {
    font-size: 10px;
    background: #f0f0f0;
    padding: 2px 6px;
    border-radius: 3px;
    color: #666;
}

.l2-modal .baseline-recommendation {
    margin-top: 12px;
    padding: 12px;
    background: #fff8e1;
    border-radius: 6px;
    font-size: 12px;
    color: #e65100;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.l2-modal .baseline-recommendation i { margin-top: 2px; }

/* =====================================================
   BILLING ANALYSIS WITH DRILL-DOWNS
   ===================================================== */

.l2-modal .billing-summary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 12px;
}

.l2-modal .billing-card {
    padding: 16px;
    border-radius: 8px;
    text-align: center;
}

.l2-modal .billing-card.billed { background: #f5f5f5; }
.l2-modal .billing-card.expected { background: #e3f2fd; }

.l2-modal .billing-card .amount {
    font-size: 22px;
    font-weight: 700;
    color: #333;
}

.l2-modal .billing-card .label {
    font-size: 11px;
    color: #666;
    margin-top: 4px;
}

.l2-modal .billing-delta-bar {
    padding: 14px;
    border-radius: 8px;
    text-align: center;
}

.l2-modal .billing-delta-bar.underbilled {
    background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
}

.l2-modal .billing-delta-bar.overbilled {
    background: linear-gradient(135deg, #ffebee 0%, #ffcdd2 100%);
}

.l2-modal .billing-delta-bar.match {
    background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
    border-left: 4px solid #e65100;
}

.l2-modal .delta-amount {
    font-size: 26px;
    font-weight: 700;
}

.l2-modal .delta-amount.underbilled { color: #2e7d32; }
.l2-modal .delta-amount.overbilled { color: #c62828; }
.l2-modal .delta-amount.match { color: #e65100; }

.l2-modal .delta-label {
    font-size: 12px;
    font-weight: 500;
    margin-top: 4px;
}

.l2-modal .delta-label.underbilled { color: #388e3c; }
.l2-modal .delta-label.overbilled { color: #d32f2f; }

/* Gross vs Net */
.l2-modal .gross-net-row {
    display: flex;
    gap: 12px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed #e0e0e0;
}

.l2-modal .gross-net-item {
    flex: 1;
    padding: 10px;
    background: #f8f9fa;
    border-radius: 6px;
    text-align: center;
}

.l2-modal .gross-net-value {
    font-size: 16px;
    font-weight: 600;
}

.l2-modal .gross-net-label {
    font-size: 10px;
    color: #666;
    margin-top: 2px;
}

/* Drill-down buttons */
.l2-modal .drill-down-bar {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed #e0e0e0;
}

.l2-modal .drill-btn {
    padding: 8px 14px;
    background: #f5f5f5;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    font-size: 12px;
    color: #1976d2;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
}

.l2-modal .drill-btn:hover {
    background: #e3f2fd;
    border-color: #1976d2;
}

.l2-modal .drill-panel {
    display: none;
    margin-top: 12px;
    padding: 14px;
    background: white;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
}

.l2-modal .drill-panel.open {
    display: block;
}

.l2-modal .drill-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.l2-modal .drill-panel-title {
    font-size: 13px;
    font-weight: 600;
    color: #333;
}

.l2-modal .drill-close {
    background: none;
    border: none;
    color: #999;
    cursor: pointer;
}

/* =====================================================
   SERVICE BREAKDOWN
   ===================================================== */

.l2-modal .services-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.l2-modal .service-row {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    background: white;
    border-radius: 6px;
    border-left: 3px solid #e0e0e0;
}

.l2-modal .service-row.recovery { border-left-color: #4caf50; }
.l2-modal .service-row.refund { border-left-color: #f44336; }
.l2-modal .service-row.match { border-left-color: #2196f3; }

.l2-modal .service-name {
    font-weight: 600;
    font-size: 12px;
    width: 100px;
    color: #333;
}

.l2-modal .service-amounts {
    flex: 1;
    display: flex;
    gap: 16px;
    font-size: 11px;
    color: #666;
}

.l2-modal .service-status {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 4px;
}

.l2-modal .service-status.recovery { background: #e8f5e9; color: #2e7d32; }
.l2-modal .service-status.refund { background: #ffebee; color: #c62828; }
.l2-modal .service-status.match { background: #e3f2fd; color: #1565c0; }

/* =====================================================
   INVESTIGATION STATUS
   ===================================================== */

.l2-modal .investigation-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px 16px;
    align-items: center;
}

.l2-modal .investigation-label {
    font-size: 12px;
    color: #666;
}

.l2-modal .investigation-value {
    font-size: 13px;
    font-weight: 500;
    color: #333;
}

.l2-modal .status-select-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
}

.l2-modal .status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.l2-modal .status-dot.new { background: #00bcd4; }
.l2-modal .status-dot.in_progress { background: #ff9800; }
.l2-modal .status-dot.resolved { background: #4caf50; }

.l2-modal .status-select {
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 13px;
}

/* =====================================================
   FLAGS SECTION
   ===================================================== */

.l2-modal .flags-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.l2-modal .flag-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: #fff8e1;
    border-left: 3px solid #ff9800;
    border-radius: 0 6px 6px 0;
}

.l2-modal .flag-icon {
    color: #ff9800;
}

.l2-modal .flag-details {
    flex: 1;
}

.l2-modal .flag-code {
    font-size: 12px;
    font-weight: 500;
    color: #333;
}

.l2-modal .flag-desc {
    font-size: 11px;
    color: #666;
}

.l2-modal .flag-exposure {
    font-size: 13px;
    font-weight: 600;
    color: #c62828;
}

/* =====================================================
   VERIFICATION STEPS
   ===================================================== */

.l2-modal .steps-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.l2-modal .step-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px;
    background: white;
    border-radius: 6px;
}

.l2-modal .step-number {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #e3f2fd;
    color: #1976d2;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    flex-shrink: 0;
}

.l2-modal .step-content {
    flex: 1;
}

.l2-modal .step-title {
    font-size: 12px;
    font-weight: 500;
    color: #333;
}

.l2-modal .step-desc {
    font-size: 11px;
    color: #666;
    margin-top: 2px;
}

/* =====================================================
   RESOLUTION OPTIONS
   ===================================================== */

.l2-modal .resolution-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.l2-modal .form-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.l2-modal .form-row label {
    font-size: 12px;
    font-weight: 500;
    color: #333;
}

.l2-modal .form-row select,
.l2-modal .form-row textarea {
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 13px;
    font-family: inherit;
}

.l2-modal .form-row textarea {
    min-height: 60px;
    resize: vertical;
}

.l2-modal .action-buttons {
    display: flex;
    gap: 10px;
}

.l2-modal .action-btn {
    flex: 1;
    padding: 10px;
    border: none;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.l2-modal .action-btn.resolve { background: #4caf50; color: white; }
.l2-modal .action-btn.escalate { background: #ff9800; color: white; }
.l2-modal .action-btn.dismiss { background: #9e9e9e; color: white; }

/* =====================================================
   EVIDENCE OF OCCUPANCY
   ===================================================== */

.l2-modal .evidence-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.l2-modal .evidence-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: white;
    border-radius: 8px;
}

.l2-modal .evidence-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.l2-modal .evidence-icon.electricity { background: #fff3e0; color: #f57c00; }
.l2-modal .evidence-icon.water { background: #e3f2fd; color: #1976d2; }

.l2-modal .evidence-details { flex: 1; }

.l2-modal .evidence-value {
    font-size: 16px;
    font-weight: 600;
    color: #333;
}

.l2-modal .evidence-label {
    font-size: 11px;
    color: #666;
}

.l2-modal .evidence-check {
    color: #4caf50;
    font-size: 16px;
}

.l2-modal .evidence-conclusion {
    margin-top: 12px;
    padding: 10px;
    border-radius: 6px;
    text-align: center;
    font-size: 12px;
    font-weight: 500;
}

.l2-modal .evidence-conclusion.confirmed { background: #e8f5e9; color: #2e7d32; }
.l2-modal .evidence-conclusion.unconfirmed { background: #ffebee; color: #c62828; }

/* =====================================================
   TIMELINE (Status History)
   ===================================================== */

.l2-timeline {
    position: relative;
    padding-left: 20px;
}

.l2-timeline::before {
    content: '';
    position: absolute;
    left: 5px;
    top: 4px;
    bottom: 4px;
    width: 2px;
    background: #e0e0e0;
}

.l2-timeline-item {
    position: relative;
    display: flex;
    gap: 10px;
    padding-bottom: 12px;
}

.l2-timeline-item:last-child {
    padding-bottom: 0;
}

.l2-timeline-dot {
    position: absolute;
    left: -18px;
    top: 4px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #1565c0;
    border: 2px solid white;
    box-shadow: 0 0 0 1px #1565c0;
}

.l2-timeline-content {
    flex: 1;
    line-height: 1.4;
}