/*public/css/sentinel.css*/

/* Layout */
body {
    margin: 0;
    padding: 0;
    font-family: system-ui, sans-serif;
    background-color: #f0f0f0;
}

.topbar {
    background-color: #1a1a1a;
    color: #fff;
    padding: 0.75rem 1rem;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    align-items: center;
}

.topbar .logo {
    font-weight: bold;
    font-size: 1.25rem;
    color: white;
    text-decoration: none;
}

/* Main layout */
.main-container {
    display: flex;
    flex-direction: row;
    min-height: calc(100vh - 50px);
}

.content-area {
    flex: 1;
    padding-top: 0.5rem;
    padding-left: 2rem;
    padding-right: 2rem;
}

/* Article card: halve vertical size */
.article-card {
    /* set a compact fixed height; adjust if needed */
    height: 70px;
    overflow: hidden;
    padding: 0.062rem 0.125rem;
    margin-bottom: 0.5rem;
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.article-card .row {
    height: 100%;
}

.article-card .card-title {
    font-size: 0.95rem;
    line-height: 1.1;
    margin-bottom: 0.125rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.article-card .card-text {
    font-size: 0.85rem;
    margin-bottom: 0.25rem;
    color: #555;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.article-card img,
.thumb-img {
    height: 100%;
    max-width: 100%;
    object-fit: cover;
    border-radius: 0.25rem;
}

/* Ensure right column anchors absolute children within compact height */
.col-md-3.position-relative {
    min-height: 100%;
}

/* Footer bits */
.card-footer span {
    font-size: 0.75rem;
    margin-right: 0.25rem;
}

/* Utility */
ul.list-unstyled li {
    margin-bottom: 0.25rem;
}

/* Keyword bar */
.keyword-bar {
    background-color: #e9ecef;
    padding: 0.5rem 1rem;
    border-bottom: 1px solid #dee2e6;
    white-space: nowrap;
    overflow-x: auto;
}

.keywords-scroll {
    display: flex;
    gap: 0.5rem;
    flex-wrap: nowrap;
    align-items: center;
}

/* Keyword pill links */
.keyword-pill {
    background-color: #ced4da;
    color: #212529;
    padding: 0.25rem 0.6rem;
    border-radius: 20px;
    font-size: 0.85rem;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background 0.2s ease;
}

.keyword-pill:hover {
    background-color: #adb5bd;
    text-decoration: none;
}

.keyword-pill.active {
    background-color: #495057;
    color: #fff;
}

/* Badges and buttons tighter */
.article-card .badge {
    font-size: 0.65rem;
    padding: 0.25em 0.5em;
    white-space: nowrap;
}

.article-card .btn {
    padding: 0.3rem 0.75rem;
    font-size: 0.75rem;
}

/* Headings above list */
.content-area h1 {
    margin-bottom: 1rem;
}

/* Grid spacing */
.row-cols-1 > .col {
    margin-bottom: 0.25rem;
}

/* Responsive */
@media (max-width: 768px) {
    .main-container { flex-direction: column; }
    .article-card { height: 76px;}
    .filter-bar{ flex-wrap:wrap; }
    .filter-select{ min-width:140px; }
}
.card-title a:hover { color: #0d6efd; }

.filter-bar{
    display:flex;
    gap:1rem;
    align-items:flex-end;
    padding:0.5rem 1rem;
    border-bottom:1px solid #dee2e6;
    background:#f8f9fa;
}
.filter-group{ display:flex; flex-direction:column; }
.filter-label{ font-size:.85rem; margin-bottom:.25rem; color:#495057; }
.filter-select{ min-width:180px; min-height:2.25rem; }

/* fallback for <div class="pagination"><span class="page"><a>… */
div.pagination{ display:flex; gap:.25rem; justify-content:center; }
div.pagination .page a,
div.pagination .next a,
div.pagination .last a,
div.pagination .previous a,
div.pagination .first a,
div.pagination .current{
    display:inline-block; padding:.35rem .65rem; border:1px solid #dee2e6; border-radius:.5rem;
}
div.pagination .current{ background:#0d6efd; color:#fff; border-color:#0d6efd; }

/* Show ~10 items max, then scroll */
.filter-dd .dropdown-menu.filter-menu{
    --filter-item-h: 2.2rem;              /* approx item height */
    max-height: calc(var(--filter-item-h) * 10);
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    max-width: 268px;                          /* optional: consistent width */
}
.filter-menu .dropdown-item{
    padding: .35rem .5rem;
    white-space: nowrap;                   /* keep one line per item */
}

/* Smaller cap on narrow screens */
@media (max-width: 576px){
    .filter-dd .dropdown-menu.filter-menu{
        max-height: calc(var(--filter-item-h) * 8);
        width: 220px;
    }
}