*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --bg:       #f5f5f5;
    --surface:  #ffffff;
    --border:   #e0e0e0;
    --text:     #1a1a1a;
    --muted:    #666;
    --accent:   #0057b8;
    --danger:   #cc2200;
    --success:  #1a7a1a;
    --warn:     #b85c00;
    --radius:   6px;
    --shadow:   0 1px 3px rgba(0,0,0,.1);
}

body {
    font-family: system-ui, -apple-system, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.5;
}

/* ── Header ── */
.site-header {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: .75rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}
.logo {
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--accent);
    text-decoration: none;
}
.site-header nav { display: flex; gap: .75rem; flex-wrap: wrap; }
.site-header nav a {
    color: var(--text);
    text-decoration: none;
    font-size: .9rem;
}
.site-header nav a:hover { color: var(--accent); }
/* Overflow categories collapse into a CSS-only "Több" dropdown. */
.nav-more { position: relative; }
.nav-more > summary {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    cursor: pointer;
    list-style: none;
    font-size: .9rem;
    color: var(--text);
}
.nav-more > summary::-webkit-details-marker { display: none; }
.nav-more > summary:hover { color: var(--accent); }
.nav-more[open] > summary svg { transform: rotate(180deg); }
.nav-more-panel {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: .35rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: .5rem;
    display: flex;
    flex-direction: column;
    gap: .15rem;
    min-width: 160px;
    z-index: 30;
}
.nav-more-panel a { white-space: nowrap; padding: .25rem .35rem; font-size: .9rem; }
/* Search is an action, not a category — render it as a small button. */
.site-header nav a.nav-search {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin-left: .25rem;
    font-size: .8rem;
    color: #fff;
}
.site-header nav a.nav-search:hover { color: #fff; }
.nav-search svg { flex-shrink: 0; }

/* ── Footer ── */
.site-footer {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--muted);
    font-size: .85rem;
    border-top: 1px solid var(--border);
    margin-top: 3rem;
}

/* ── Flash messages ── */
.flash {
    padding: .75rem 1.25rem;
    margin: .75rem 1.5rem;
    border-radius: var(--radius);
    font-size: .9rem;
}
.flash-success { background: #d4edda; color: var(--success); border: 1px solid #b8dfc2; }
.flash-error   { background: #fde8e4; color: var(--danger);  border: 1px solid #f5c5bb; }

/* ── Container ── */
.container { max-width: 1100px; margin: 2rem auto; padding: 0 1rem; }
.page-title { font-size: 1.5rem; margin-bottom: 1.25rem; }

/* Home info bar: date, live clock, week number, name day */
.info-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1.25rem;
    padding: .6rem 1rem;
    margin-bottom: 1.25rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: .9rem;
    color: var(--muted);
}
.info-bar .info-clock { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text); }
.info-bar .info-nameday strong { color: var(--accent); }

/* ── Card grid ── */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.25rem;
}
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.card-img { width: 100%; height: 180px; object-fit: cover; display: block; }
.card-body { padding: .75rem; flex: 1; }
.card-title { font-size: 1rem; line-height: 1.4; margin-bottom: .5rem; }
.card-title a { color: var(--text); text-decoration: none; }
.card-title a:hover { color: var(--accent); }
.card-meta { font-size: .8rem; color: var(--muted); }

/* ── News grid (home): few image tiles spread among compact title cards ── */
/* Masonry-style columns: tall image tiles and short title cards pack together. */
.news-grid {
    columns: 260px;
    column-gap: 1.25rem;
}
.news-grid > .card {
    break-inside: avoid;
    margin-bottom: 1.25rem;
}
/* Meta (source · date) pinned to the bottom of every card, like the image tiles. */
.news-grid .card-body {
    display: flex;
    flex-direction: column;
}
.news-grid .card-meta {
    margin-top: auto;
    padding-top: .4rem;
}
/* Title-only cards: no image, full title wrapped over multiple lines. */
.news-row .card-title {
    margin-bottom: .35rem;
}

/* ── Pagination ── */
.pagination {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 2rem;
    justify-content: center;
}
.page-btn {
    display: inline-block;
    padding: .4rem .9rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    text-decoration: none;
    font-size: .9rem;
}
.page-btn:hover { background: var(--bg); }

/* ── Search ── */
.search-form { display: flex; gap: .5rem; margin-bottom: 1.25rem; }
.search-form input[type="search"] {
    flex: 1;
    padding: .5rem .75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 1rem;
}
.result-count { color: var(--muted); font-size: .9rem; margin-bottom: 1rem; }

/* ── Buttons ── */
.btn {
    display: inline-block;
    padding: .45rem 1rem;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    font-size: .9rem;
    text-decoration: none;
}
.btn:hover   { background: #003d82; }
.btn-sm      { padding: .25rem .6rem; font-size: .8rem; }
.btn-danger  { background: var(--danger); }
.btn-danger:hover { background: #991a00; }
.btn-gmail   { background: #EA4335; display: inline-flex; align-items: center; gap: .4rem; }
.btn-gmail:hover { background: #c5221f; }
.btn-gmail svg { flex-shrink: 0; }

/* ── Admin ── */
.admin-wrap   { max-width: 1000px; margin: 2rem auto; padding: 0 1rem; }
.admin-wrap h1 { font-size: 1.5rem; margin-bottom: 1rem; }
.admin-wrap h2 { font-size: 1.1rem; margin: 1.25rem 0 .5rem; }
.admin-nav  { display: flex; gap: .75rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.admin-nav a { color: var(--accent); text-decoration: none; font-size: .9rem; }

.admin-login { max-width: 360px; margin: 4rem auto; padding: 2rem; background: var(--surface);
               border: 1px solid var(--border); border-radius: var(--radius); }
.admin-login h1 { margin-bottom: 1rem; }
.field-row { display: flex; gap: .5rem; }
.field-row input { flex: 1; padding: .45rem .75rem; border: 1px solid var(--border);
                   border-radius: var(--radius); font-size: .9rem; }

.admin-table { width: 100%; border-collapse: collapse; margin-top: 1rem; font-size: .9rem; }
.admin-table th { text-align: left; border-bottom: 2px solid var(--border); padding: .5rem .75rem; }
.admin-table td { border-bottom: 1px solid var(--border); padding: .5rem .75rem; vertical-align: middle; }
.admin-table tr.unmapped td { background: #fff8e1; }
/* Selects in admin tables match the other form inputs. */
.admin-table select {
    width: 100%;
    padding: .45rem .75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: .9rem;
    background: var(--surface);
    color: var(--text);
}

/* Back button: small outline button with a left-arrow icon. */
.btn-back {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin-bottom: 1rem;
}
.btn-back svg { flex-shrink: 0; }

/* Inline action buttons in admin table rows. */
.row-actions { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }

/* Small explanatory text under form inputs. */
.hint { font-size: .8rem; color: var(--muted); margin: .35rem 0 .25rem; }

/* "Working…" indicator next to the detect button. */
.detect-spinner { margin-left: .6rem; font-size: .85rem; color: var(--muted); }

.badge { padding: .2rem .55rem; border-radius: 4px; font-size: .75rem; font-weight: 600;
         text-transform: uppercase; }
.badge-active { background: #d4edda; color: var(--success); }
.badge-paused { background: #fff3cd; color: var(--warn); }
.badge-dead   { background: #fde8e4; color: var(--danger); }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
             gap: 1rem; margin: 1.5rem 0; }
.stat-card { background: var(--surface); border: 1px solid var(--border);
             border-radius: var(--radius); padding: 1rem; }
.stat-card strong { display: block; font-size: .85rem; }
.stat-card span   { font-size: .85rem; color: var(--muted); }
.stat-warn { border-color: #f0c040; background: #fffbea; }
.stat-warn strong { color: var(--warn); }

/* Action card (e.g. trigger fetch): label above a button. */
.stat-action { display: flex; flex-direction: column; gap: .6rem; align-items: flex-start; }

/* System usage card: labelled meters with progress bars. */
.stat-system { display: flex; flex-direction: column; gap: .8rem; }
.meter-head { display: flex; justify-content: space-between; font-size: .85rem;
              color: var(--muted); margin-bottom: .3rem; }
.progress { height: 8px; background: var(--bg); border: 1px solid var(--border);
            border-radius: 999px; overflow: hidden; }
.progress-bar { height: 100%; background: var(--accent); border-radius: 999px; }

label { display: block; margin-bottom: .75rem; font-size: .9rem; }
label input, label select { display: block; width: 100%; margin-top: .25rem;
    padding: .45rem .75rem; border: 1px solid var(--border);
    border-radius: var(--radius); font-size: .9rem; }

section { margin-top: 1.5rem; }

.log-viewer { background: #1e1e1e; color: #d4d4d4; padding: 1rem;
              border-radius: var(--radius); overflow-x: auto;
              font-size: .8rem; line-height: 1.6; max-height: 60vh; overflow-y: auto;
              white-space: pre-wrap; word-break: break-all; }

.tab-nav { display: flex; gap: .5rem; margin-bottom: 1rem; }
.tab-nav a { padding: .35rem .8rem; border: 1px solid var(--border);
             border-radius: var(--radius); color: var(--text); text-decoration: none;
             font-size: .85rem; }
.tab-nav a.active { background: var(--accent); color: #fff; border-color: var(--accent); }

.empty { color: var(--muted); font-style: italic; margin-top: 1rem; }

/* ── User auth ── */
.header-user {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-shrink: 0;
}
.user-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.user-name {
    font-size: .9rem;
    color: var(--text);
    text-decoration: none;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.user-name:hover { color: var(--accent); }
.btn-outline {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text);
}
.btn-outline:hover { background: var(--bg); }

/* ── Dashboard ── */
.dashboard-layout {
    display: grid;
    grid-template-columns: 1fr 260px;
    gap: 2rem;
    align-items: start;
}
@media (max-width: 768px) {
    .dashboard-layout { grid-template-columns: 1fr; }
    .favorites-sidebar { order: -1; }
}
.feed-section h2 { font-size: 1.1rem; margin-bottom: 1rem; }
.favorites-sidebar {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem;
}
@media (min-width: 769px) {
    .favorites-sidebar {
        position: sticky;
        top: 1rem;
    }
}
.favorites-sidebar > summary {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: .75rem;
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.favorites-sidebar > summary::after {
    content: '▼';
    font-size: .7rem;
    color: var(--muted);
}
details.favorites-sidebar[open] > summary::after {
    content: '▲';
}
.fav-fieldset {
    border: none;
    padding: 0;
    margin: 0 0 .75rem;
}
.fav-fieldset legend {
    font-size: .8rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: .4rem;
}
.checkbox-label {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .9rem;
    margin-bottom: .25rem;
    cursor: pointer;
}
/* Override the global `label input { display:block; width:100% }` rule so the
   checkbox stays its natural size and the text sits next to it. */
.checkbox-label input[type="checkbox"] {
    flex-shrink: 0;
    display: inline-block;
    width: auto;
    margin: 0;
}
.text-muted { color: var(--muted); }
.btn-suggest { display: block; width: 100%; text-align: center; margin-top: 1rem; }