/* Custom CSS for Niti documentation */

/* Side-by-side code examples using Sphinx Design tabs */
.sd-tab-content {
    margin-top: 0 !important;
}

/* Custom code comparison containers */
.code-comparison-container {
    margin: 1.5rem 0;
    border: 1px solid var(--color-background-border, #e2e8f0);
    border-radius: 0.5rem;
    overflow: hidden;
}

.code-comparison-header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background-color: var(--color-background-secondary, #f8fafc);
    border-bottom: 1px solid var(--color-background-border, #e2e8f0);
}

.good-header, .bad-header {
    padding: 0.75rem 1rem;
    font-weight: 600;
    font-size: 0.875rem;
    text-align: center;
    border-right: 1px solid var(--color-background-border, #e2e8f0);
}

.good-header {
    color: #16a34a;
    background-color: #f0fdf4;
}

.bad-header {
    color: #dc2626;
    background-color: #fef2f2;
    border-right: none;
}

.code-comparison {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
}

.code-good, .code-bad {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.code-good {
    border-right: 1px solid var(--color-background-border, #e2e8f0);
}

.code-bad {
    /* Bad examples on the right side */
}

.code-good .highlight, .code-bad .highlight {
    margin: 0 !important;
    border-radius: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.code-good .highlight pre, .code-bad .highlight pre {
    margin: 0 !important;
    padding: 1rem;
    border-radius: 0;
    flex: 1;
    min-height: 100%;
    overflow-x: auto;
    background-color: var(--color-code-background, #f8f8f8) !important;
}

/* Responsive design for smaller screens */
@media (max-width: 768px) {
    /* Rule card containment on mobile */
    .rule-card {
        padding: 1rem;
        overflow: visible; /* Allow controlled overflow for code blocks */
    }
    
    /* Code comparison container adjustments for mobile */
    .code-comparison-container {
        margin: 1rem -1rem; /* Negative margins to extend to card edges */
        border-radius: 0;
        border-left: none;
        border-right: none;
    }
    
    /* Hide the original header container on mobile */
    .code-comparison-header {
        display: none;
    }
    
    .code-comparison {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        gap: 1rem;
    }
    
    /* Restructure code blocks to handle headers properly */
    .code-good, .code-bad {
        position: relative;
        overflow: visible;
        border: 1px solid var(--color-background-border, #e2e8f0);
        border-radius: 0;
        padding-top: 2.75rem; /* Space for the absolutely positioned header */
        margin: 0;
    }
    
    /* Add headers as absolutely positioned elements */
    .code-good::before, .code-bad::before {
        content: attr(data-label);
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        padding: 0.75rem 1rem;
        font-weight: 600;
        font-size: 0.875rem;
        text-align: center;
        border-bottom: 1px solid var(--color-background-border, #e2e8f0);
        border-radius: 0;
        z-index: 1;
    }
    
    .code-good::before {
        content: "✅ Correct";
        color: #16a34a;
        background-color: #f0fdf4;
    }
    
    .code-bad::before {
        content: "❌ Incorrect";
        color: #dc2626;
        background-color: #fef2f2;
    }
    
    /* Allow the highlight container to scroll independently */
    .code-good .highlight, .code-bad .highlight {
        overflow-x: auto;
        overflow-y: hidden;
        margin-top: -2.75rem !important; /* Compensate for padding */
        padding-top: 2.75rem;
        max-width: 100vw;
    }
    
    /* Ensure pre blocks don't break layout */
    .code-good .highlight pre, .code-bad .highlight pre {
        padding: 1rem;
        max-width: 100%;
    }
    
    .code-good {
        border-right: 1px solid var(--color-background-border, #e2e8f0);
        border-bottom: 1px solid var(--color-background-border, #e2e8f0);
    }
    
    .code-bad {
        /* Last block styling */
    }
}

/* Rule cards styling */
.rule-card {
    border: 1px solid var(--color-background-border);
    border-radius: 0.5rem;
    margin: 1.5rem 0;
    padding: 1.5rem;
    background-color: var(--color-background-secondary);
    /* Ensure proper containment on mobile */
    overflow: hidden;
}

.rule-title {
    margin-top: 0;
    color: var(--color-brand-primary);
    border-bottom: 2px solid var(--color-brand-primary);
    padding-bottom: 0.5rem;
}

.rule-description {
    margin: 1rem 0;
    font-style: italic;
    color: var(--color-foreground-muted);
}

/* Severity badges */
.severity-badge {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: bold;
    text-transform: uppercase;
}

.severity-error {
    background-color: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

.severity-warning {
    background-color: #fffbeb;
    color: #92400e;
    border: 1px solid #fed7aa;
}

.severity-info {
    background-color: #eff6ff;
    color: #1e40af;
    border: 1px solid #bfdbfe;
}

/* Rule metadata */
.rule-metadata {
    display: flex;
    gap: 1rem;
    margin: 1rem 0;
    font-size: 0.875rem;
}

.rule-id {
    font-family: monospace;
    background-color: var(--color-background-item);
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
}

/* Navigation improvements */
.sidebar .toctree-l1 > a {
    font-weight: 600;
}

.sidebar .toctree-l2 > a {
    padding-left: 1rem;
    font-size: 0.875rem;
}

/* Code block improvements */
.highlight {
    border-radius: 0.5rem;
}

/* Ensure code blocks fill available space */
.code-good > .highlight, .code-bad > .highlight {
    height: 100%;
}

.code-good > .highlight > pre, .code-bad > .highlight > pre {
    height: 100%;
    box-sizing: border-box;
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .severity-error {
        background-color: #450a0a;
        color: #fca5a5;
        border: 1px solid #991b1b;
    }

    .severity-warning {
        background-color: #451a03;
        color: #fed7aa;
        border: 1px solid #92400e;
    }

    .severity-info {
        background-color: #1e3a8a;
        color: #bfdbfe;
        border: 1px solid #1e40af;
    }
    
    .good-header {
        background-color: #14532d;
        color: #bbf7d0;
    }

    .bad-header {
        background-color: #7f1d1d;
        color: #fecaca;
    }
    
    .code-comparison-container {
        border-color: #374151;
    }
    
    .code-comparison-header {
        border-bottom-color: #374151;
    }
    
    .good-header, .bad-header {
        border-right-color: #374151;
        border-bottom-color: #374151;
    }
    
    .code-good {
        border-right-color: #374151;
        border-bottom-color: #374151;
    }
    
    /* Mobile specific dark mode styles */
    @media (max-width: 768px) {
        .code-good::before {
            background-color: #14532d;
            color: #bbf7d0;
            border-bottom-color: #374151;
        }
        
        .code-bad::before {
            background-color: #7f1d1d;
            color: #fecaca;
            border-bottom-color: #374151;
        }
        
        .code-good, .code-bad {
            border-color: #374151;
        }
        
        .code-good {
            border-right-color: #374151;
        }
    }
}