/* Gušći raspored od Pico podrazumevanog, za tabele i pregled. */
:root {
  --pico-font-size: 93.75%;
  --pico-spacing: 0.75rem;
  --pico-form-element-spacing-vertical: 0.5rem;
  --pico-form-element-spacing-horizontal: 0.75rem;
}

.topbar {
  border-bottom: 1px solid var(--pico-muted-border-color);
  margin-bottom: 1rem;
}
.topbar nav { flex-wrap: wrap; }
.topbar form { margin: 0; }
.brand { font-weight: 700; letter-spacing: 0.05em; }
.menu a[aria-current="page"] { font-weight: 600; text-decoration: underline; text-underline-offset: 0.3em; }

button.small {
  padding: 0.2rem 0.6rem;
  font-size: 0.85em;
  margin: 0;
  width: auto;
}

.muted { color: var(--pico-muted-color); }
.error { color: var(--pico-del-color); }

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}
.tile { margin: 0; }
.tile header { margin-bottom: 0.5rem; }
.tile .num { font-size: 2.2rem; font-weight: 700; line-height: 1.1; margin: 0; }
.tile.warn .num { color: var(--pico-del-color); }

.login { max-width: 420px; margin-top: 12vh; }

.htmx-indicator { opacity: 0; transition: opacity 200ms ease-in; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }

/* ---- zajedničko ---- */
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.page-head h1 { margin: 0; }
.page-head .actions { display: flex; align-items: center; gap: 0.75rem; }
.pos { color: var(--pico-ins-color); }
.neg { color: var(--pico-del-color); }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.nowrap { white-space: nowrap; }
.label { color: var(--pico-muted-color); font-size: 0.75em; text-transform: uppercase; letter-spacing: 0.04em; margin-right: 0.35rem; }
.tags { display: inline-flex; flex-wrap: wrap; gap: 0.25rem; }
.tag { font-size: 0.75em; padding: 0 0.4rem; border: 1px solid var(--pico-muted-border-color); border-radius: 0.25rem; white-space: nowrap; }
.chip {
  --chip: var(--pico-muted-color);
  font-size: 0.75em; font-weight: 600; padding: 0.05rem 0.45rem; border-radius: 0.25rem; white-space: nowrap;
  color: var(--chip);
  border: 1px solid color-mix(in srgb, var(--chip) 45%, transparent);
  background: color-mix(in srgb, var(--chip) 12%, transparent);
}
.chip.cat { text-transform: uppercase; letter-spacing: 0.04em; }
table.compact { font-size: 0.85em; }
table.compact th, table.compact td { padding: 0.3rem 0.5rem; }
tr.cancelled td { color: var(--pico-muted-color); text-decoration: line-through; }

/* ---- serveri ---- */
.summary {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; padding: 0.75rem 1rem; margin-bottom: 1rem;
  border: 1px solid var(--pico-muted-border-color); border-radius: var(--pico-border-radius);
}
.summary small { display: block; color: var(--pico-muted-color); font-size: 0.75em; }
.tabs { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-bottom: 1rem; border-bottom: 1px solid var(--pico-muted-border-color); }
.tabs a { padding: 0.4rem 0.8rem; text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs a[aria-current="page"] { border-bottom-color: var(--pico-primary); font-weight: 600; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 1rem; align-items: start; }
.card { margin: 0; }
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.head-stats { display: flex; flex-wrap: wrap; gap: 1rem; font-size: 0.85em; }
.head-stats small { color: var(--pico-muted-color); }
.margin-group { margin-bottom: 0.75rem; }
.badge { font-size: 0.8em; padding: 0.05rem 0.55rem; border-radius: 1rem; background: var(--pico-primary-background); color: var(--pico-primary-inverse); }
.accent { font-weight: 700; color: var(--pico-primary); }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin-bottom: 0.75rem; font-weight: 600; font-size: 0.9em; }
.stats small { display: block; font-weight: 400; color: var(--pico-muted-color); font-size: 0.75em; }
.subgroup { margin-bottom: 0.6rem; }
.subhead {
  font-size: 0.75em; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--pico-muted-color);
  border-bottom: 1px solid var(--pico-muted-border-color); padding-bottom: 0.15rem; margin-bottom: 0.2rem;
}
.srv { display: grid; grid-template-columns: 1fr auto auto auto; gap: 0.6rem; align-items: center; font-size: 0.85em; padding: 0.1rem 0; }
.srv .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.srv code { font-size: 0.9em; padding: 0 0.25rem; background: none; color: var(--pico-muted-color); }
.srv.cancelled .name { text-decoration: line-through; color: var(--pico-muted-color); }
.tag-cancel { font-style: normal; font-size: 0.75em; color: #d97706; margin-left: 0.4rem; display: inline-block; text-decoration: none; }
.dot { width: 0.55rem; height: 0.55rem; border-radius: 50%; display: inline-block; background: var(--pico-muted-border-color); }
.dot.up { background: #16a34a; }
.dot.down { background: #dc2626; }
.kv { margin: 0 0 0.4rem; font-size: 0.85em; }
.kv span { margin-right: 0.8rem; display: inline-block; }
.mds { margin-top: 0.5rem; }
.md-doc { margin: 0.3rem 0; padding: 0.25rem 0.6rem; border: 1px solid var(--pico-muted-border-color); border-radius: var(--pico-border-radius); }
.md-doc summary { font-size: 0.85em; font-weight: 600; }
.md-doc.empty summary { color: var(--pico-muted-color); font-weight: 400; }
.md-doc .md-body { max-height: 60vh; overflow: auto; padding-top: 0.5rem; }

/* ---- TODO ---- */
.filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.25rem; }
.filters > * { width: auto; flex: 1 1 140px; margin: 0; }
.filters input[type="search"] { flex: 2 1 200px; }
table.todos td { vertical-align: top; }
tr.done .title { text-decoration: line-through; color: var(--pico-muted-color); }
.late { color: var(--pico-del-color); font-weight: 600; }
button.check {
  width: 1.2rem; height: 1.2rem; padding: 0; margin: 0; border-radius: 50%;
  border: 2px solid var(--pico-muted-border-color); background: transparent; color: #fff; font-size: 0.7rem; line-height: 1;
}
button.check.on { background: #16a34a; border-color: #16a34a; }
button.link { background: none; border: none; padding: 0; margin: 0; width: auto; color: inherit; text-align: left; font-weight: 500; }
button.link:hover { text-decoration: underline; }
.row-actions { display: flex; gap: 0.25rem; white-space: nowrap; }
.row-actions button { padding: 0.15rem 0.45rem; font-size: 0.75em; margin: 0; width: auto; }
.row-actions button.danger { color: var(--pico-del-color); border-color: var(--pico-del-color); }
.md-link { font-size: 0.75em; font-weight: 700; text-decoration: none; }
.md-link.empty { color: var(--pico-muted-color); opacity: 0.6; }
.md-editor { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.md-editor textarea { min-height: 70vh; margin: 0; font-family: var(--pico-font-family-monospace); font-size: 0.85em; }
.md-preview { padding: 0.75rem 1rem; overflow: auto; max-height: 75vh; border: 1px solid var(--pico-muted-border-color); border-radius: var(--pico-border-radius); }
@media (max-width: 768px) {
  .md-editor { grid-template-columns: 1fr; }
  .md-editor textarea { min-height: 40vh; }
}
dialog article { width: min(680px, 100%); }
dialog footer { display: flex; justify-content: flex-end; gap: 0.5rem; }
dialog footer button { width: auto; margin: 0; }

/* ---- inventar i cronovi ---- */
.item-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 1rem; margin-bottom: 1rem; align-items: start; }
.item-grid > article { margin: 0; }
header.sub { margin-top: 1rem; }
dl.props { display: grid; grid-template-columns: max-content 1fr; gap: 0.25rem 1rem; margin: 0; font-size: 0.9em; }
dl.props dt { color: var(--pico-muted-color); font-weight: 400; }
dl.props dd { margin: 0; overflow-wrap: anywhere; }
dl.props details { margin: 0; }
dl.props summary { font-size: 1em; }
dl.props pre { max-height: 40vh; overflow: auto; font-size: 0.8em; white-space: pre-wrap; }
.notes { white-space: pre-wrap; margin-top: 0.75rem; font-size: 0.9em; }
tr.inactive td { color: var(--pico-muted-color); }
tr.inactive td a { color: var(--pico-muted-color); }
.msg { max-width: 40ch; overflow: hidden; text-overflow: ellipsis; }
textarea.mono { font-family: var(--pico-font-family-monospace); font-size: 0.85em; }
label.inline { display: inline-flex; align-items: center; gap: 0.35rem; flex: 0 0 auto; margin: 0; white-space: nowrap; }
.fx-form { margin-bottom: 1rem; }
.status {
  --st: var(--pico-muted-color);
  font-size: 0.75em; font-weight: 600; padding: 0.05rem 0.45rem; border-radius: 0.25rem; white-space: nowrap;
  color: var(--st); border: 1px solid color-mix(in srgb, var(--st) 45%, transparent);
  background: color-mix(in srgb, var(--st) 12%, transparent);
}
.st-ok, .st-info { --st: #16a34a; }
.st-error, .st-missed, .st-critical { --st: #dc2626; }
.st-partial, .st-warning { --st: #d97706; }
.st-inactive { --st: var(--pico-muted-color); }
.tile header a { color: inherit; text-decoration: none; }
.tile header a:hover { text-decoration: underline; }

/* ---- dashboard widgeti i plaćanja ---- */
#alerts, #payments { margin-bottom: 1rem; }
.st-info-blue { --st: #2563eb; }
table.payments td { vertical-align: top; }
table.payments td.pair { text-align: center; white-space: nowrap; }
tr.mismatch td { background: color-mix(in srgb, var(--pico-del-color) 8%, transparent); }