/**
 * MLSN Progressive Disclosure Styles
 * Integrates with Gilba Agronomic Intelligence Hub
 */

/* ============================================
   MLSN PROGRESSIVE CONTAINER
   ============================================ */

.gaip-mlsn-progressive-container {
    margin: 20px 0;
}

/* ============================================
   MLSN CARDS GRID
   ============================================ */

.gaip-mlsn-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

@media (max-width: 768px) {
    .gaip-mlsn-cards-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   DIAGNOSTIC CARDS - COMPACT DEFAULT
   ============================================ */

.gaip-diagnostic-card {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    transition: all 0.2s ease;
}

.gaip-diagnostic-card:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* ============================================
   VERDICT SECTION (Always Visible)
   ============================================ */

.gaip-verdict {
    padding: 12px;
}

.gaip-verdict-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.gaip-parameter {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: #1f2937;
}

/* Status Badges */
.gaip-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.gaip-status-badge.status-deficient {
    background: #fee2e2;
    color: #991b1b;
}

.gaip-status-badge.status-borderline {
    background: #fef3c7;
    color: #92400e;
}

.gaip-status-badge.status-adequate {
    background: #d1fae5;
    color: #065f46;
}

.gaip-status-badge.status-high {
    background: #dbeafe;
    color: #1e40af;
}

.gaip-status-badge.status-no-data {
    background: #f3f4f6;
    color: #6b7280;
}

.gaip-status-icon {
    font-size: 12px;
}

/* Verdict Content */
.gaip-verdict-content {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 10px;
    font-size: 13px;
}

.gaip-driver,
.gaip-mlsn-threshold {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.gaip-label {
    color: #6b7280;
    font-weight: 500;
    font-size: 12px;
}

.gaip-value {
    color: #1f2937;
    font-weight: 600;
}

/* Confidence Indicator */
.gaip-confidence {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    margin-top: 4px;
}

.gaip-confidence-bars {
    font-family: monospace;
    letter-spacing: 1px;
    font-size: 14px;
}

.gaip-confidence.confidence-high {
    color: #10b981;
}

.gaip-confidence.confidence-medium {
    color: #f59e0b;
}

.gaip-confidence.confidence-low {
    color: #ef4444;
}

.gaip-confidence-percentage {
    font-weight: 600;
    min-width: 35px;
}

/* Verdict Actions */
.gaip-verdict-actions {
    display: flex;
    gap: 6px;
    align-items: center;
}

.gaip-expand-btn {
    background: #f3f4f6;
    border: 1px solid #d1d5db;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 500;
    color: #4b5563;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.gaip-expand-btn:hover {
    background: #e5e7eb;
    color: #1f2937;
}

.gaip-icon {
    font-size: 9px;
    transition: transform 0.2s ease;
}

.gaip-assumptions-btn {
    background: transparent;
    border: 1px solid #d1d5db;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
    transition: all 0.2s ease;
}

.gaip-assumptions-btn:hover {
    background: #f3f4f6;
    color: #2563eb;
}

.gaip-icon-info {
    font-size: 13px;
    font-weight: bold;
}

/* ============================================
   WHY SECTION (Collapsed by Default)
   ============================================ */

.gaip-why-section {
    border-top: 1px solid #e5e7eb;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.3s ease, opacity 0.2s ease, padding 0.3s ease;
}

.gaip-why-section.gaip-collapsed {
    max-height: 0;
    opacity: 0;
    padding: 0 12px;
}

.gaip-why-section.gaip-expanded {
    max-height: 600px;
    opacity: 1;
    padding: 12px;
}

.gaip-why-content {
    font-size: 13px;
}

.gaip-rule-fired,
.gaip-recommendation {
    margin-bottom: 10px;
}

.gaip-recommendation-text {
    margin-top: 4px;
    padding: 8px;
    background: #f9fafb;
    border-left: 3px solid #2563eb;
    border-radius: 4px;
    line-height: 1.5;
}

.gaip-mlsn-calculations {
    margin: 12px 0;
    padding: 10px;
    background: #f9fafb;
    border-radius: 6px;
}

.gaip-calc-row {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    font-size: 12px;
}

.gaip-calc-label {
    color: #6b7280;
}

.gaip-calc-value {
    font-weight: 600;
    color: #1f2937;
}

/* ============================================
   SENSITIVITY SECTION (Deeply Collapsed)
   ============================================ */

.gaip-sensitivity-section {
    border-top: 1px solid #e5e7eb;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.3s ease, opacity 0.2s ease, padding 0.3s ease;
}

.gaip-sensitivity-section.gaip-collapsed {
    max-height: 0;
    opacity: 0;
    padding: 0 12px;
}

.gaip-sensitivity-section.gaip-expanded {
    max-height: 400px;
    opacity: 1;
    padding: 12px;
}

.gaip-supply-analysis h5 {
    margin: 0 0 10px 0;
    font-size: 13px;
    font-weight: 600;
    color: #1f2937;
}

.gaip-supply-details {
    margin-bottom: 10px;
    padding: 10px;
    background: #f9fafb;
    border-radius: 6px;
}

.gaip-supply-row {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    font-size: 12px;
}

.gaip-supply-row span {
    color: #6b7280;
}

.gaip-supply-row strong {
    color: #1f2937;
}

.gaip-supply-highlight {
    padding-top: 8px;
    margin-top: 8px;
    border-top: 1px solid #e5e7eb;
}

.gaip-supply-highlight strong {
    color: #2563eb;
    font-size: 13px;
}

.gaip-guidance {
    margin: 10px 0 0 0;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 12px;
    line-height: 1.5;
}

.gaip-guidance.gaip-urgent {
    background: #fef3c7;
    border-left: 3px solid #f59e0b;
}

.gaip-guidance.gaip-normal {
    background: #d1fae5;
    border-left: 3px solid #10b981;
}

.gaip-guidance.gaip-caution {
    background: #dbeafe;
    border-left: 3px solid #2563eb;
}

/* ============================================
   RATIOS SECTION
   ============================================ */

.gaip-mlsn-ratios-section {
    margin: 20px 0;
    padding: 16px;
    background: #f9fafb;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
}

.gaip-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.gaip-section-header h4 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #1f2937;
}

.gaip-collapsible-content {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.3s ease, opacity 0.2s ease;
}

.gaip-collapsible-content.gaip-collapsed {
    max-height: 0;
    opacity: 0;
}

.gaip-collapsible-content.gaip-expanded {
    max-height: 500px;
    opacity: 1;
}

.gaip-ratios-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 12px;
}

.gaip-ratio-card {
    padding: 12px;
    background: white;
    border-radius: 6px;
    border: 1px solid #e5e7eb;
}

.gaip-ratio-card.ratio-balanced {
    border-left: 3px solid #10b981;
}

.gaip-ratio-card.ratio-caution {
    border-left: 3px solid #f59e0b;
}

.gaip-ratio-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.gaip-ratio-header strong {
    font-size: 13px;
    color: #1f2937;
}

.gaip-ratio-value {
    font-size: 16px;
    font-weight: 700;
    color: #2563eb;
}

.gaip-ratio-status {
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 6px;
}

.ratio-balanced .gaip-ratio-status {
    color: #10b981;
}

.ratio-caution .gaip-ratio-status {
    color: #f59e0b;
}

.gaip-ratio-interpretation {
    font-size: 12px;
    color: #6b7280;
    line-height: 1.4;
}

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

.gaip-mlsn-context-section {
    margin: 20px 0;
    padding: 16px;
    background: #f9fafb;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
}

.gaip-context-details {
    font-size: 13px;
}

.gaip-context-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid #e5e7eb;
}

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

.gaip-context-label {
    color: #6b7280;
}

.gaip-context-value {
    font-weight: 600;
    color: #1f2937;
}

.gaip-context-note {
    margin-top: 12px;
    padding: 10px;
    background: #fef3c7;
    border-left: 3px solid #f59e0b;
    border-radius: 4px;
    font-size: 12px;
    line-height: 1.5;
}

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

.gaip-tooltip {
    position: fixed;
    z-index: 3000;
    max-width: 300px;
    background: #1f2937;
    color: white;
    padding: 12px 14px;
    border-radius: 6px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
    font-size: 12px;
}

.gaip-tooltip-content h5 {
    margin: 0 0 8px 0;
    font-size: 13px;
    font-weight: 600;
    color: white;
}

.gaip-tooltip-content ul {
    margin: 0;
    padding-left: 18px;
}

.gaip-tooltip-content li {
    margin: 4px 0;
    line-height: 1.4;
}

/* ============================================
   UTILITIES
   ============================================ */

.gaip-note {
    font-size: 12px;
    color: #6b7280;
    font-style: italic;
    margin: 8px 0;
}

.gaip-no-data {
    padding: 20px;
    text-align: center;
    color: #9ca3af;
    font-style: italic;
}

/* ============================================
   MOBILE RESPONSIVENESS
   ============================================ */

@media (max-width: 640px) {
    .gaip-verdict {
        padding: 10px;
    }
    
    .gaip-parameter {
        font-size: 14px;
    }
    
    .gaip-status-badge {
        font-size: 10px;
        padding: 2px 6px;
    }
    
    .gaip-verdict-content {
        font-size: 12px;
    }
    
    .gaip-expand-btn {
        font-size: 11px;
        padding: 4px 8px;
    }
    
    .gaip-ratios-cards {
        grid-template-columns: 1fr;
    }
}