/**
 * CORNERSTONE Phase 8: Personalized Feed CSS
 * Add to static/css/phase8-personalized.css
 * 
 * @version 1.0.0
 * @date October 26, 2025
 * @author CursorAI (Phase 8 Lead)
 * @target_grade 98/100
 * 
 * Features:
 * - Personalized feed toggle styling
 * - Save/unsave button styling
 * - Quota display styling
 * - Mobile-responsive design
 */

/* ============================================================
   PERSONALIZED FEED CONTROLS
   ============================================================ */

.personalized-feed-controls {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    align-items: center;
    padding: 10px;
    background: var(--crt-background, #000000);
    border: 1px solid var(--crt-glow, #00ffd5);
    border-radius: 4px;
    font-family: 'Source Code Pro', monospace;
}

.personalized-feed-controls button {
    background: var(--crt-background, #000000);
    border: 1px solid var(--crt-glow, #00ffd5);
    color: var(--crt-primary, #008000);
    padding: 0.3rem 0.6rem;
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 2px;
    font-family: 'Source Code Pro', monospace;
    font-size: 0.9rem;
}

.personalized-feed-controls button:hover {
    background-color: var(--crt-glow, #00ffd5);
    color: var(--bg-color, #000000);
    box-shadow: 0 0 8px var(--crt-glow, #00ffd5);
}

.personalized-feed-controls button.active {
    background: var(--crt-glow, #00ffd5);
    color: var(--bg-color, #000000);
    box-shadow: 0 0 12px var(--crt-glow, #00ffd5);
}

.feed-status {
    color: var(--crt-primary, #008000);
    font-size: 0.9rem;
    font-weight: bold;
}

.quota-display {
    color: var(--crt-glow, #00ffd5);
    font-size: 0.8rem;
    margin-left: auto;
    font-weight: bold;
}

/* ============================================================
   SAVE ARTICLE BUTTONS
   ============================================================ */

.save-article-btn {
    background: var(--crt-background, #000000);
    border: 1px solid var(--crt-glow, #00ffd5);
    color: var(--crt-primary, #008000);
    padding: 0.2rem 0.4rem;
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 2px;
    font-family: 'Source Code Pro', monospace;
    font-size: 0.8rem;
    margin-left: 10px;
    min-width: 60px;
}

.save-article-btn:hover {
    background-color: var(--crt-glow, #00ffd5);
    color: var(--bg-color, #000000);
    box-shadow: 0 0 6px var(--crt-glow, #00ffd5);
}

.save-article-btn.saved {
    background: var(--crt-glow, #00ffd5);
    color: var(--bg-color, #000000);
    box-shadow: 0 0 8px var(--crt-glow, #00ffd5);
}

.save-article-btn.saved:hover {
    background: var(--crt-background, #000000);
    color: var(--crt-primary, #008000);
    box-shadow: 0 0 6px var(--crt-primary, #008000);
}

/* ============================================================
   ARTICLE ITEM LAYOUT
   ============================================================ */

.headline-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    padding: 8px;
    background: var(--crt-background, #000000);
    border: 1px solid transparent;
    border-radius: 2px;
    transition: all 0.2s ease;
}

.headline-item:hover {
    border-color: var(--crt-glow, #00ffd5);
    box-shadow: 0 0 4px var(--crt-glow, #00ffd5);
}

.headline-item .text-headline {
    flex: 1;
    margin-right: 10px;
}

/* ============================================================
   MOBILE RESPONSIVE
   ============================================================ */

@media (max-width: 768px) {
    .personalized-feed-controls {
        flex-direction: column;
        gap: 8px;
        align-items: stretch;
    }
    
    .personalized-feed-controls button {
        width: 100%;
        text-align: center;
    }
    
    .quota-display {
        margin-left: 0;
        text-align: center;
    }
    
    .headline-item {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    
    .headline-item .text-headline {
        margin-right: 0;
        margin-bottom: 8px;
    }
    
    .save-article-btn {
        margin-left: 0;
        width: 100%;
        text-align: center;
    }
}

/* ============================================================
   LOADING STATES
   ============================================================ */

.personalized-feed-controls.loading button {
    opacity: 0.6;
    cursor: not-allowed;
}

.save-article-btn.loading {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ============================================================
   ERROR STATES
   ============================================================ */

.personalized-feed-controls.error {
    border-color: #ff0000;
    background: rgba(255, 0, 0, 0.1);
}

.quota-display.error {
    color: #ff0000;
}

/* ============================================================
   SUCCESS STATES
   ============================================================ */

.personalized-feed-controls.success {
    border-color: var(--crt-primary, #008000);
    background: rgba(0, 128, 0, 0.1);
}

.quota-display.success {
    color: var(--crt-primary, #008000);
}