:root {
    --bg: #f7f7fa;
    --fg: #1d1d24;
    --muted: #6a6a7a;
    --border: #d8d8df;
    --accent: #2c5fd6;
    --warn-bg: #fff3cd;
    --warn-fg: #74590a;
    --ok: #2c8f3a;
    --stale: #c08a00;
    --unknown: #999;
}

* { box-sizing: border-box; }

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    margin: 0;
    background: var(--bg);
    color: var(--fg);
    font-size: 14px;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

code, pre { font-family: ui-monospace, "SF Mono", Consolas, monospace; }

/* Top bar */
.topbar {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1.25rem;
    background: #1d1d24;
    color: #fff;
    border-bottom: 1px solid #000;
}
.topbar .brand { font-weight: 700; letter-spacing: 0.5px; }
.topbar nav a { color: #cfd2da; margin-right: 0.75rem; }
.topbar .spacer { flex: 1; }
.topbar .logout { color: #cfd2da; }

/* Login */
.login-body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}
.login-card {
    background: #fff;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    width: 320px;
}
.login-card h1 { margin: 0 0 0.25rem 0; }
.login-card .subtitle { color: var(--muted); margin: 0 0 1.25rem 0; }
.login-card label { display: block; margin: 1rem 0; color: var(--muted); font-size: 12px; }
.login-card input[type=password] {
    display: block;
    width: 100%;
    padding: 0.5rem;
    margin-top: 0.25rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 14px;
}
.login-card button {
    width: 100%;
    padding: 0.6rem;
    background: var(--accent);
    color: #fff;
    border: 0;
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
}
.login-card .error {
    background: #f8d7da;
    color: #842029;
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
    font-size: 13px;
    margin-bottom: 0.5rem;
}

/* Main grid */
main {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 1rem;
    padding: 1rem;
}
main.detail { grid-template-columns: 1fr; }

.sidebar {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.75rem;
    height: fit-content;
}
.sidebar h3 { margin: 0 0 0.5rem 0; font-size: 13px; text-transform: uppercase; color: var(--muted); }
.sidebar .hosts { list-style: none; margin: 0; padding: 0; }
.sidebar .hosts li {
    display: flex; align-items: center; gap: 0.4rem;
    padding: 0.25rem 0; font-size: 13px;
}
.sidebar .sid { flex: 1; word-break: break-all; }
.sidebar .age { color: var(--muted); font-size: 11px; }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.dot.ok { background: var(--ok); }
.dot.stale { background: var(--stale); }
.dot.unknown { background: var(--unknown); }

/* Filters */
.filters {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.75rem;
    margin-bottom: 0.75rem;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem 0.75rem;
    align-items: end;
}
.filters label { font-size: 12px; color: var(--muted); display: block; }
.filters input, .filters select {
    width: 100%;
    padding: 0.4rem 0.5rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 13px;
}
.filters select[multiple] { height: 64px; }
.filters button {
    padding: 0.5rem 1rem;
    background: var(--accent);
    color: #fff;
    border: 0;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
}
.filters .reset { padding: 0.5rem 0.75rem; font-size: 13px; }

/* Table */
table.messages {
    width: 100%;
    background: #fff;
    border: 1px solid var(--border);
    border-collapse: collapse;
    border-radius: 6px;
    overflow: hidden;
}
table.messages th, table.messages td {
    padding: 0.5rem 0.6rem;
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: top;
}
table.messages th {
    background: #f0f0f5;
    font-size: 12px;
    text-transform: uppercase;
    color: var(--muted);
    letter-spacing: 0.4px;
}
table.messages td.ts { white-space: nowrap; font-family: ui-monospace, monospace; font-size: 12px; }
table.messages tr:hover td { background: #fafaff; }
.empty { text-align: center; color: var(--muted); padding: 2rem 0; }

.origin {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.origin.auth-smtp { background: #e3eefe; color: #15407a; }
.origin.local-pipe { background: #ffe5d4; color: #8a3b00; }
.origin.heartbeat { background: #eee; color: #555; }

a.pivot { color: var(--fg); }
a.pivot:hover { color: var(--accent); }

/* Pager */
.pager {
    text-align: right;
    padding: 0.5rem 0;
}

/* Detail */
main.detail { padding: 1rem 2rem; max-width: 1100px; margin: 0 auto; }
section.meta { background: #fff; border: 1px solid var(--border); border-radius: 6px; padding: 1rem 1.25rem; margin-bottom: 1rem; }
section.meta h2 { margin: 0 0 0.75rem 0; }
section.meta dl { display: grid; grid-template-columns: 180px 1fr; gap: 0.25rem 0.75rem; margin: 0; }
section.meta dt { color: var(--muted); font-size: 12px; }
section.meta dt.warn, section.meta dd.warn {
    background: var(--warn-bg);
    color: var(--warn-fg);
    padding: 2px 6px;
    border-radius: 3px;
}
section.meta dd { margin: 0; word-break: break-all; }
.received pre { background: #f4f4f7; padding: 0.5rem; overflow: auto; font-size: 11px; }

section.body { background: #fff; border: 1px solid var(--border); border-radius: 6px; padding: 1rem; margin-bottom: 1rem; }
.tabs { margin-bottom: 0.75rem; border-bottom: 1px solid var(--border); }
.tabs a {
    display: inline-block;
    padding: 0.5rem 0.9rem;
    color: var(--muted);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}
.tabs a.active { color: var(--fg); border-bottom-color: var(--accent); font-weight: 600; }
pre.bodytext {
    background: #fafaff;
    padding: 0.75rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 13px;
    max-height: 600px;
    overflow: auto;
}
.muted { color: var(--muted); font-size: 12px; }

section.attachments { background: #fff; border: 1px solid var(--border); border-radius: 6px; padding: 1rem; }
section.attachments h3 { margin-top: 0; }
section.attachments table { width: 100%; border-collapse: collapse; }
section.attachments th, section.attachments td {
    padding: 0.4rem 0.6rem;
    border-bottom: 1px solid var(--border);
    text-align: left;
}

@media (max-width: 900px) {
    .filters { grid-template-columns: repeat(2, 1fr); }
    main { grid-template-columns: 1fr; }
    section.meta dl { grid-template-columns: 1fr; }
}