/* =============================================
 * SLYD DOCUMENTATION SHARED STYLES
 * =============================================
 *
 * Shared component styles for all documentation pages.
 * Use generic class names prefixed with "docs-" for consistency.
 *
 * TABLE OF CONTENTS:
 * 1. Progress Overview (step indicators)
 * 2. Collapsible Phase Sections
 * 3. Feature Grids & Cards
 * 4. Navigation Paths
 * 5. Status Indicators
 * 6. Section Headers
 * 7. Content Cards (highlight, component, role, etc.)
 * 8. Value Propositions
 * 9. Roadmap/Timeline
 * 10. Next Steps Navigation
 * 11. Tabs
 * 12. Checklists & Lists
 * 13. Management & Monitoring
 * 14. Lifecycle Diagrams
 * 15. Alerts & Warnings
 * 16. Buttons
 * 17. Badges & Tags
 * 18. Responsive Styles
 * =============================================
 */

/* =============================================
 * 1. PROGRESS OVERVIEW (Step Indicators)
 * ============================================= */
.docs-progress-overview {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin: 2rem 0 2.5rem;
    padding: 1.5rem;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.08), rgba(139, 92, 246, 0.08));
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: 12px;
    flex-wrap: wrap;
}

.docs-progress-phase {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.docs-progress-phase span {
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.docs-progress-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(139, 92, 246, 0.2));
    border: 1px solid rgba(99, 102, 241, 0.3);
    border-radius: 12px;
    font-size: 1.25rem;
    color: #8B5CF6;
}

/* Larger variant for hero-style progress */
.docs-progress-icon.lg {
    width: 56px;
    height: 56px;
    font-size: 1.5rem;
    background: linear-gradient(135deg, #6366F1, #8B5CF6);
    color: white;
    border: none;
}

.docs-progress-connector {
    width: 40px;
    height: 2px;
    background: linear-gradient(90deg, rgba(99, 102, 241, 0.5), rgba(139, 92, 246, 0.5));
    margin-bottom: 1.5rem;
}

/* Wider connector variant */
.docs-progress-connector.wide {
    width: 60px;
}

/* =============================================
 * 2. COLLAPSIBLE PHASE SECTIONS
 * ============================================= */
.docs-phase {
    margin: 2rem 0;
    padding: 1.5rem;
    background-color: rgba(15, 23, 42, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    transition: all 0.2s ease;
}

.docs-phase:not(.expanded) {
    padding-bottom: 1rem;
}

.docs-phase-header {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    cursor: pointer;
    user-select: none;
    transition: all 0.2s ease;
}

.docs-phase-header:hover {
    opacity: 0.85;
}

.docs-phase:not(.expanded) .docs-phase-header {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.docs-phase-number {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #6366F1, #8B5CF6);
    color: white;
    border-radius: 10px;
    font-weight: 700;
    font-size: 1.25rem;
    font-family: 'Space Grotesk', sans-serif;
}

/* Icon variant (for non-numbered phases) */
.docs-phase-number.icon {
    font-size: 1rem;
    font-weight: normal;
}

.docs-phase-info {
    flex: 1;
    min-width: 0;
}

.docs-phase-info h2 {
    margin: 0 0 0.25rem 0 !important;
    padding: 0 !important;
    border: none !important;
    font-size: 1.375rem !important;
}

.docs-phase-info p {
    margin: 0;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9375rem;
}

.docs-phase-toggle {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(99, 102, 241, 0.1);
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: 8px;
    color: #6366F1;
    transition: all 0.3s ease;
    margin-top: 4px;
}

.docs-phase-toggle i {
    transition: transform 0.3s ease;
}

.docs-phase:not(.expanded) .docs-phase-toggle i {
    transform: rotate(-90deg);
}

.docs-phase-header:hover .docs-phase-toggle {
    background-color: rgba(99, 102, 241, 0.2);
    border-color: rgba(99, 102, 241, 0.4);
}

.docs-phase-content {
    padding-left: 0.5rem;
    overflow: hidden;
    transition: all 0.3s ease;
}

.docs-phase:not(.expanded) .docs-phase-content {
    display: none;
}

/* =============================================
 * 3. FEATURE GRIDS & CARDS
 * ============================================= */
.docs-feature-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-top: 1rem;
}

.docs-feature-grid.cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

.docs-feature-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    background: rgba(99, 102, 241, 0.1);
    border-radius: 8px;
    border: 1px solid rgba(99, 102, 241, 0.2);
}

.docs-feature-item i {
    color: #8B5CF6;
    font-size: 1.25rem;
    margin-top: 0.125rem;
}

.docs-feature-item strong {
    display: block;
    color: #f1f5f9;
    font-size: 0.9375rem;
    margin-bottom: 0.25rem;
}

.docs-feature-item span {
    display: block;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.8125rem;
}

/* Alternate color variants */
.docs-feature-item.green {
    background: rgba(16, 185, 129, 0.08);
    border-color: rgba(16, 185, 129, 0.15);
}

.docs-feature-item.green i {
    color: #10B981;
}

/* =============================================
 * 4. NAVIGATION PATHS (Breadcrumb-style)
 * ============================================= */
.docs-nav-path {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    background: rgba(15, 23, 42, 0.6);
    border-radius: 8px;
    margin: 1rem 0;
    flex-wrap: wrap;
}

.docs-nav-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.6);
}

.docs-nav-item i {
    font-size: 0.875rem;
}

.docs-nav-item.active {
    color: #8B5CF6;
    font-weight: 600;
}

.docs-nav-arrow {
    color: rgba(255, 255, 255, 0.3);
    font-size: 0.75rem;
}

/* =============================================
 * 5. STATUS INDICATORS
 * ============================================= */
.docs-status-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    margin-top: 1rem;
}

.docs-status-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    background: rgba(15, 23, 42, 0.6);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.docs-status-item.inline {
    display: inline-flex;
    margin-top: 0.5rem;
}

.docs-status-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Status colors */
.docs-status-indicator.creating,
.docs-status-indicator.pending {
    background: #F59E0B;
    animation: docs-pulse 2s infinite;
}

.docs-status-indicator.running,
.docs-status-indicator.active {
    background: #10B981;
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.5);
}

.docs-status-indicator.starting {
    background: #06B6D4;
    animation: docs-pulse 1.5s infinite;
}

.docs-status-indicator.stopping {
    background: #F59E0B;
    animation: docs-pulse 1.5s infinite;
}

.docs-status-indicator.stopped {
    background: #64748B;
}

.docs-status-indicator.restarting {
    background: #8B5CF6;
    animation: docs-pulse 1.5s infinite;
}

.docs-status-indicator.deleted,
.docs-status-indicator.terminated {
    background: #374151;
}

.docs-status-indicator.error {
    background: #EF4444;
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.5);
}

@keyframes docs-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.docs-status-details h4 {
    font-size: 0.875rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0 0 0.125rem 0;
}

.docs-status-details p {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    margin: 0;
}

/* =============================================
 * 6. SECTION HEADERS
 * ============================================= */
.docs-section {
    margin: 2rem 0;
    padding: 1.5rem;
    border-radius: 16px;
}

/* Color variants */
.docs-section.purple {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.05), rgba(139, 92, 246, 0.05));
    border: 1px solid rgba(99, 102, 241, 0.15);
}

.docs-section.green {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.05), rgba(6, 182, 212, 0.05));
    border: 1px solid rgba(16, 185, 129, 0.15);
}

.docs-section.orange {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.05), rgba(251, 146, 60, 0.05));
    border: 1px solid rgba(245, 158, 11, 0.15);
}

.docs-section-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.docs-section.purple .docs-section-header {
    border-bottom-color: rgba(99, 102, 241, 0.1);
}

.docs-section.green .docs-section-header {
    border-bottom-color: rgba(16, 185, 129, 0.1);
}

.docs-section-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 1.25rem;
}

.docs-section.purple .docs-section-icon {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(139, 92, 246, 0.2));
    color: #8B5CF6;
}

.docs-section.green .docs-section-icon {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(6, 182, 212, 0.2));
    color: #10B981;
}

.docs-section.orange .docs-section-icon {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(251, 146, 60, 0.2));
    color: #F59E0B;
}

.docs-section-title h3 {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: #F1F5F9;
}

.docs-section-title p {
    margin: 0.125rem 0 0 0;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.5);
}

/* Methods Section (Auth Methods, etc.) */
.docs-methods-section {
    margin: 2rem 0;
    padding: 1.5rem;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.05), rgba(139, 92, 246, 0.05));
    border: 1px solid rgba(99, 102, 241, 0.15);
    border-radius: 16px;
}

.docs-methods-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(99, 102, 241, 0.1);
}

.docs-methods-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(139, 92, 246, 0.2));
    border-radius: 12px;
    font-size: 1.25rem;
    color: #8B5CF6;
}

.docs-methods-title h3 {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: #F1F5F9;
}

.docs-methods-title p {
    margin: 0.125rem 0 0 0;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.5);
}

.docs-methods-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.docs-method-card {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    padding: 1rem;
    background-color: rgba(15, 23, 42, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    transition: all 0.2s ease;
}

.docs-method-card:hover {
    border-color: rgba(99, 102, 241, 0.3);
    transform: translateY(-2px);
}

.docs-method-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 1.125rem;
    flex-shrink: 0;
}

.docs-method-icon.email {
    background-color: rgba(99, 102, 241, 0.15);
    color: #6366F1;
}

.docs-method-icon.google {
    background-color: rgba(234, 67, 53, 0.15);
    color: #EA4335;
}

.docs-method-icon.github {
    background-color: rgba(255, 255, 255, 0.1);
    color: #F1F5F9;
}

.docs-method-content h4 {
    margin: 0 0 0.25rem 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #F1F5F9;
}

.docs-method-content p {
    margin: 0;
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.4;
}

.docs-method-tag {
    display: inline-block;
    margin-top: 0.5rem;
    padding: 0.125rem 0.5rem;
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background-color: rgba(99, 102, 241, 0.2);
    color: #818CF8;
    border-radius: 100px;
}

/* =============================================
 * 7. CONTENT CARDS
 * ============================================= */

/* Highlight Cards (3-column hero) */
.docs-highlights {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin: 2rem 0;
}

.docs-highlight-card {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.08), rgba(139, 92, 246, 0.05));
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: 12px;
    transition: all 0.2s ease;
}

.docs-highlight-card:hover {
    border-color: rgba(99, 102, 241, 0.4);
    transform: translateY(-2px);
}

.docs-highlight-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 1.25rem;
    flex-shrink: 0;
}

/* Color variants for highlight icons */
.docs-highlight-icon.green {
    background-color: rgba(16, 185, 129, 0.15);
    color: #10B981;
}

.docs-highlight-icon.purple {
    background-color: rgba(99, 102, 241, 0.15);
    color: #818CF8;
}

.docs-highlight-icon.orange {
    background-color: rgba(245, 158, 11, 0.15);
    color: #F59E0B;
}

.docs-highlight-icon.blue {
    background-color: rgba(59, 130, 246, 0.15);
    color: #3B82F6;
}

.docs-highlight-icon.cyan {
    background-color: rgba(6, 182, 212, 0.15);
    color: #06B6D4;
}

.docs-highlight-icon.red {
    background-color: rgba(239, 68, 68, 0.15);
    color: #EF4444;
}

.docs-highlight-content h3 {
    margin: 0 0 0.25rem 0;
    font-size: 1rem;
    font-weight: 600;
    color: #F1F5F9;
}

.docs-highlight-content p {
    margin: 0;
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.5;
}

/* Component Cards (2-column with lists) */
.docs-components-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-top: 1rem;
}

.docs-component-card {
    display: flex;
    gap: 1rem;
    padding: 1.25rem;
    background-color: rgba(15, 23, 42, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    transition: all 0.2s ease;
}

.docs-component-card:hover {
    border-color: rgba(99, 102, 241, 0.2);
}

.docs-component-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 1.125rem;
    flex-shrink: 0;
}

.docs-component-icon.blue {
    background-color: rgba(59, 130, 246, 0.15);
    color: #3B82F6;
}

.docs-component-icon.green {
    background-color: rgba(16, 185, 129, 0.15);
    color: #10B981;
}

.docs-component-icon.purple {
    background-color: rgba(139, 92, 246, 0.15);
    color: #A78BFA;
}

.docs-component-icon.orange {
    background-color: rgba(245, 158, 11, 0.15);
    color: #F59E0B;
}

.docs-component-content {
    flex: 1;
}

.docs-component-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.docs-component-content h4 {
    margin: 0 0 0.25rem 0;
    font-size: 1rem;
    font-weight: 600;
    color: #F1F5F9;
}

.docs-component-header h4 {
    margin: 0;
}

.docs-component-content p {
    margin: 0 0 0.75rem 0;
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.4;
}

.docs-component-content ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.docs-component-content li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 0.25rem;
}

.docs-component-content li i {
    color: #10B981;
    font-size: 0.625rem;
}

/* Type Cards (for marketplace types, auth methods, etc.) */
.docs-type-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.docs-type-grid.cols-2 {
    grid-template-columns: repeat(2, 1fr);
}

.docs-type-card {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    padding: 1rem;
    background-color: rgba(15, 23, 42, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    transition: all 0.2s ease;
}

.docs-type-card:hover {
    border-color: rgba(99, 102, 241, 0.3);
    transform: translateY(-2px);
}

.docs-type-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 1.125rem;
    flex-shrink: 0;
}

.docs-type-icon.purple {
    background-color: rgba(99, 102, 241, 0.15);
    color: #6366F1;
}

.docs-type-icon.green {
    background-color: rgba(16, 185, 129, 0.15);
    color: #10B981;
}

.docs-type-icon.orange {
    background-color: rgba(245, 158, 11, 0.15);
    color: #F59E0B;
}

.docs-type-icon.red {
    background-color: rgba(234, 67, 53, 0.15);
    color: #EA4335;
}

.docs-type-icon.white {
    background-color: rgba(255, 255, 255, 0.1);
    color: #F1F5F9;
}

.docs-type-content h4 {
    margin: 0 0 0.25rem 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #F1F5F9;
}

.docs-type-content p {
    margin: 0;
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.4;
}

/* Role Cards (Consumer/Provider) */
.docs-roles-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-top: 1rem;
}

.docs-role-card {
    padding: 1.5rem;
    background-color: rgba(15, 23, 42, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    transition: all 0.2s ease;
}

.docs-role-card:hover {
    border-color: rgba(99, 102, 241, 0.2);
}

.docs-role-card.consumer {
    border-left: 3px solid #3B82F6;
}

.docs-role-card.provider {
    border-left: 3px solid #10B981;
}

.docs-role-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.docs-role-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 1rem;
}

.docs-role-card.consumer .docs-role-icon {
    background-color: rgba(59, 130, 246, 0.15);
    color: #3B82F6;
}

.docs-role-card.provider .docs-role-icon {
    background-color: rgba(16, 185, 129, 0.15);
    color: #10B981;
}

.docs-role-header h4 {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: #F1F5F9;
}

.docs-role-card > p {
    margin: 0 0 1rem 0;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.5;
}

.docs-role-card ul {
    margin: 0 0 1rem 0;
    padding: 0;
    list-style: none;
}

.docs-role-card li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 0.375rem;
}

.docs-role-card li i {
    font-size: 0.625rem;
}

.docs-role-card.consumer li i {
    color: #3B82F6;
}

.docs-role-card.provider li i {
    color: #10B981;
}

.docs-role-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}

.docs-role-card.consumer .docs-role-link {
    color: #3B82F6;
}

.docs-role-card.provider .docs-role-link {
    color: #10B981;
}

.docs-role-link:hover {
    gap: 0.75rem;
}

/* =============================================
 * 8. VALUE PROPOSITIONS
 * ============================================= */
.docs-value-props {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-top: 1.5rem;
}

.docs-value-prop {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    background-color: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
}

.docs-value-prop-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(99, 102, 241, 0.15);
    border-radius: 8px;
    color: #818CF8;
    flex-shrink: 0;
}

.docs-value-prop-content h4 {
    margin: 0 0 0.25rem 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #F1F5F9;
}

.docs-value-prop-content p {
    margin: 0;
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.4;
}

/* =============================================
 * 9. ROADMAP / TIMELINE
 * ============================================= */
.docs-roadmap {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 1rem;
    position: relative;
}

.docs-roadmap::before {
    content: '';
    position: absolute;
    left: 20px;
    top: 24px;
    bottom: 24px;
    width: 2px;
    background: linear-gradient(to bottom, #10B981, #818CF8, #64748B);
}

.docs-roadmap-item {
    display: flex;
    gap: 1.5rem;
    padding: 1rem 0;
}

.docs-roadmap-marker {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1rem;
    flex-shrink: 0;
    z-index: 1;
}

.docs-roadmap-item.available .docs-roadmap-marker {
    background-color: rgba(16, 185, 129, 0.2);
    color: #10B981;
    border: 2px solid #10B981;
}

.docs-roadmap-item.upcoming .docs-roadmap-marker {
    background-color: rgba(99, 102, 241, 0.2);
    color: #818CF8;
    border: 2px solid #818CF8;
}

.docs-roadmap-item.future .docs-roadmap-marker {
    background-color: rgba(100, 116, 139, 0.2);
    color: #94A3B8;
    border: 2px solid #64748B;
}

.docs-roadmap-content h4 {
    margin: 0 0 0.5rem 0;
    font-size: 1rem;
    font-weight: 600;
}

.docs-roadmap-item.available .docs-roadmap-content h4 {
    color: #10B981;
}

.docs-roadmap-item.upcoming .docs-roadmap-content h4 {
    color: #818CF8;
}

.docs-roadmap-item.future .docs-roadmap-content h4 {
    color: #94A3B8;
}

.docs-roadmap-content ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.docs-roadmap-content li {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 0.25rem;
    padding-left: 1rem;
    position: relative;
}

.docs-roadmap-content li::before {
    content: '\2022';
    position: absolute;
    left: 0;
    color: rgba(255, 255, 255, 0.3);
}

/* =============================================
 * 10. NEXT STEPS NAVIGATION
 * ============================================= */
.docs-next-steps {
    margin: 2.5rem 0 2rem;
}

.docs-next-steps h2 {
    margin: 0 0 0.5rem 0;
    font-size: 1.5rem;
    font-weight: 600;
    color: #F1F5F9;
}

.docs-next-steps > p {
    margin: 0 0 1.5rem 0;
    color: rgba(255, 255, 255, 0.6);
}

.docs-next-steps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.docs-next-step-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    background-color: rgba(15, 23, 42, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.docs-next-step-card:hover {
    border-color: rgba(99, 102, 241, 0.3);
    transform: translateY(-2px);
    background-color: rgba(15, 23, 42, 0.6);
}

.docs-next-step-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(139, 92, 246, 0.2));
    border-radius: 10px;
    color: #818CF8;
    font-size: 1.125rem;
    flex-shrink: 0;
}

.docs-next-step-content {
    flex: 1;
}

.docs-next-step-content h4 {
    margin: 0 0 0.25rem 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #F1F5F9;
}

.docs-next-step-content p {
    margin: 0;
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.5);
}

.docs-next-step-arrow {
    color: rgba(255, 255, 255, 0.3);
    transition: all 0.2s ease;
}

.docs-next-step-card:hover .docs-next-step-arrow {
    color: #818CF8;
    transform: translateX(4px);
}

/* =============================================
 * 11. TABS
 * ============================================= */
.docs-tabs {
    display: flex;
    gap: 0.5rem;
    padding: 0.375rem;
    background: rgba(15, 23, 42, 0.6);
    border-radius: 10px;
    width: fit-content;
}

.docs-tab {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    background: none;
}

.docs-tab:hover {
    color: rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.05);
}

.docs-tab.active {
    background: linear-gradient(135deg, #6366F1, #8B5CF6);
    color: white;
}

.docs-tab-content {
    display: none;
    margin-top: 1rem;
    animation: docs-fadeIn 0.3s ease;
}

.docs-tab-content.active {
    display: block;
}

@keyframes docs-fadeIn {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =============================================
 * 12. CHECKLISTS & LISTS
 * ============================================= */
.docs-checklist {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    margin-top: 1rem;
}

.docs-checklist-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.875rem;
    background: rgba(16, 185, 129, 0.08);
    border-radius: 8px;
    border: 1px solid rgba(16, 185, 129, 0.15);
}

.docs-checklist-item i {
    color: #10B981;
    font-size: 1rem;
    margin-top: 0.125rem;
}

.docs-checklist-item strong {
    display: block;
    color: #f1f5f9;
    font-size: 0.875rem;
    margin-bottom: 0.125rem;
}

.docs-checklist-item span {
    display: block;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.8125rem;
}

/* Prerequisite Cards */
.docs-prereq-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.docs-prereq-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 1.25rem;
    background-color: rgba(15, 23, 42, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    transition: all 0.2s ease;
}

.docs-prereq-card:hover {
    border-color: rgba(16, 185, 129, 0.3);
    background-color: rgba(15, 23, 42, 0.6);
    transform: translateY(-2px);
}

.docs-prereq-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(6, 182, 212, 0.15));
    border: 1px solid rgba(16, 185, 129, 0.2);
    border-radius: 10px;
    margin-bottom: 0.875rem;
    font-size: 1rem;
    color: #10B981;
}

.docs-prereq-content h4 {
    margin: 0 0 0.375rem 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #F1F5F9;
}

.docs-prereq-content p {
    margin: 0 0 0.75rem 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.6);
}

.docs-prereq-link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #10B981;
    text-decoration: none;
    transition: all 0.2s ease;
}

.docs-prereq-link:hover {
    color: #34D399;
    gap: 0.5rem;
}

/* Prerequisites Section (full wrapper) */
.docs-prereq-section {
    margin: 2rem 0;
    padding: 1.5rem;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.05), rgba(6, 182, 212, 0.05));
    border: 1px solid rgba(16, 185, 129, 0.15);
    border-radius: 16px;
}

.docs-prereq-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(16, 185, 129, 0.1);
}

.docs-prereq-title h3 {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: #F1F5F9;
}

.docs-prereq-title p {
    margin: 0.125rem 0 0 0;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.5);
}

.docs-prereq-card-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(6, 182, 212, 0.15));
    border: 1px solid rgba(16, 185, 129, 0.2);
    border-radius: 10px;
    margin-bottom: 0.875rem;
    font-size: 1rem;
    color: #10B981;
}

.docs-prereq-status {
    position: absolute;
    top: 1rem;
    right: 1rem;
    font-size: 0.5rem;
    color: rgba(255, 255, 255, 0.2);
}

.docs-prereq-note {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
    font-style: italic;
}

.docs-prereq-note i {
    font-size: 0.6875rem;
    color: rgba(6, 182, 212, 0.6);
}

/* Config Checklist */
.docs-config-checklist {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1rem;
}

.docs-config-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.625rem 0.875rem;
    background-color: rgba(16, 185, 129, 0.05);
    border: 1px solid rgba(16, 185, 129, 0.15);
    border-radius: 6px;
}

.docs-config-item i {
    color: #10B981;
    margin-top: 0.125rem;
}

.docs-config-item strong {
    display: block;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.9);
}

.docs-config-item span {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.5);
}

/* =============================================
 * 13. MANAGEMENT & MONITORING
 * ============================================= */
.docs-management-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-top: 1rem;
}

.docs-management-card {
    padding: 1.25rem;
    background: rgba(15, 23, 42, 0.6);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.docs-management-card.warning {
    border-color: rgba(239, 68, 68, 0.3);
}

.docs-management-card h3 {
    font-size: 1rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0.75rem 0 0.5rem 0;
}

.docs-management-card > p {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.6);
    margin: 0 0 1rem 0;
}

.docs-management-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: white;
}

.docs-management-icon.start {
    background: linear-gradient(135deg, #10B981, #06B6D4);
}

.docs-management-icon.stop {
    background: linear-gradient(135deg, #F59E0B, #D97706);
}

.docs-management-icon.restart {
    background: linear-gradient(135deg, #6366F1, #8B5CF6);
}

.docs-management-icon.terminate {
    background: linear-gradient(135deg, #EF4444, #DC2626);
}

.docs-management-steps {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.docs-management-steps span {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.6);
}

.docs-management-steps span i {
    color: rgba(255, 255, 255, 0.3);
    font-size: 0.75rem;
}

.docs-management-warning {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding: 0.625rem 0.75rem;
    background: rgba(239, 68, 68, 0.1);
    border-radius: 6px;
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.docs-management-warning i {
    color: #EF4444;
    font-size: 0.875rem;
}

.docs-management-warning span {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.7);
}

/* Monitoring Cards */
.docs-monitoring-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.docs-monitoring-card {
    padding: 1.5rem;
    background: rgba(15, 23, 42, 0.6);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.docs-monitoring-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.docs-monitoring-header i {
    color: #8B5CF6;
    font-size: 1.25rem;
}

.docs-monitoring-header h3 {
    font-size: 1.0625rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0;
}

.docs-monitoring-card > p {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.6);
    margin: 0 0 1.25rem 0;
}

/* Metric Bars */
.docs-metric-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.docs-metric {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.docs-metric-name {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.7);
    width: 110px;
    flex-shrink: 0;
}

.docs-metric-bar {
    flex: 1;
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    overflow: hidden;
}

.docs-metric-fill {
    height: 100%;
    background: linear-gradient(90deg, #6366F1, #8B5CF6);
    border-radius: 4px;
    transition: width 0.3s ease;
}

.docs-metric-value {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #f1f5f9;
    width: 40px;
    text-align: right;
}

/* Alert List */
.docs-alert-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.docs-alert-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem;
    background: rgba(15, 23, 42, 0.6);
    border-radius: 8px;
}

.docs-alert-item i {
    font-size: 1rem;
    margin-top: 0.125rem;
}

.docs-alert-item.warning i {
    color: #F59E0B;
}

.docs-alert-item.error i {
    color: #EF4444;
}

.docs-alert-item.info i {
    color: #06B6D4;
}

.docs-alert-item strong {
    display: block;
    font-size: 0.8125rem;
    color: #f1f5f9;
    margin-bottom: 0.125rem;
}

.docs-alert-item span {
    display: block;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
}

/* =============================================
 * 14. LIFECYCLE DIAGRAMS
 * ============================================= */
.docs-lifecycle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 2rem 1rem;
    background: rgba(15, 23, 42, 0.6);
    border-radius: 12px;
    margin: 1.5rem 0;
    flex-wrap: wrap;
}

.docs-lifecycle-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    text-align: center;
}

.docs-lifecycle-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    color: white;
}

.docs-lifecycle-icon.create {
    background: linear-gradient(135deg, #6366F1, #8B5CF6);
}

.docs-lifecycle-icon.start {
    background: linear-gradient(135deg, #10B981, #06B6D4);
}

.docs-lifecycle-icon.stop {
    background: linear-gradient(135deg, #F59E0B, #EF4444);
}

.docs-lifecycle-icon.terminate {
    background: linear-gradient(135deg, #EF4444, #DC2626);
}

.docs-lifecycle-details h3 {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0 0 0.25rem 0;
}

.docs-lifecycle-details p {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    margin: 0;
}

.docs-lifecycle-arrow {
    color: rgba(255, 255, 255, 0.3);
    font-size: 1.25rem;
    padding: 0 0.5rem;
}

/* =============================================
 * 15. ALERTS & WARNINGS
 * ============================================= */
.docs-alert {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    border-radius: 8px;
    margin: 1rem 0;
}

.docs-alert.info {
    background: rgba(6, 182, 212, 0.1);
    border: 1px solid rgba(6, 182, 212, 0.2);
}

.docs-alert.info i {
    color: #06B6D4;
}

.docs-alert.warning {
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.2);
}

.docs-alert.warning i {
    color: #F59E0B;
}

.docs-alert.error {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.docs-alert.error i {
    color: #EF4444;
}

.docs-alert.success {
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.docs-alert.success i {
    color: #10B981;
}

.docs-alert i {
    font-size: 1.125rem;
}

.docs-alert p {
    margin: 0;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.8);
}

/* =============================================
 * 16. BUTTONS
 * ============================================= */
.docs-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    font-weight: 600;
    font-size: 0.875rem;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.2s ease;
    border: none;
    cursor: pointer;
}

.docs-btn-primary {
    background: linear-gradient(135deg, #6366F1, #8B5CF6);
    color: white;
}

.docs-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
}

.docs-btn-secondary {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.9);
}

.docs-btn-secondary:hover {
    border-color: rgba(99, 102, 241, 0.4);
    background: rgba(99, 102, 241, 0.1);
}

.docs-btn-group {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
}

.docs-btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: transparent;
    color: #818CF8;
    font-weight: 600;
    font-size: 0.875rem;
    border: 1px solid rgba(99, 102, 241, 0.3);
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
}

.docs-btn-outline:hover {
    background-color: rgba(99, 102, 241, 0.1);
    border-color: rgba(99, 102, 241, 0.5);
}

.docs-action-button-group {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
}

.docs-action-note {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.5);
}

/* =============================================
 * 17. BADGES & TAGS
 * ============================================= */
.docs-badge {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 100px;
}

.docs-badge.beta {
    background-color: rgba(139, 92, 246, 0.2);
    color: #A78BFA;
}

.docs-badge.new {
    background-color: rgba(16, 185, 129, 0.2);
    color: #10B981;
}

.docs-badge.coming-soon {
    background-color: rgba(245, 158, 11, 0.2);
    color: #F59E0B;
}

.docs-badge.deprecated {
    background-color: rgba(239, 68, 68, 0.2);
    color: #EF4444;
}

.docs-tag {
    display: inline-block;
    margin-top: 0.5rem;
    padding: 0.125rem 0.5rem;
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 100px;
}

.docs-tag.available {
    background-color: rgba(16, 185, 129, 0.2);
    color: #10B981;
}

.docs-tag.coming-soon {
    background-color: rgba(245, 158, 11, 0.2);
    color: #F59E0B;
}

.docs-tag.beta {
    background-color: rgba(139, 92, 246, 0.2);
    color: #A78BFA;
}

.docs-tag.recommended {
    background-color: rgba(99, 102, 241, 0.2);
    color: #818CF8;
}

/* =============================================
 * 18. ADDITIONAL PATTERNS
 * ============================================= */

/* Coming Soon / Beta Feature Cards */
.docs-coming-soon {
    display: flex;
    gap: 1.5rem;
    padding: 1.5rem;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.05), rgba(245, 158, 11, 0.02));
    border: 1px solid rgba(245, 158, 11, 0.2);
    border-radius: 12px;
    margin: 1.5rem 0;
}

.docs-coming-soon-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(245, 158, 11, 0.15);
    border-radius: 12px;
    color: #F59E0B;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.docs-coming-soon-content h3 {
    margin: 0 0 0.5rem 0;
    font-size: 1.125rem;
    color: #F59E0B;
}

.docs-coming-soon-content p {
    margin: 0 0 0.75rem 0;
    font-size: 0.9375rem;
    color: rgba(255, 255, 255, 0.7);
}

.docs-coming-soon-content ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.docs-coming-soon-content li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 0.375rem;
}

.docs-coming-soon-content li i {
    color: #F59E0B;
    font-size: 0.75rem;
}

/* Beta Card Variant */
.docs-beta-card {
    display: flex;
    gap: 1.5rem;
    padding: 1.5rem;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.08), rgba(139, 92, 246, 0.03));
    border: 1px solid rgba(139, 92, 246, 0.25);
    border-radius: 12px;
    margin: 1.5rem 0;
}

.docs-beta-card-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(139, 92, 246, 0.15);
    border-radius: 12px;
    color: #A78BFA;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.docs-beta-card-content h3 {
    margin: 0 0 0.5rem 0;
    font-size: 1.125rem;
    color: #A78BFA;
}

.docs-beta-card-content p {
    margin: 0 0 0.75rem 0;
    font-size: 0.9375rem;
    color: rgba(255, 255, 255, 0.7);
}

.docs-beta-card-content ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.docs-beta-card-content li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 0.375rem;
}

.docs-beta-card-content li i {
    color: #A78BFA;
    font-size: 0.75rem;
}

/* Coming Soon Section (centered card for future features) */
.docs-coming-soon-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2.5rem;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.05), rgba(245, 158, 11, 0.02));
    border: 1px solid rgba(245, 158, 11, 0.2);
    border-radius: 12px;
    margin: 1.5rem 0;
}

.docs-coming-soon-section .docs-coming-soon-icon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(245, 158, 11, 0.15);
    border-radius: 16px;
    color: #F59E0B;
    font-size: 1.75rem;
    margin-bottom: 1rem;
}

.docs-coming-soon-section h4 {
    margin: 0 0 0.75rem 0;
    font-size: 1.125rem;
    color: #F1F5F9;
}

.docs-coming-soon-section p {
    margin: 0 0 1rem 0;
    font-size: 0.9375rem;
    color: rgba(255, 255, 255, 0.7);
    max-width: 500px;
}

/* Inline Coming Soon Badge */
.docs-component-card .docs-coming-soon,
.docs-component-content .docs-coming-soon,
.docs-coming-soon-section .docs-coming-soon {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem;
    background-color: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #F59E0B;
    margin-top: 0.75rem;
}

.docs-component-card .docs-coming-soon i,
.docs-component-content .docs-coming-soon i,
.docs-coming-soon-section .docs-coming-soon i {
    font-size: 0.6875rem;
}

/* Highlight Box (feature callout) */
.docs-highlight-box {
    display: flex;
    gap: 1.25rem;
    padding: 1.5rem;
    border-radius: 12px;
    margin: 1.5rem 0;
}

.docs-highlight-box.green {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.08), rgba(16, 185, 129, 0.03));
    border: 1px solid rgba(16, 185, 129, 0.25);
}

.docs-highlight-box.blue {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.08), rgba(99, 102, 241, 0.03));
    border: 1px solid rgba(99, 102, 241, 0.25);
}

.docs-highlight-box.purple {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.08), rgba(139, 92, 246, 0.03));
    border: 1px solid rgba(139, 92, 246, 0.25);
}

.docs-highlight-box.orange {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.08), rgba(245, 158, 11, 0.03));
    border: 1px solid rgba(245, 158, 11, 0.25);
}

.docs-highlight-box-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.docs-highlight-box.green .docs-highlight-box-icon {
    background-color: rgba(16, 185, 129, 0.15);
    color: #10B981;
}

.docs-highlight-box.blue .docs-highlight-box-icon {
    background-color: rgba(99, 102, 241, 0.15);
    color: #818CF8;
}

.docs-highlight-box.purple .docs-highlight-box-icon {
    background-color: rgba(139, 92, 246, 0.15);
    color: #A78BFA;
}

.docs-highlight-box.orange .docs-highlight-box-icon {
    background-color: rgba(245, 158, 11, 0.15);
    color: #F59E0B;
}

.docs-highlight-box-content h4 {
    margin: 0 0 0.5rem 0;
    font-size: 1rem;
    color: #F1F5F9;
}

.docs-highlight-box-content p {
    margin: 0;
    font-size: 0.9375rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
}

/* Subsection Title (within phase content) */
.docs-subsection-title {
    font-size: 1rem;
    font-weight: 600;
    color: #F1F5F9;
    margin: 1.5rem 0 1rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Success Banner */
.docs-success-banner {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 2rem 0;
    padding: 1.25rem 1.5rem;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(16, 185, 129, 0.05));
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 12px;
}

.docs-success-banner-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(16, 185, 129, 0.2);
    border-radius: 50%;
}

.docs-success-banner-icon i {
    font-size: 1.5rem;
    color: #10B981;
}

.docs-success-banner-content {
    flex: 1;
}

.docs-success-banner-content h3 {
    margin: 0 0 0.25rem 0;
    font-size: 1.125rem;
    color: #10B981;
}

.docs-success-banner-content p {
    margin: 0;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9375rem;
}

/* Option Lists (for signup methods, auth options, etc.) */
.docs-option-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1rem;
}

.docs-option-item {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.875rem 1rem;
    background-color: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    transition: all 0.2s ease;
}

.docs-option-item:hover {
    border-color: rgba(99, 102, 241, 0.3);
}

.docs-option-item i {
    font-size: 1.25rem;
    width: 24px;
    text-align: center;
    color: #818CF8;
}

.docs-option-item i.fa-google {
    color: #EA4335;
}

.docs-option-item i.fa-github {
    color: #F1F5F9;
}

.docs-option-item strong {
    display: block;
    font-size: 0.875rem;
    color: #F1F5F9;
}

.docs-option-item span {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.5);
}

/* Requirements Box (for password rules, etc.) */
.docs-requirements {
    margin-top: 1rem;
    padding: 1rem;
    background-color: rgba(16, 185, 129, 0.05);
    border: 1px solid rgba(16, 185, 129, 0.15);
    border-radius: 10px;
}

.docs-requirements-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    font-weight: 600;
    font-size: 0.875rem;
    color: #10B981;
}

.docs-requirements-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
}

.docs-requirements-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.7);
}

.docs-requirements-item i {
    color: #10B981;
    font-size: 0.75rem;
}

/* Horizontal Flow (login steps, etc.) */
.docs-flow {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1rem;
    padding: 1rem;
    background-color: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    overflow-x: auto;
}

.docs-flow-step {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
}

.docs-flow-step-num {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.3), rgba(139, 92, 246, 0.3));
    color: #818CF8;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 50%;
}

.docs-flow-step span {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.7);
}

.docs-flow-arrow {
    color: rgba(255, 255, 255, 0.3);
    font-size: 0.75rem;
}

/* App Badges (authenticator apps, etc.) */
.docs-app-list {
    margin-top: 1rem;
    padding: 0.875rem 1rem;
    background-color: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
}

.docs-app-label {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.5);
    margin-right: 0.75rem;
}

.docs-app-badges {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.docs-app-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    background-color: rgba(99, 102, 241, 0.1);
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: 100px;
    font-size: 0.75rem;
    color: #818CF8;
}

/* MFA Benefits (green feature grid) */
.docs-benefits-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin: 1.5rem 0;
}

.docs-benefit-card {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    background-color: rgba(16, 185, 129, 0.05);
    border: 1px solid rgba(16, 185, 129, 0.15);
    border-radius: 10px;
}

.docs-benefit-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(16, 185, 129, 0.15);
    border-radius: 8px;
    color: #10B981;
    flex-shrink: 0;
}

.docs-benefit-content strong {
    display: block;
    font-size: 0.875rem;
    color: #F1F5F9;
    margin-bottom: 0.25rem;
}

.docs-benefit-content span {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.4;
}

/* Category Grid */
.docs-category-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
    margin-top: 1rem;
}

.docs-category-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
    background-color: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    text-align: center;
    transition: all 0.2s ease;
}

.docs-category-item:hover {
    border-color: rgba(99, 102, 241, 0.3);
    transform: translateY(-2px);
}

.docs-category-item i {
    font-size: 1.5rem;
    color: #818CF8;
}

.docs-category-item span {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.7);
}

/* Filter Options */
.docs-filter-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    margin-top: 1rem;
}

.docs-filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.75rem 1rem;
    background-color: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
}

.docs-filter-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #F1F5F9;
}

.docs-filter-label i {
    color: #818CF8;
}

.docs-filter-examples {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.5);
}

/* Details Cards */
.docs-details-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin: 1.5rem 0;
}

.docs-details-card {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    background-color: rgba(15, 23, 42, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    transition: all 0.2s ease;
}

.docs-details-card:hover {
    border-color: rgba(99, 102, 241, 0.2);
}

.docs-details-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 1rem;
    flex-shrink: 0;
}

.docs-details-icon.blue {
    background-color: rgba(59, 130, 246, 0.15);
    color: #3B82F6;
}

.docs-details-icon.green {
    background-color: rgba(16, 185, 129, 0.15);
    color: #10B981;
}

.docs-details-icon.purple {
    background-color: rgba(139, 92, 246, 0.15);
    color: #8B5CF6;
}

.docs-details-icon.orange {
    background-color: rgba(245, 158, 11, 0.15);
    color: #F59E0B;
}

.docs-details-content h4 {
    margin: 0 0 0.5rem 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #F1F5F9;
}

.docs-details-content ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.docs-details-content li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 0.25rem;
}

.docs-details-content li i {
    color: #10B981;
    font-size: 0.625rem;
}

/* Duration Options */
.docs-duration-options {
    display: flex;
    gap: 0.75rem;
    margin-top: 1rem;
}

.docs-duration-option {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    background-color: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    transition: all 0.2s ease;
}

.docs-duration-option:hover {
    border-color: rgba(99, 102, 241, 0.3);
}

.docs-duration-option.featured {
    background-color: rgba(99, 102, 241, 0.1);
    border-color: rgba(99, 102, 241, 0.3);
}

.docs-duration-option i {
    font-size: 1.25rem;
    color: #818CF8;
}

.docs-duration-option strong {
    display: block;
    font-size: 0.875rem;
    color: #F1F5F9;
}

.docs-duration-option span {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
}

.docs-duration-option.featured span {
    color: #10B981;
}

/* Deploy Action Preview */
.docs-deploy-preview {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 1rem;
    padding: 0.875rem 1rem;
    background-color: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
}

.docs-deploy-preview-name {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9375rem;
    font-weight: 500;
    color: #F1F5F9;
}

.docs-deploy-preview-name i {
    color: #818CF8;
}

.docs-deploy-preview-btn {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, #6366F1, #8B5CF6);
    color: white;
    font-size: 0.8125rem;
    font-weight: 600;
    border-radius: 6px;
}

/* Pricing Grid */
.docs-pricing-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin: 1.5rem 0;
}

.docs-pricing-card {
    background-color: rgba(15, 23, 42, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    overflow: hidden;
}

.docs-pricing-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    background-color: rgba(15, 23, 42, 0.5);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.docs-pricing-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 1rem;
}

.docs-pricing-icon.compute {
    background-color: rgba(99, 102, 241, 0.15);
    color: #818CF8;
}

.docs-pricing-icon.apps {
    background-color: rgba(16, 185, 129, 0.15);
    color: #10B981;
}

.docs-pricing-header h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #F1F5F9;
}

.docs-pricing-body {
    padding: 1.25rem;
}

.docs-pricing-features {
    margin: 0 0 1rem 0;
    padding: 0;
    list-style: none;
}

.docs-pricing-features li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 0.5rem;
}

.docs-pricing-features li i {
    color: #10B981;
    font-size: 0.75rem;
}

.docs-pricing-example {
    padding: 1rem;
    background-color: rgba(99, 102, 241, 0.05);
    border: 1px solid rgba(99, 102, 241, 0.15);
    border-radius: 8px;
}

.docs-pricing-example-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.75rem;
}

.docs-pricing-tiers {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.docs-pricing-tier {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.docs-pricing-tier-name {
    font-size: 0.875rem;
    color: #F1F5F9;
}

.docs-pricing-tier-price {
    font-size: 0.875rem;
    font-weight: 600;
    color: #10B981;
}

.docs-license-tags {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
}

.docs-license-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 100px;
}

.docs-license-tag.free {
    background-color: rgba(16, 185, 129, 0.15);
    color: #10B981;
}

.docs-license-tag.premium {
    background-color: rgba(139, 92, 246, 0.15);
    color: #8B5CF6;
}

.docs-license-tag.byol {
    background-color: rgba(245, 158, 11, 0.15);
    color: #F59E0B;
}

/* Troubleshooting Cards */
.docs-troubleshooting-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin: 1.5rem 0;
}

.docs-troubleshooting-card {
    padding: 1.25rem;
    background-color: rgba(15, 23, 42, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
}

.docs-troubleshooting-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(245, 158, 11, 0.15);
    border-radius: 8px;
    margin-bottom: 0.75rem;
}

.docs-troubleshooting-icon i {
    color: #F59E0B;
    font-size: 1rem;
}

.docs-troubleshooting-card h4 {
    font-size: 0.9375rem;
    font-weight: 600;
    margin: 0 0 0.75rem 0;
    color: rgba(255, 255, 255, 0.9);
}

.docs-troubleshooting-card ul {
    margin: 0;
    padding-left: 1.25rem;
    list-style-type: disc;
}

.docs-troubleshooting-card li {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 0.25rem;
    line-height: 1.5;
}

.docs-troubleshooting-card code {
    font-size: 0.75rem;
    padding: 0.125rem 0.375rem;
    background-color: rgba(15, 23, 42, 0.6);
    border-radius: 4px;
}

/* Config Paths */
.docs-config-paths {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.docs-config-path {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background-color: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 6px;
    font-size: 0.8125rem;
}

.docs-config-path i {
    color: rgba(255, 255, 255, 0.5);
}

.docs-config-path code {
    background: none;
    padding: 0;
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.7);
}

/* Gold Button */
.docs-btn-gold {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: linear-gradient(135deg, #F59E0B, #D97706);
    color: #1a0a00;
    font-weight: 700;
    font-size: 0.875rem;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.2s ease;
    white-space: nowrap;
    border: none;
    cursor: pointer;
}

.docs-btn-gold:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
    color: #1a0a00;
}

/* Action Note */
.docs-action-note {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.5);
}

/* Nav to Settings */
.docs-nav-to-settings {
    text-align: center;
    margin-top: 1rem;
}

/* =============================================
 * 19. RESPONSIVE STYLES
 * ============================================= */
@media (max-width: 1024px) {
    .docs-highlights,
    .docs-type-grid,
    .docs-value-props,
    .docs-prereq-grid,
    .docs-next-steps-grid,
    .docs-benefits-grid,
    .docs-troubleshooting-grid,
    .docs-category-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    /* Single column layouts */
    .docs-highlights,
    .docs-components-grid,
    .docs-type-grid,
    .docs-type-grid.cols-2,
    .docs-roles-grid,
    .docs-value-props,
    .docs-feature-grid,
    .docs-feature-grid.cols-3,
    .docs-prereq-grid,
    .docs-checklist,
    .docs-status-grid,
    .docs-management-grid,
    .docs-monitoring-grid,
    .docs-next-steps-grid,
    .docs-benefits-grid,
    .docs-troubleshooting-grid,
    .docs-category-grid,
    .docs-filter-grid,
    .docs-details-grid,
    .docs-pricing-grid,
    .docs-requirements-grid,
    .docs-methods-grid {
        grid-template-columns: 1fr;
    }

    /* Flex layouts to column */
    .docs-duration-options {
        flex-direction: column;
    }

    .docs-coming-soon,
    .docs-beta-card {
        flex-direction: column;
    }

    .docs-success-banner {
        flex-direction: column;
        text-align: center;
    }

    /* Progress overview responsive */
    .docs-progress-overview {
        gap: 1rem;
    }

    .docs-progress-connector {
        display: none;
    }

    .docs-progress-phase {
        width: 45%;
    }

    /* Phase header responsive */
    .docs-phase-header {
        flex-wrap: wrap;
    }

    .docs-phase-toggle {
        position: absolute;
        right: 1rem;
        top: 1rem;
    }

    .docs-phase {
        position: relative;
    }

    /* Lifecycle responsive */
    .docs-lifecycle {
        flex-direction: column;
        gap: 1rem;
    }

    .docs-lifecycle-arrow {
        transform: rotate(90deg);
    }

    /* Tabs responsive */
    .docs-tabs {
        width: 100%;
    }

    .docs-tab {
        flex: 1;
        justify-content: center;
    }

    /* Roadmap responsive */
    .docs-roadmap::before {
        left: 19px;
    }

    /* Metric bars responsive */
    .docs-metric {
        flex-wrap: wrap;
    }

    .docs-metric-name {
        width: 100%;
        margin-bottom: 0.25rem;
    }

    .docs-metric-bar {
        flex: 1;
    }
}

/* =============================================
 * 20. API DOCUMENTATION STYLES
 * ============================================= */

/* Code blocks */
.docs-code-block {
    background: #1a1b26;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 1rem;
    margin: 1rem 0;
    overflow-x: auto;
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 0.875rem;
    line-height: 1.6;
}

.docs-code-block code {
    background: transparent;
    padding: 0;
    color: #e2e8f0;
}

.docs-code-block-small {
    background: #1a1b26;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    padding: 0.75rem;
    margin: 0.5rem 0;
    overflow-x: auto;
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 0.8rem;
    line-height: 1.5;
}

.docs-code-block-small code {
    background: transparent;
    padding: 0;
    color: #e2e8f0;
}

/* Inline code */
.docs-code-inline {
    background: rgba(99, 102, 241, 0.15);
    color: #a5b4fc;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 0.875em;
    word-break: break-all;
}

/* Method badges for API endpoints */
.docs-method-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-right: 0.75rem;
}

.docs-method-badge.get {
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.docs-method-badge.post {
    background: rgba(59, 130, 246, 0.2);
    color: #3b82f6;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.docs-method-badge.put {
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.docs-method-badge.delete {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

/* Code tabs for language examples */
.docs-code-tabs {
    margin: 1.5rem 0;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    overflow: hidden;
}

.docs-code-tab-buttons {
    display: flex;
    background: rgba(15, 23, 42, 0.8);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.docs-code-tab-btn {
    flex: 1;
    padding: 0.75rem 1rem;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.docs-code-tab-btn:hover {
    color: rgba(255, 255, 255, 0.9);
    background: rgba(99, 102, 241, 0.1);
}

.docs-code-tab-btn.active {
    color: #a5b4fc;
    background: rgba(99, 102, 241, 0.2);
    border-bottom: 2px solid #6366f1;
}

.docs-code-tab-btn i {
    font-size: 1rem;
}

.docs-code-tab-content {
    display: none;
    background: #1a1b26;
}

.docs-code-tab-content.active {
    display: block;
}

.docs-code-tab-content .docs-code-block {
    margin: 0;
    border: none;
    border-radius: 0;
}

/* Red icon variant for error codes */
.docs-details-icon.red {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}