/**
 * Shared Modal Styles for MOS Dashboard
 * ======================================
 * Consistent styling across all dashboard views.
 * Include this CSS in all dashboard HTML files.
 */

/* =====================================================
   MODAL SECTIONS - BASE STYLES
   ===================================================== */

.modal-section {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 12px;
}

.modal-section-title {
    font-size: 12px;
    font-weight: 600;
    color: #1976d2;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.modal-section-title.clickable {
    cursor: pointer;
}

.modal-section-title.clickable:hover {
    color: #1565c0;
}

/* =====================================================
   INFO GRID
   ===================================================== */

.info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.info-item {
    background: white;
    padding: 8px 10px;
    border-radius: 6px;
}

.info-item.full-width {
    grid-column: 1 / -1;
}

.info-label {
    font-size: 10px;
    color: #888;
    text-transform: uppercase;
    margin-bottom: 2px;
}

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

.info-value.highlight {
    color: #1976d2;
}

/* =====================================================
   RISK BADGE
   ===================================================== */

.risk-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
}

.risk-badge.critical {
    background: #ffebee;
    color: #c62828;
}

.risk-badge.high {
    background: #fff3e0;
    color: #e65100;
}

.risk-badge.medium {
    background: #fff8e1;
    color: #f57c00;
}

.risk-badge.low {
    background: #e8f5e9;
    color: #2e7d32;
}

/* =====================================================
   TENANT / INDIGENT INDICATORS
   ===================================================== */

.tenant-indicator {
    font-size: 10px;
    color: #666;
    font-weight: normal;
    margin-left: 4px;
}

.indigent-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #e8f5e9;
    color: #2e7d32;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
}

/* =====================================================
   PROPERTY DETAILS
   ===================================================== */

.property-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.property-detail-item {
    background: white;
    padding: 8px 10px;
    border-radius: 6px;
}

.property-detail-label {
    font-size: 10px;
    color: #888;
    text-transform: uppercase;
    margin-bottom: 2px;
}

.property-detail-value {
    font-size: 13px;
    color: #333;
    font-weight: 500;
}

.property-detail-value.highlight {
    color: #2e7d32;
    font-weight: 600;
}

/* =====================================================
   OWNERSHIP SECTION
   ===================================================== */

.ownership-section {
    background: #f3e5f5;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 12px;
}

.ownership-section .section-header {
    font-size: 12px;
    font-weight: 600;
    color: #7b1fa2;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.ownership-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.ownership-item {
    background: white;
    padding: 6px 10px;
    border-radius: 4px;
}

.ownership-label {
    font-size: 10px;
    color: #888;
    text-transform: uppercase;
}

.ownership-value {
    font-size: 12px;
    color: #333;
    font-weight: 500;
}

.ownership-value.highlight {
    color: #7b1fa2;
}

.transfer-alert {
    margin-top: 10px;
    padding: 8px;
    background: #fff3e0;
    border-radius: 4px;
    font-size: 11px;
    color: #e65100;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* =====================================================
   FINANCIAL POSITION
   ===================================================== */

.financial-position-section {
    background: #e3f2fd;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 12px;
}

.financial-position-section .section-header {
    font-size: 12px;
    font-weight: 600;
    color: #1565c0;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.financial-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.financial-item {
    background: white;
    padding: 8px 10px;
    border-radius: 4px;
}

.financial-item.full-width {
    grid-column: 1 / -1;
}

.financial-label {
    font-size: 10px;
    color: #888;
    text-transform: uppercase;
}

.financial-value {
    font-size: 13px;
    font-weight: 600;
}

.financial-value.balance {
    color: #c62828;
}

.financial-value.positive {
    color: #2e7d32;
}

.financial-pending {
    text-align: center;
    padding: 20px;
    color: #888;
}

.financial-pending i {
    font-size: 24px;
    margin-bottom: 8px;
    display: block;
}

.pending-text {
    font-weight: 500;
    color: #666;
}

.pending-subtext {
    font-size: 11px;
    margin-top: 4px;
}

.payment-status-badge {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 600;
}

.payment-status-badge.current {
    background: #e8f5e9;
    color: #2e7d32;
}

.payment-status-badge.overdue {
    background: #ffebee;
    color: #c62828;
}

.arrears-breakdown {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}

.arrears-chip {
    background: #fff3e0;
    color: #e65100;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10px;
}

.arrears-chip.overdue {
    background: #ffebee;
    color: #c62828;
}

/* =====================================================
   SERVICE SUMMARY STRIP
   ===================================================== */

.service-summary-strip {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 4px 0;
}

.service-card {
    flex: 1;
    min-width: 55px;
    background: white;
    border-radius: 6px;
    padding: 8px 6px;
    text-align: center;
    border: 2px solid transparent;
    transition: all 0.2s;
}

.service-card.current-service {
    border-color: #1976d2;
    background: #e3f2fd;
}

.service-card.no-data {
    opacity: 0.5;
}

.service-card.total-card {
    background: #263238;
    color: white;
}

.service-card-header {
    font-size: 9px;
    font-weight: 600;
    color: #666;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
}

.service-card.total-card .service-card-header {
    color: #90a4ae;
}

.service-card-value {
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 2px;
}

.service-card-value.underbilled {
    color: #2e7d32;
}

.service-card-value.overbilled {
    color: #c62828;
}

.service-card-value.ok {
    color: #666;
}

.service-card.total-card .service-card-value {
    color: white;
}

.service-card.total-card .service-card-value.underbilled {
    color: #81c784;
}

.service-card.total-card .service-card-value.overbilled {
    color: #ef9a9a;
}

.service-card-status {
    font-size: 8px;
    font-weight: 600;
    text-transform: uppercase;
    padding: 1px 4px;
    border-radius: 2px;
}

.service-card-status.underbilled {
    background: #e8f5e9;
    color: #2e7d32;
}

.service-card-status.overbilled {
    background: #ffebee;
    color: #c62828;
}

.service-card-status.ok {
    background: #f5f5f5;
    color: #888;
}

.service-card.total-card .service-card-status {
    background: rgba(255,255,255,0.2);
}

/* =====================================================
   FLAGS LIST
   ===================================================== */

.flags-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.flag-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #fff3e0;
    color: #e65100;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
}

.flag-item i {
    font-size: 10px;
}

/* =====================================================
   TIMELINE CHART
   ===================================================== */

.timeline-container {
    overflow-x: auto;
    padding: 8px 0;
}

.timeline-grid {
    display: flex;
    gap: 4px;
    min-width: max-content;
}

.timeline-bar {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 40px;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: background 0.2s;
}

.timeline-bar:hover {
    background: rgba(0,0,0,0.05);
}

.bar-visual {
    display: flex;
    gap: 2px;
    align-items: flex-end;
    height: 60px;
    margin-bottom: 4px;
}

.bar-segment {
    width: 12px;
    border-radius: 2px 2px 0 0;
    min-height: 4px;
}

.bar-billed {
    background: #1976d2;
}

.bar-expected {
    background: #81c784;
}

.bar-label {
    font-size: 9px;
    color: #666;
    margin-bottom: 2px;
}

.bar-status {
    font-size: 8px;
    font-weight: 600;
    text-transform: uppercase;
    padding: 1px 4px;
    border-radius: 2px;
}

.bar-status.OVER,
.bar-status.OVERBILLED {
    background: #ffebee;
    color: #c62828;
}

.bar-status.UNDER,
.bar-status.UNDERBILLED {
    background: #e8f5e9;
    color: #2e7d32;
}

.bar-status.OK {
    background: #f5f5f5;
    color: #888;
}

/* =====================================================
   TIMELINE TOOLTIP
   ===================================================== */

.mos-timeline-tooltip {
    position: absolute;
    background: #263238;
    color: white;
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 11px;
    z-index: 10000;
    pointer-events: none;
    min-width: 140px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.tooltip-header {
    font-weight: 600;
    margin-bottom: 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(255,255,255,0.2);
}

.tooltip-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 3px;
}

.tooltip-label {
    color: #90a4ae;
}

.tooltip-value {
    font-weight: 500;
}

.tooltip-value.positive {
    color: #ef9a9a;
}

.tooltip-value.negative {
    color: #81c784;
}

.tooltip-divider {
    height: 1px;
    background: rgba(255,255,255,0.2);
    margin: 6px 0;
}

/* =====================================================
   READING QUALITY
   ===================================================== */

.reading-quality {
    background: white;
    border-radius: 6px;
    padding: 10px;
}

.reading-quality-bars {
    display: flex;
    height: 20px;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 8px;
}

.rq-bar {
    transition: width 0.3s;
}

.rq-bar.A { background: #4caf50; }
.rq-bar.E { background: #ff9800; }
.rq-bar.I { background: #f44336; }
.rq-bar.N { background: #9e9e9e; }
.rq-bar.M { background: #2196f3; }
.rq-bar.U { background: #607d8b; }

.reading-quality-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.rq-legend-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    color: #666;
}

.rq-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 2px;
}

.rq-legend-dot.A { background: #4caf50; }
.rq-legend-dot.E { background: #ff9800; }
.rq-legend-dot.I { background: #f44336; }
.rq-legend-dot.N { background: #9e9e9e; }
.rq-legend-dot.M { background: #2196f3; }
.rq-legend-dot.U { background: #607d8b; }

/* =====================================================
   AUDIT TRAIL
   ===================================================== */

.audit-section {
    background: #fafafa;
    border: 1px solid #e0e0e0;
}

.audit-content {
    padding-top: 8px;
}

.audit-item {
    margin-bottom: 8px;
}

.audit-label {
    font-size: 10px;
    color: #888;
    text-transform: uppercase;
    margin-bottom: 4px;
    font-weight: 600;
}

.audit-value {
    font-size: 12px;
    color: #333;
    background: white;
    padding: 6px 8px;
    border-radius: 4px;
}

.audit-input-row {
    display: flex;
    justify-content: space-between;
    padding: 4px 8px;
    background: white;
    margin-bottom: 2px;
    border-radius: 2px;
    font-size: 11px;
}

.input-key {
    color: #666;
    text-transform: capitalize;
}

.input-value {
    color: #333;
    font-weight: 500;
    font-family: monospace;
}

.tier-table {
    width: 100%;
    font-size: 10px;
    border-collapse: collapse;
    background: white;
    border-radius: 4px;
    overflow: hidden;
}

.tier-table th {
    background: #f5f5f5;
    padding: 6px 8px;
    text-align: left;
    font-weight: 600;
    color: #666;
}

.tier-table td {
    padding: 6px 8px;
    border-top: 1px solid #eee;
}

.diagnosis-path {
    background: white;
    border-radius: 4px;
    padding: 8px;
}

.diagnosis-step {
    font-size: 11px;
    padding: 4px 0;
    color: #333;
    border-bottom: 1px solid #f0f0f0;
}

.diagnosis-step:last-child {
    border-bottom: none;
}

/* =====================================================
   ADMINISTRATIVE HISTORY
   ===================================================== */

.admin-history-info {
    background: white;
    border-radius: 6px;
    padding: 12px;
}

.history-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 12px;
    color: #666;
    margin-bottom: 12px;
}

.history-note i {
    color: #1976d2;
    margin-top: 2px;
}

.history-link {
    font-size: 12px;
    color: #666;
}

.link-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #1976d2;
    color: white;
    padding: 6px 12px;
    border-radius: 4px;
    text-decoration: none;
    font-size: 11px;
    font-weight: 500;
    margin-top: 8px;
}

.link-btn:hover {
    background: #1565c0;
}

/* =====================================================
   CORRECTIVE ACTION
   ===================================================== */

.action-content {
    background: white;
    border-radius: 6px;
    padding: 10px;
}

.action-item {
    display: flex;
    gap: 8px;
    margin-bottom: 6px;
    font-size: 12px;
}

.action-label {
    color: #888;
    min-width: 50px;
}

.action-value {
    color: #333;
    font-weight: 500;
}

.action-instruction {
    background: #fff3e0;
    padding: 10px;
    border-radius: 4px;
    font-size: 12px;
    color: #e65100;
    margin-top: 8px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.action-instruction i {
    margin-top: 2px;
}

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

.investigation-status-section {
    background: #fafafa;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 12px;
}

.investigation-status-section .section-header {
    font-size: 12px;
    font-weight: 600;
    color: #333;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.investigation-status-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.status-item {
    background: white;
    padding: 8px 10px;
    border-radius: 4px;
}

.status-item.full-width {
    grid-column: 1 / -1;
}

.status-label {
    font-size: 10px;
    color: #888;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.status-value {
    font-size: 12px;
    color: #333;
    font-weight: 500;
}

.status-item select {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 12px;
    background: white;
}

/* =====================================================
   ISSUE FOCUS SECTION (Hero narrative)
   ===================================================== */

.issue-focus-section {
    background: linear-gradient(135deg, #fff8e1 0%, #ffecb3 100%);
    border-left: 4px solid #f57c00;
}

.issue-focus-content {
    padding: 4px 0;
}

.issue-primary {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.issue-badge {
    display: inline-block;
    background: #ff9800;
    color: white;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
}

.issue-type {
    font-size: 12px;
    font-weight: 600;
}

.issue-description {
    font-size: 13px;
    color: #333;
    line-height: 1.5;
    margin: 0 0 10px 0;
    padding: 10px;
    background: rgba(255,255,255,0.7);
    border-radius: 6px;
}

.issue-meta {
    display: flex;
    gap: 10px;
    margin-bottom: 8px;
}

.confidence-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
}

.issue-action-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: white;
    border-radius: 6px;
    font-size: 12px;
    color: #666;
}

.issue-action-summary i {
    color: #7b1fa2;
}

.sla-badge {
    background: #e1bee7;
    color: #7b1fa2;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    margin-left: auto;
}

/* =====================================================
   CROSS-LINKS SECTION (Navigation)
   ===================================================== */

.cross-links-section {
    background: #eceff1;
}

.cross-links-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.cross-link-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: white;
    padding: 8px 14px;
    border-radius: 6px;
    text-decoration: none;
    color: #333;
    font-size: 12px;
    font-weight: 500;
    border: 1px solid #ddd;
    transition: all 0.2s;
}

.cross-link-item:hover {
    background: #1976d2;
    color: white;
    border-color: #1976d2;
}

.cross-link-item i {
    font-size: 14px;
    color: #666;
}

.cross-link-item:hover i {
    color: white;
}

/* =====================================================
   FINANCIAL IMPACT SECTION
   ===================================================== */

.financial-impact-section {
    background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
    border-left: 4px solid #2e7d32;
}

.financial-impact-content {
    padding: 4px 0;
}

.impact-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 10px;
}

.impact-badge.recovery {
    background: #2e7d32;
    color: white;
}

.impact-badge.refund {
    background: #c62828;
    color: white;
}

.impact-badge.neutral {
    background: #757575;
    color: white;
}

.impact-explanation {
    font-size: 12px;
    color: #333;
    font-style: italic;
    margin: 0 0 12px 0;
    padding: 8px 12px;
    background: rgba(255,255,255,0.7);
    border-radius: 4px;
}

.impact-breakdown {
    background: white;
    border-radius: 6px;
    padding: 10px;
    margin-bottom: 10px;
}

.impact-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid #f0f0f0;
}

.impact-row:last-child {
    border-bottom: none;
}

.impact-service {
    font-size: 12px;
    font-weight: 500;
    color: #333;
}

.impact-amount {
    font-size: 13px;
    font-weight: 600;
    color: #2e7d32;
}

.impact-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: white;
    padding: 12px;
    border-radius: 6px;
    border: 2px solid #2e7d32;
}

.total-label {
    font-size: 12px;
    font-weight: 600;
    color: #333;
}

.total-value {
    font-size: 18px;
    font-weight: 700;
}

.total-value.recovery {
    color: #2e7d32;
}

.total-value.refund {
    color: #c62828;
}

.total-value.neutral {
    color: #757575;
}

/* =====================================================
   TEMPORAL CONTEXT SECTION
   ===================================================== */

.temporal-context-section {
    background: linear-gradient(135deg, #f3e5f5 0%, #e1bee7 100%);
    border-left: 4px solid #7b1fa2;
}

.temporal-content {
    padding: 4px 0;
}

.temporal-dates {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 12px;
}

.temporal-date-item {
    background: white;
    padding: 10px;
    border-radius: 6px;
}

.date-label {
    font-size: 10px;
    font-weight: 600;
    color: #7b1fa2;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.date-value {
    font-size: 16px;
    font-weight: 700;
    color: #333;
}

.temporal-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    flex-wrap: wrap;
    gap: 8px;
}

.periods-count {
    font-size: 13px;
    color: #333;
}

.ongoing-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #c62828;
    color: white;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
}

.resolved-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #2e7d32;
    color: white;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
}

.exposure-comparison {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 10px;
}

.exposure-item {
    background: white;
    padding: 10px;
    border-radius: 6px;
    text-align: center;
}

.exposure-label {
    font-size: 10px;
    color: #888;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.exposure-value {
    font-size: 14px;
    font-weight: 700;
    color: #c62828;
}

.exposure-value.highlight {
    color: #7b1fa2;
    font-size: 16px;
}

.affected-months {
    font-size: 11px;
    color: #666;
    font-style: italic;
    padding: 8px;
    background: rgba(255,255,255,0.5);
    border-radius: 4px;
}

/* =====================================================
   TRANSACTION HISTORY SECTION
   ===================================================== */

.transaction-history-section {
    background: #fff;
    border: 1px solid #e0e0e0;
}

.transaction-placeholder {
    text-align: center;
    padding: 20px;
    color: #888;
}

.transaction-placeholder i {
    font-size: 28px;
    margin-bottom: 10px;
    display: block;
    color: #bdbdbd;
}

.placeholder-text {
    font-size: 13px;
    font-weight: 500;
    color: #666;
    margin-bottom: 4px;
}

.placeholder-subtext {
    font-size: 11px;
    color: #888;
}

.transaction-list {
    background: #fafafa;
    border-radius: 6px;
    padding: 4px;
}

.transaction-item {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    gap: 12px;
    padding: 8px 10px;
    background: white;
    margin-bottom: 4px;
    border-radius: 4px;
    font-size: 12px;
    align-items: center;
}

.transaction-item:last-child {
    margin-bottom: 0;
}

.tx-date {
    color: #888;
    font-size: 11px;
}

.tx-type {
    font-weight: 500;
    color: #333;
}

.tx-amount {
    font-weight: 600;
    color: #2e7d32;
}

.tx-ref {
    font-size: 10px;
    color: #999;
    font-family: monospace;
}

/* =====================================================
   ENHANCED AUDIT TRAIL SUBSECTIONS
   ===================================================== */

.audit-subsection {
    margin-bottom: 12px;
    background: white;
    border-radius: 6px;
    padding: 10px;
    border-left: 3px solid #7b1fa2;
}

.audit-subsection-title {
    font-size: 10px;
    font-weight: 700;
    color: #7b1fa2;
    text-transform: uppercase;
    margin-bottom: 8px;
    letter-spacing: 0.5px;
}

.audit-data-grid {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.audit-data-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    border-bottom: 1px solid #f5f5f5;
    font-size: 11px;
}

.audit-data-row:last-child {
    border-bottom: none;
}

.data-key {
    color: #666;
    text-transform: capitalize;
}

.data-value {
    color: #333;
    font-weight: 500;
    text-align: right;
    font-family: monospace;
    font-size: 11px;
}

.calculation-steps {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.calc-step {
    background: #f5f5f5;
    border-radius: 4px;
    padding: 8px 10px;
}

.step-name {
    font-size: 11px;
    font-weight: 600;
    color: #333;
    text-transform: capitalize;
    margin-bottom: 4px;
}

.step-details {
    padding-left: 8px;
    border-left: 2px solid #e0e0e0;
}

.step-detail {
    font-size: 10px;
    color: #666;
    padding: 2px 0;
}

.step-detail strong {
    color: #333;
}

.data-quality-warnings {
    background: #fff3e0 !important;
    border-left-color: #f57c00 !important;
}

.quality-status {
    font-size: 11px;
    font-weight: 500;
    color: #e65100;
    margin-bottom: 8px;
}

.quality-warning {
    display: flex;
    gap: 8px;
    font-size: 10px;
    padding: 4px 0;
    color: #bf360c;
}

.warning-code {
    font-weight: 600;
    background: #ffe0b2;
    padding: 1px 6px;
    border-radius: 2px;
}

.warning-message {
    color: #666;
}

/* =====================================================
   ACCORDION SECTIONS (V3 Enriched Data)
   ===================================================== */

.accordion-container {
    background: #fff;
}

.accordion-list {
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid #e0e0e0;
}

.accordion-item {
    border-bottom: 1px solid #e0e0e0;
}

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

.accordion-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: #fafafa;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    color: #333;
    transition: background 0.2s ease;
}

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

.accordion-header i:first-child {
    color: #1976d2;
    width: 16px;
    text-align: center;
}

.accordion-header span {
    flex: 1;
}

.accordion-arrow {
    color: #999;
    font-size: 10px;
    transition: transform 0.2s ease;
}

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

.accordion-content {
    padding: 12px 14px;
    background: #fff;
    border-top: 1px solid #e8e8e8;
}

.accordion-grid {
    display: grid;
    gap: 8px;
}

.accordion-row {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 10px;
    font-size: 11px;
    padding: 4px 0;
    border-bottom: 1px solid #f5f5f5;
}

.accordion-row:last-child {
    border-bottom: none;
}

.accordion-label {
    color: #666;
    font-weight: 500;
}

.accordion-value {
    color: #333;
    word-break: break-word;
}

.accordion-empty {
    text-align: center;
    color: #999;
    font-size: 11px;
    padding: 10px;
    font-style: italic;
}

.accordion-text {
    font-size: 11px;
    color: #333;
    line-height: 1.5;
}

/* Accordion badge */
.accordion-badge {
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 10px;
    margin-left: auto;
    margin-right: 8px;
    background: #e0e0e0;
    color: #666;
}
.accordion-badge.success { background: #e8f5e9; color: #2e7d32; }
.accordion-badge.warning { background: #fff3e0; color: #e65100; }
.accordion-badge.danger { background: #ffebee; color: #c62828; }

/* Services grid in accordion */
.services-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.service-row {
    display: grid;
    grid-template-columns: 100px 1fr 80px;
    gap: 10px;
    padding: 8px 10px;
    background: #f8f9fa;
    border-radius: 4px;
    font-size: 11px;
    align-items: center;
}
.service-row.recovery { border-left: 3px solid #2e7d32; }
.service-row.refund { border-left: 3px solid #c62828; }
.service-row.match { border-left: 3px solid #4caf50; }
.service-name {
    font-weight: 600;
    color: #333;
}
.service-amounts {
    display: flex;
    gap: 12px;
    color: #666;
}
.service-amounts .billed { }
.service-amounts .expected { color: #888; }
.service-status {
    text-align: right;
    font-weight: 600;
    font-size: 10px;
}
.service-status.recovery { color: #2e7d32; }
.service-status.refund { color: #c62828; }
.service-status.match { color: #4caf50; }

/* Flags list in accordion */
.flags-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.flag-item {
    display: grid;
    grid-template-columns: 90px 1fr 80px;
    gap: 8px;
    padding: 8px 10px;
    background: #f8f9fa;
    border-radius: 4px;
    font-size: 11px;
    border-left: 3px solid #ff9800;
}
.flag-item.recovery { border-left-color: #2e7d32; }
.flag-item.refund { border-left-color: #c62828; }
.flag-service {
    font-weight: 600;
    color: #333;
}
.flag-desc {
    color: #666;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.flag-exposure {
    text-align: right;
    font-weight: 600;
    color: #c62828;
}

.text-success {
    color: #2e7d32;
}

.text-muted {
    color: #999;
}

/* =====================================================
   V4 BASELINE ANALYSIS SECTION
   ===================================================== */

.baseline-analysis-section {
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    border-left: 4px solid #1976d2;
    border-radius: 8px;
    padding: 14px;
    margin-bottom: 12px;
}

.baseline-analysis-section .section-header {
    font-size: 12px;
    font-weight: 600;
    color: #1565c0;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Flag Type Badge */
.flag-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 12px;
}

.flag-type-badge.NONE {
    background: #e8f5e9;
    color: #2e7d32;
}

.flag-type-badge.DATA_QUALITY {
    background: #e3f2fd;
    color: #1976d2;
}

.flag-type-badge.REVENUE {
    background: #ffebee;
    color: #c62828;
}

.flag-type-badge.COMPOUND {
    background: #fff3e0;
    color: #e65100;
}

.flag-type-badge.HIDDEN_REVENUE {
    background: #f3e5f5;
    color: #7b1fa2;
}

.flag-type-badge.INSUFFICIENT_DATA {
    background: #eceff1;
    color: #546e7a;
}

/* Three-way Comparison Grid */
.baseline-comparison-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    margin-bottom: 14px;
}

.baseline-cell {
    background: white;
    border-radius: 6px;
    padding: 10px;
    text-align: center;
}

.baseline-cell.policy { border-top: 3px solid #1976d2; }
.baseline-cell.reality { border-top: 3px solid #7b1fa2; }
.baseline-cell.billed { border-top: 3px solid #ff9800; }

.baseline-label {
    font-size: 10px;
    font-weight: 600;
    color: #666;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.baseline-value {
    font-size: 16px;
    font-weight: 700;
    color: #333;
}

.baseline-source {
    font-size: 9px;
    color: #888;
    margin-top: 2px;
}

/* Comparison Results */
.comparison-results {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    margin-bottom: 14px;
}

.comparison-item {
    background: white;
    border-radius: 4px;
    padding: 8px;
    text-align: center;
}

.comparison-label {
    font-size: 9px;
    color: #666;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.comparison-value {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 3px;
}

.comparison-value.match {
    background: #e8f5e9;
    color: #2e7d32;
}

.comparison-value.mismatch {
    background: #ffebee;
    color: #c62828;
}

/* Divergence Alert */
.divergence-alert {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff3e0;
    border: 1px solid #ffb74d;
    border-left: 4px solid #ff9800;
    border-radius: 4px;
    padding: 10px 12px;
    margin-bottom: 12px;
    font-size: 12px;
    color: #e65100;
}

.divergence-alert i {
    font-size: 14px;
}

/* Interpretation */
.baseline-interpretation {
    background: white;
    border-radius: 6px;
    padding: 12px;
    margin-bottom: 12px;
}

.interpretation-header {
    font-size: 10px;
    font-weight: 600;
    color: #1565c0;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.interpretation-text {
    font-size: 12px;
    color: #333;
    line-height: 1.5;
}

/* Classification Reliability Components */
.confidence-indicator {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 12px;
    background: #f5f5f5;
    border: 1px solid #e0e0e0;
}

.confidence-indicator.high {
    background: rgba(56, 142, 60, 0.1);
    border-color: #388e3c;
    color: #2e7d32;
}

.confidence-indicator.medium {
    background: rgba(255, 152, 0, 0.1);
    border-color: #ff9800;
    color: #f57c00;
}

.confidence-indicator.low {
    background: rgba(244, 67, 54, 0.1);
    border-color: #f44336;
    color: #d32f2f;
}

.confidence-indicator.insufficient {
    background: rgba(158, 158, 158, 0.1);
    border-color: #9e9e9e;
    color: #757575;
}

/* Evidence Conflict Warning */
.evidence-conflict-warning {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    background: #fff3e0;
    border: 1px solid #ffb74d;
    border-left: 4px solid #ff9800;
    border-radius: 4px;
    margin-bottom: 12px;
}

.evidence-conflict-warning i {
    color: #f57c00;
    font-size: 14px;
    margin-top: 2px;
}

.conflict-content {
    flex: 1;
}

.conflict-header {
    font-size: 11px;
    font-weight: 600;
    color: #e65100;
    margin-bottom: 4px;
}

.conflict-details {
    font-size: 11px;
    color: #666;
    line-height: 1.4;
}

.source-conflict-detail {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    border-bottom: 1px solid #ffe0b2;
    font-size: 10px;
}

.source-conflict-detail:last-child {
    border-bottom: none;
}

.source-name {
    color: #666;
}

.source-value {
    font-weight: 500;
    color: #333;
}

/* Verification Status */
.verification-required {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: #e3f2fd;
    border: 1px solid #64b5f6;
    border-radius: 4px;
    font-size: 11px;
    color: #1976d2;
}

.verification-state {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
}

.verification-state.unverified {
    background: #eceff1;
    color: #546e7a;
}

.verification-state.under-review {
    background: #fff8e1;
    color: #f57f17;
}

.verification-state.confirmed {
    background: #e8f5e9;
    color: #2e7d32;
}

.verification-state.rejected {
    background: #ffebee;
    color: #c62828;
}

.verification-state.escalated {
    background: #f3e5f5;
    color: #7b1fa2;
}

/* Metadata Row */
.baseline-metadata {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 10px;
    background: rgba(255,255,255,0.7);
    border-radius: 4px;
    font-size: 10px;
    color: #666;
}

.metadata-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

.metadata-label {
    font-weight: 500;
}

.metadata-value {
    color: #333;
}

/* =====================================================
   LAYER 1 MODAL - Compact V4 Baseline Card
   ===================================================== */

.l1-revenue-banner {
    padding: 12px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.l1-banner-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.l1-banner-icon i {
    color: white;
    font-size: 18px;
}

.l1-header {
    background: linear-gradient(135deg, #1a237e 0%, #3949ab 100%);
    color: white;
    padding: 20px;
}

.l1-flag-badge {
    color: white;
    padding: 6px 14px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.l1-quick-stats {
    display: flex;
    gap: 24px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,0.2);
}

.l1-stat-label {
    font-size: 10px;
    opacity: 0.7;
    text-transform: uppercase;
}

.l1-analysis-section {
    padding: 20px;
}

.l1-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    font-weight: 600;
    font-size: 14px;
}

.l1-baseline-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 16px;
}

.l1-baseline-card {
    border-radius: 8px;
    overflow: hidden;
}

.l1-baseline-policy {
    border: 1px solid #e3f2fd;
}

.l1-baseline-reality {
    border: 1px solid #fce4ec;
}

.l1-baseline-card-header {
    padding: 10px 14px;
    font-size: 11px;
    font-weight: 600;
}

.l1-baseline-card-header i {
    margin-right: 6px;
}

.l1-baseline-card-body {
    padding: 14px;
}

.l1-baseline-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 12px;
    color: #666;
}

.l1-baseline-row:last-child {
    margin-bottom: 0;
}

.l1-exposure-bar {
    padding: 14px 16px;
    border-radius: 6px;
    margin-bottom: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.l1-d6-note {
    background: #fff3e0;
    border: 1px solid #ffe0b2;
    padding: 10px 14px;
    border-radius: 6px;
    margin-bottom: 16px;
    font-size: 11px;
    color: #e65100;
}

.l1-d6-note i {
    margin-right: 6px;
}

.l1-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}

.l1-stat-cell {
    background: #fafafa;
    padding: 12px;
    border-radius: 6px;
    text-align: center;
}

.l1-stat-cell-label {
    font-size: 10px;
    color: #666;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.l1-classification {
    padding: 14px 16px;
    border-radius: 0 6px 6px 0;
    margin-bottom: 16px;
}

.l1-flag-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.l1-flag-icon i {
    color: white;
    font-size: 14px;
}

.l1-evidence {
    margin-bottom: 16px;
}

.l1-evidence-title {
    font-size: 11px;
    font-weight: 600;
    color: #666;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.l1-evidence-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: #fafafa;
    border-radius: 4px;
    margin-bottom: 4px;
}

.l1-action-rec {
    background: #e8f5e9;
    padding: 12px 16px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.l1-footer {
    padding: 12px 20px;
    background: #f5f5f5;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.l1-footer-left {
    display: flex;
    gap: 8px;
}

.l1-btn {
    border: none;
    padding: 10px 16px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background 0.2s;
}

.l1-btn-primary {
    background: #6a1b9a;
    color: white;
}

.l1-btn-primary:hover {
    background: #4a148c;
}

.l1-btn-secondary {
    background: #e0e0e0;
    color: #333;
}

.l1-btn-secondary:hover {
    background: #bdbdbd;
}

.l1-btn-expand {
    background: #1a237e;
    color: white;
}

.l1-btn-expand:hover {
    background: #0d1642;
}