:root {
  --pico-font-size: 95%;
  --ok: #2e7d32;
  --warn: #b26a00;
  --bad: #c62828;
}

main.container-fluid, header.container-fluid { max-width: 1500px; }
.topbar { border-bottom: 1px solid var(--pico-muted-border-color); margin-bottom: 1.5rem; }
.topbar nav { padding: .25rem 0; }
.brand { text-decoration: none; }
form.inline { margin: 0; }
button.small { padding: .3rem .7rem; font-size: .85rem; margin: 0; }

/* Kartat e statistikave */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.stats article { margin: 0; padding: 1rem 1.25rem; }
.stats .num { font-size: 2rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stats .lbl { color: var(--pico-muted-color); font-size: .85rem; }

.grid-2 { display: grid; grid-template-columns: 2fr 1fr; gap: 1rem; }
@media (max-width: 900px) { .grid-2 { grid-template-columns: 1fr; } }

.bars { list-style: none; padding: 0; margin: 0; }
.bars li { display: grid; grid-template-columns: 1fr auto; gap: .5rem; margin-bottom: .45rem; font-size: .9rem; list-style: none; }
.bars .bar { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: var(--pico-primary-background); }

/* Banerat */
.banner { padding: .75rem 1rem; border-radius: var(--pico-border-radius); margin-bottom: 1rem; border-left: 4px solid; }
.banner.warning { border-color: var(--warn); background: color-mix(in srgb, var(--warn) 10%, transparent); }
.banner.failed { border-color: var(--bad); background: color-mix(in srgb, var(--bad) 10%, transparent); }

/* Filtrat */
.filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .75rem; align-items: end; }
.filters label { margin: 0; font-size: .85rem; }
.filters input, .filters select { margin: 0; }
.filters .q { grid-column: span 2; }
.toolbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin: 1rem 0 .5rem; }
.toolbar a[role=button] { margin: 0; }

/* Tabela */
.table-wrap { overflow-x: auto; }
table.subjects td, table.subjects th { font-size: .88rem; vertical-align: top; }
table.subjects td.objekti { max-width: 380px; color: var(--pico-muted-color); }
.clip { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mono { font-family: var(--pico-font-family-monospace); font-size: .85rem; white-space: nowrap; }
.nowrap { white-space: nowrap; }
.muted { color: var(--pico-muted-color); }

.badge { display: inline-block; padding: .1rem .5rem; border-radius: 999px; font-size: .75rem; font-weight: 600;
         background: var(--pico-secondary-background); color: var(--pico-secondary-inverse); white-space: nowrap; }
.badge.ok, .badge.done { background: var(--ok); color: #fff; }
.badge.warning, .badge.pending, .badge.queued, .badge.running { background: var(--warn); color: #fff; }
.badge.failed { background: var(--bad); color: #fff; }

.pagination { display: flex; gap: .5rem; align-items: center; justify-content: center; margin: 1rem 0; }
.pagination a[role=button] { margin: 0; padding: .3rem .8rem; }

/* Detajet */
dl.kv { display: grid; grid-template-columns: 200px 1fr; gap: .4rem 1rem; margin: 0; }
dl.kv dt { color: var(--pico-muted-color); font-weight: 500; }
dl.kv dd { margin: 0; }
@media (max-width: 700px) { dl.kv { grid-template-columns: 1fr; } dl.kv dd { margin-bottom: .5rem; } }
pre.extract { white-space: pre-wrap; font-size: .8rem; max-height: 500px; overflow: auto; }

.htmx-request #results { opacity: .5; transition: opacity .2s; }
.login-box { max-width: 380px; margin: 4rem auto; }