/* ── Design tokens ─────────────────────────────────────────────── */
:root {
    --primary: #667eea;
    --accent:  #764ba2;
    --bg:      #f1f5f9;
    --card:    #ffffff;
    --border:  #e2e8f0;
    --text:    #1e293b;
    --muted:   #64748b;
    --shadow:  0 1px 8px rgba(0,0,0,.06);
    --radius:  0.65rem;
    --fs-xs:   .65rem;
    --fs-sm:   .75rem;
    --fs-base: .82rem;
}
body.dark {
    --bg:     #0f172a;
    --card:   #1e293b;
    --border: #334155;
    --text:   #f1f5f9;
    --muted:  #94a3b8;
    --shadow: 0 1px 8px rgba(0,0,0,.3);
}

/* ── Base ──────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: var(--fs-base);
    background: var(--bg);
    color: var(--text);
    transition: background .25s, color .25s;
    margin: 0;
    -webkit-text-size-adjust: 100%;
}

/* ── Header ──────────────────────────────────────────────────────── */
.header-row2 {
    background: var(--card);
    font-size: var(--fs-sm);
}
.header-row2 .form-control,
.header-row2 .form-select { font-size: var(--fs-sm); height: 28px; }
.header-row2 .input-group-text { font-size: var(--fs-sm); padding: .15rem .4rem; }

@media (max-width: 768px) {
    .topbar-filters      { display: none; }
    .topbar-filters.open { display: flex; width: 100%; padding-top: .2rem; }
}

/* ── Glass card ────────────────────────────────────────────────── */
.glass-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
@media (max-width: 768px) {
    .glass-card { border-radius: .4rem; }
}

/* ── Dark mode overrides ──────────────────────────────────────── */
.dark .table            { color: var(--text); }
.dark .table-light      { background: #1e3050 !important; color: var(--text) !important; }
.dark .table-bordered   { border-color: var(--border); }
.dark .bg-light         { background: var(--card) !important; }
.dark .dataTables_wrapper .dataTables_info { color: var(--text); }
.dark .modal-content    { background: var(--card); color: var(--text); border-color: var(--border); }
.dark .modal-header     { border-color: var(--border); }
.dark .modal-footer     { border-color: var(--border); }
.dark .form-control,
.dark .form-select,
.dark .input-group-text { background: var(--bg); color: var(--text); border-color: var(--border); }
.dark .form-control:focus,
.dark .form-select:focus { color: var(--text); background: var(--bg); }
.dark .btn-close        { filter: invert(1) grayscale(100%) brightness(200%); }
.dark .list-group-item  { background: var(--card); color: var(--text); border-color: var(--border); }
.dark .card             { background: var(--card); color: var(--text); border-color: var(--border); }
.dark .text-body        { color: var(--text) !important; }
.dark .text-muted       { color: var(--muted) !important; }
.dark .header-row2      { background: var(--card); border-color: var(--border) !important; }
.dark .header-row2 .form-control,
.dark .header-row2 .form-select,
.dark .header-row2 .input-group-text { background: var(--bg); color: var(--text); border-color: var(--border); }
.dark .form-check-input { background-color: var(--bg); border-color: var(--border); }
.dark .form-check-input:checked { background-color: var(--primary); border-color: var(--primary); }
.dark .seg-control      { background: var(--bg); border-color: var(--border); }
.dark .seg-control .btn-check + .btn { color: var(--muted); }
.dark .seg-control .btn-check:checked + .btn { background: var(--card); color: var(--primary); }
.dark .pagination .page-link { background: var(--bg); color: var(--text); border-color: var(--border); }
.dark .pagination .page-item.active .page-link { background: var(--primary); border-color: var(--primary); color: #fff; }
.dark .shadow-sm        { box-shadow: 0 1px 4px rgba(0,0,0,.3) !important; }
.dark .form-label       { color: var(--text); }
.dark .opacity-75       { color: var(--muted); }

/* ── Datatable Tweaks ──────────────────────────────────────────── */
#rssTable { table-layout: fixed; width: 100% !important; }
.dark .dataTables_wrapper .dataTables_length select { background: var(--card); color: var(--text); border-color: var(--border); }
.dataTables_wrapper .dataTables_paginate .paginate_button { color: inherit !important; }

/* ── Feeds modal table ──────────────────────────────────────────── */
#feedsTable tbody tr:hover { background: rgba(102,126,234,.06); }
#feedsTable td, #feedsTable th { vertical-align: middle; padding: .3rem .4rem; }

/* ── Read state ───────────────────────────────────────────────── */
.read { opacity: .4; }

/* ── Article cards (mobile) ──────────────────────────────────── */
.art-table-wrap { }
.art-cards      { display: none; }
@media (max-width: 767px) {
    .art-table-wrap { display: none; }
    .art-cards      { display: block; }
}
.art-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: .5rem;
    margin-bottom: .35rem;
    overflow: hidden;
    transition: box-shadow .15s;
}
.art-card:hover    { box-shadow: 0 2px 12px rgba(102,126,234,.14); }
.art-card.read     { opacity: .42; }
.art-card-img {
    width: 100%;
    height: 100px;
    object-fit: cover;
    display: block;
}
.art-card-body     { padding: .4rem .55rem; }
.art-card-title    { font-size: .78rem; font-weight: 600; color: var(--text); line-height: 1.3; display: block; }
.art-card-meta     { font-size: var(--fs-xs); color: var(--muted); }

/* ── Category chips ──────────────────────────────────────────── */
#catChipsBar {
    display: flex; gap: .3rem;
    align-items: center; flex-wrap: nowrap; overflow-x: auto;
    scrollbar-width: none; -ms-overflow-style: none;
    flex: 1; min-width: 0;
}
#catChipsBar::-webkit-scrollbar { display: none; }
.cat-chip {
    display: inline-flex; align-items: center; gap: .2rem;
    padding: .12rem .5rem; border-radius: 999px;
    border: 1px solid var(--border); background: var(--bg);
    color: var(--muted); font-size: var(--fs-xs); cursor: pointer;
    transition: all .15s; white-space: nowrap; user-select: none;
}
.cat-chip:hover  { border-color: var(--primary); color: var(--primary); }
.cat-chip.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.cat-chip .chip-cnt { background: var(--border); border-radius: 999px; padding: 0 .3rem; font-size: .58rem; line-height: 1.3; color: inherit; }
.cat-chip.active .chip-cnt { background: rgba(255,255,255,.25); color: #fff; }

/* ── NEW articles banner ─────────────────────────────────────── */
#newArticlesBanner {
    border-bottom: 2px solid #ef4444;
    background: linear-gradient(135deg, rgba(239,68,68,.06), rgba(239,68,68,.02));
    padding: .3rem .65rem;
    display: none;
    font-size: var(--fs-sm);
}
.dark #newArticlesBanner {
    background: linear-gradient(135deg, rgba(239,68,68,.12), rgba(239,68,68,.04));
}
#newArticlesBanner .new-art-item {
    display: flex; align-items: center; gap: .35rem;
    padding: .2rem .35rem; border-radius: .4rem;
    transition: all .3s ease;
    max-height: 200px;
    overflow: hidden;
    font-size: var(--fs-sm);
}
#newArticlesBanner .new-art-item:hover { background: rgba(239,68,68,.08); }

#newArticlesBanner .new-art-item.dismissing {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
    transform: translateX(60px);
}

/* ── Inline preview row ──────────────────────────────────────── */
.preview-row td { border-top: none !important; padding: 0 !important; }
.preview-content {
    font-size: var(--fs-sm); line-height: 1.55; color: var(--text);
    padding: .4rem .75rem .5rem 1rem;
    border-left: 3px solid var(--primary);
    background: rgba(102,126,234,.05);
    max-height: 180px; overflow-y: auto;
    animation: fadeIn .15s;
}

/* ── Pulse / Blink ───────────────────────────────────────────── */
.pulse { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #22c55e; animation: blink 1.5s infinite; }
@keyframes blink { 50% { opacity: .3; } }

/* ── KBD ─────────────────────────────────────────────────────── */
kbd {
    display: inline-block; padding: 2px 6px;
    font-size: .7rem; font-family: inherit;
    background: var(--bg); border: 1px solid var(--border);
    border-radius: 4px; box-shadow: 0 1px 0 var(--border);
}

/* ── Toast container ────────────────────────────────────────── */
#toastContainer {
    position: fixed; bottom: 1rem; right: 1rem; z-index: 9999;
    display: flex; flex-direction: column; gap: .4rem;
}

/* ── Touch targets (mobile) ─────────────────────────────────── */
@media (max-width: 768px) {
    .btn       { min-height: 36px; min-width: 36px; }
    .btn-sm    { min-height: 30px; min-width: 30px; }
    .btn-xs    { min-height: 26px; min-width: 26px; }
}

/* ── Main content padding ───────────────────────────────────── */
#mainContent { padding: .4rem; }
@media (min-width: 768px) { #mainContent { padding: .5rem .75rem; } }

/* ── Main Row Compactness & Last Update ─────────────────────── */
#rssTable { font-size: var(--fs-sm); }
#rssTable tr.main-row td { padding-top: .2rem; padding-bottom: .2rem; }
#rssTable thead th { font-size: var(--fs-xs); padding: .3rem .5rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.main-row .icon-chev { font-size: .75rem !important; opacity: .7; }
.last-update-tag { font-size: .55rem; color: var(--muted); white-space: nowrap; margin-top: -2px; }
.hover-underline:hover { text-decoration: underline !important; }

/* ── Child row (articles list) compact ──────────────────────── */
.art-table-wrap { padding: .35rem !important; }
.art-table-wrap table { font-size: var(--fs-sm); }
.art-table-wrap th { font-size: var(--fs-xs); padding: .2rem .35rem !important; text-transform: uppercase; letter-spacing: .03em; }
.art-table-wrap td { padding: .15rem .35rem !important; vertical-align: middle; }
.art-table-wrap .btn-group .btn { padding: .1rem .3rem; font-size: var(--fs-sm); }
@media (max-width: 767px) {
    .art-table-wrap { display: none; }
}

/* ── Premium & Segmented Control ─────────────────────────────── */
.premium-badge {
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    color: #000; font-weight: 800; font-size: .55rem;
    padding: 1px 4px; border-radius: 4px; text-transform: uppercase;
    display: inline-block; vertical-align: middle; margin-left: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,.15);
}
.seg-control { display: flex; flex-wrap: wrap; gap: 2px; background: var(--bg); padding: 2px; border-radius: 8px; border: 1px solid var(--border); }
.seg-control .btn-check + .btn {
    font-size: .68rem; padding: .25rem .45rem; border: none; border-radius: 6px;
    color: var(--muted); background: transparent; flex: 1; min-width: 45px;
}
.seg-control .btn-check:checked + .btn {
    background: var(--card); color: var(--primary); font-weight: 700;
    box-shadow: 0 2px 6px rgba(0,0,0,.1);
}
.seg-control .btn-check:disabled + .btn { opacity: .4; cursor: not-allowed; }

/* ── DataTables compact overrides ────────────────────────────── */
.dataTables_wrapper .dataTables_paginate { font-size: var(--fs-xs); margin-top: .3rem; }
.dataTables_wrapper .dataTables_paginate .paginate_button { padding: .2rem .5rem !important; min-width: auto !important; min-height: auto !important; }
.dataTables_wrapper .dataTables_length { font-size: var(--fs-xs); }
.dataTables_wrapper .dataTables_length select { font-size: var(--fs-xs); padding: .15rem .3rem; height: auto; }

/* ── Utility compact ─────────────────────────────────────────── */
.badge { font-size: .6rem; padding: .15rem .35rem; }
.badge.bg-primary, .badge.bg-danger { font-size: .58rem; }
@media (max-width: 767px) {
    .modal-dialog { margin: .5rem; }
    .offcanvas { width: 320px !important; }
}

/* ── Layout: Split ───────────────────────────────────────────── */
#layoutSplit .row { min-height: calc(100vh - 130px); }
.opacity-40 { opacity: .4; }
.split-feed-row:hover { background: rgba(102,126,234,.07); }
.split-feed-active { background: rgba(102,126,234,.12) !important; border-left: 3px solid var(--primary); }

/* ── Layout: Cards grid ──────────────────────────────────────── */
#cardsGrid .glass-card:hover { box-shadow: 0 4px 16px rgba(102,126,234,.18); transform: translateY(-1px); transition: all .15s; }