:root {
    font-family: system-ui, sans-serif;
    color: #1d2939;
    background: #f7f8fa;
}

body { margin: 0; }
header { padding: 1rem; background: #123d66; }
nav, .title-row { display: flex; gap: 1rem; align-items: center; }
nav a { color: white; text-decoration: none; }
.container, .login { max-width: 1100px; margin: 2rem auto; padding: 0 1rem; }
.login { max-width: 360px; }
.cards { display: flex; flex-wrap: wrap; gap: 1rem; }
.cards article { min-width: 190px; padding: 1rem; background: white; border-radius: .5rem; box-shadow: 0 1px 3px #0002; }
.cards strong { display: block; font-size: 2rem; }
table { width: 100%; background: white; border-collapse: collapse; }
th, td { padding: .65rem; text-align: left; border-bottom: 1px solid #dde3ea; }
th.sortable { cursor: pointer; user-select: none; }
th.sortable::after { color: #667085; content: " ↕"; }
th.sortable.ascending::after { content: " ↑"; }
th.sortable.descending::after { content: " ↓"; }
tr.expired { background: #fee2e2; }
tr.expiring { background: #ffedd5; }
.filters, .form-grid { display: grid; max-width: 640px; gap: .75rem; margin: 1rem 0; }
.table-tools { display: flex; align-items: center; justify-content: space-between; margin: 1rem 0 .5rem; }
.table-tools input { min-width: 260px; }
.software-version { display: inline-flex; gap: .4rem; align-items: center; }
.software-version img { width: 25px; height: 25px; object-fit: contain; }
.note-marker { display: inline-block; position: relative; width: 17px; height: 17px; margin-left: .35rem; color: white; font-size: .75rem; font-weight: 700; line-height: 17px; text-align: center; cursor: help; background: #0d6fba; border-radius: 50%; }
.note-marker[data-tooltip]:hover::after { position: absolute; z-index: 5; bottom: calc(100% + .4rem); left: 0; width: max-content; max-width: 280px; padding: .55rem .65rem; color: white; font-weight: 400; line-height: 1.3; white-space: pre-wrap; content: attr(data-tooltip); background: #1f2937; border-radius: .35rem; box-shadow: 0 4px 14px #0004; }
.badge { display: inline-block; position: relative; margin: .1rem .15rem .1rem 0; padding: .15rem .4rem; font-size: .75rem; font-weight: 600; cursor: help; border-radius: 999px; }
.badge-unlimited { color: #1d4ed8; background: #dbeafe; }
.badge-municipality { color: #166534; background: #dcfce7; }
.badge-demo { color: #7e22ce; background: #f3e8ff; }
.badge[data-tooltip]:hover::after { position: absolute; z-index: 5; bottom: calc(100% + .4rem); left: 0; width: max-content; max-width: 220px; padding: .4rem .55rem; color: white; font-weight: 400; white-space: normal; content: attr(data-tooltip); background: #1f2937; border-radius: .25rem; }
.actions { white-space: nowrap; }
.inline-form { display: inline; }
.link-button { margin-left: .75rem; padding: 0; color: #0d6fba; text-decoration: underline; cursor: pointer; background: transparent; border: 0; }
.link-danger { color: #b42318; }
.actions-menu { position: relative; display: inline-block; }
.actions-menu summary { padding: .45rem .65rem; color: white; cursor: pointer; list-style: none; background: #0d6fba; border-radius: .25rem; }
.actions-menu summary::-webkit-details-marker { display: none; }
.actions-menu summary::after { content: " ▾"; }
.actions-menu-content { position: absolute; z-index: 10; top: calc(100% + .25rem); right: 0; min-width: 190px; padding: .35rem; background: white; border: 1px solid #dde3ea; border-radius: .35rem; box-shadow: 0 4px 14px #0003; }
.actions-menu-content a, .actions-menu-content .link-button { display: block; width: 100%; margin: 0; padding: .45rem .55rem; color: #0d6fba; text-align: left; text-decoration: none; }
.actions-menu-content a:hover, .actions-menu-content .link-button:hover { background: #eff6ff; }
.actions-menu-content .inline-form { display: block; }
.actions-menu-content .link-danger { color: #b42318; }
dialog { max-width: 430px; border: 0; border-radius: .5rem; box-shadow: 0 12px 40px #0006; }
dialog::backdrop { background: #0008; }
.dialog-actions { display: flex; gap: .75rem; }
.secondary { background: #667085; }
input, select, textarea, button, .button { box-sizing: border-box; padding: .55rem; font: inherit; }
button, .button { width: fit-content; color: white; text-decoration: none; background: #0d6fba; border: 0; border-radius: .25rem; }
textarea { min-height: 7rem; }