:root {
  --pico-font-size: 15px;
  --pico-spacing: 0.75rem;
  --c-poctive: #1f6feb;
  --c-rychle: #1a7f37;
  --c-nechceme: #b42318;
  --c-neni: #6e7781;
}
body { background: #f6f7f9; }
main.container-fluid { padding: 0.75rem 1.5rem 2rem; max-width: 1700px; }
.small { font-size: 0.85em; }
.muted { color: #6e7781; }
.nowrap { white-space: nowrap; }
.error { color: #b42318; }
.ok { color: #1a7f37; }
.warn { color: #b54708; font-weight: 600; }
form.inline { display: inline; margin: 0; }
button.small, [role=button].small { padding: 0.2rem 0.6rem; font-size: 0.85em; width: auto; margin: 0; }
label.check { display: inline-flex; gap: 0.4rem; align-items: center; margin-right: 1rem; }
.row-between { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-bottom: 0.5rem; }
.actions > * { width: auto; margin: 0; }

.banner { padding: 0.5rem 1.5rem; display: flex; gap: 1rem; align-items: center; }
.banner-dry { background: #fff3c4; border-bottom: 2px solid #e3b341; }
.banner-error { background: #ffe1de; border-bottom: 2px solid #b42318; }

nav.topnav { background: #fff; border-bottom: 1px solid #d0d7de; padding: 0 1.5rem; }
nav.topnav .brand { font-weight: 700; color: #1f2328; }
nav.topnav [aria-current=page] { font-weight: 700; text-decoration: underline; }
nav.subnav, nav.tabs { display: flex; gap: 0.25rem; border-bottom: 1px solid #d0d7de; margin-bottom: 1rem; flex-wrap: wrap; }
nav.subnav a, nav.tabs a { padding: 0.45rem 0.9rem; text-decoration: none; border: 1px solid transparent; border-bottom: none;
  border-radius: 6px 6px 0 0; color: #1f2328; }
nav.subnav a[aria-current=page], nav.tabs a[aria-current=page] { background: #fff; border-color: #d0d7de; font-weight: 600;
  margin-bottom: -1px; }
.count { background: #1f6feb; color: #fff; border-radius: 10px; padding: 0 0.45rem; font-size: 0.8em; }

.tag { display: inline-block; padding: 0.05rem 0.45rem; border-radius: 4px; font-size: 0.8em; font-weight: 600;
  color: #fff; background: #6e7781; white-space: nowrap; }
.tag-grey { background: #8c959f; }
.tag-red { background: #b42318; }
.tag-green { background: #1a7f37; }
.tag-orange { background: #b54708; }
.cat-POCTIVE { background: var(--c-poctive); }
.cat-RYCHLE { background: var(--c-rychle); }
.cat-NECHCEME { background: var(--c-nechceme); }
.cat-NENI_POPTAVKA { background: var(--c-neni); }

table.queue { background: #fff; font-size: 0.92em; }
table.queue td, table.queue th { padding: 0.4rem 0.55rem; vertical-align: top; }
table.queue tbody tr { cursor: pointer; }
table.queue tbody tr:hover td { background: #f3f6fb; }
table.queue tr.selected td { background: #e7f0ff; box-shadow: inset 0 0 0 9999px rgba(31,111,235,0.05); }
table.queue tr.selected td:first-child { border-left: 3px solid #1f6feb; }
table.queue tr.unsure td:nth-child(5), table.queue tr.unsure td:nth-child(6) { background: #fff8e1; }
table.queue tr.overdue td:nth-child(7) { color: #b42318; font-weight: 700; }
table.queue tr.due-today td:nth-child(7) { color: #b54708; font-weight: 700; }
table.queue .reason { max-width: 380px; }
.icons span { margin-right: 0.2rem; }
.new-reply { filter: drop-shadow(0 0 2px #1f6feb); }
.keys { margin-top: 0.5rem; }

.login-box { max-width: 380px; margin: 8vh auto; }

/* Detail */
.detail { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 1rem; align-items: start; }
.detail .thread article { margin-bottom: 0.8rem; padding: 0.8rem 1rem; }
.msg-head { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.9em; border-bottom: 1px solid #eaeef2;
  padding-bottom: 0.4rem; margin-bottom: 0.5rem; }
.msg-out { border-left: 4px solid #1a7f37; }
.msg-in { border-left: 4px solid #1f6feb; }
.msg-body-text { white-space: pre-wrap; font-family: inherit; font-size: 0.92em; margin: 0; background: none; padding: 0; }
iframe.mail-html { width: 100%; min-height: 200px; border: 1px solid #eaeef2; background: #fff; }
.attachments { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem; font-size: 0.88em; }
.attachments a { border: 1px solid #d0d7de; border-radius: 4px; padding: 0.15rem 0.5rem; text-decoration: none; }
.side article { padding: 0.8rem 1rem; margin-bottom: 0.8rem; }
.side dl { display: grid; grid-template-columns: 110px 1fr; gap: 0.2rem 0.6rem; font-size: 0.9em; margin: 0; }
.side dt { color: #6e7781; }
.side dd { margin: 0; }
.audit { font-size: 0.82em; max-height: 280px; overflow: auto; }
.audit li { margin-bottom: 0.2rem; list-style: none; }
.audit { padding-left: 0; }
dialog article { max-width: 760px; width: 92vw; }
dialog textarea { font-family: inherit; }
.test-results { list-style: none; padding: 0; }
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { display: inline; }
pre.criteria { white-space: pre-wrap; font-size: 0.85em; }
textarea.code { font-family: ui-monospace, Consolas, monospace; font-size: 0.85em; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.8rem; }
.stat-grid article { margin: 0; padding: 0.8rem; text-align: center; }
.stat-grid .big { font-size: 1.8em; font-weight: 700; }
table.matrix td, table.matrix th { text-align: center; }
table.matrix td.diag { background: #e6f4ea; font-weight: 700; }
.flash { background: #e6f4ea; border: 1px solid #1a7f37; border-radius: 6px; padding: 0.5rem 0.8rem; margin-bottom: 0.8rem; }
.actions > button, .actions > a[role=button], .actions > form, .actions > form > button { width: auto !important; margin: 0; }
dialog .actions { justify-content: flex-start; }
tr.overdue .deadline-cell { color: #b42318; }
tr.due-today .deadline-cell { color: #b54708; }
select.account-select { margin: 0; padding: 0.2rem 2rem 0.2rem 0.5rem; height: auto; font-size: 0.9em; }
nav.tabs, nav.subnav { justify-content: flex-start; }
nav.tabs a, nav.subnav a { margin: 0; }