/* Theme variables */
:root {
    --bg-color: #ffffff;
    --text-color: #212529;
    --card-bg: #f8f9fa;
    --border-color: #dee2e6;
    --unread-color: #666666;
    --read-color: #808488;
    --hover-color: #0d6efd;
}

[data-bs-theme="dark"] {
    --bg-color: #212529;
    --text-color: #f8f9fa;
    --card-bg: #2b3035;
    --border-color: #495057;
    --unread-color: #e9ecef;
    --read-color: #6c757d;
    --hover-color: #6ea8fe;
}

/* Base styles */
body {
    background-color: var(--bg-color);
    color: var(--text-color);
    transition: background-color 0.3s ease, color 0.3s ease;
}

.card {
    background-color: var(--card-bg);
    border-color: var(--border-color);
}

/* Clock icon */
.bi-clock-fill {
    color: #dc3545;
    margin-right: 0.25rem;
}

/* Unread items */
.newsLink {
    color: var(--unread-color);
}

/* Read items */
.newsLink.read {
    color: var(--read-color);
}

/* Hover state */
.newsLink:hover {
    color: var(--hover-color);
}

/* Date and time */
.date-time {
    display: block;
    text-align: left;
    white-space: nowrap;
    line-height: 1.2;
    color: var(--text-color);
}

.time {
    display: inline;
    font-size: 0.875em;
    opacity: 0.8;
}

@media (min-width: 768px) {
    .date-time {
        text-align: right;
    }
}

/* Use Bootstrap grid for responsive columns; no custom breakpoint overrides */