/* App styles on top of Pico CSS (static/pico.min.css, indigo). Light and dark follow the OS setting. */
:root { --pico-font-size: 93.75%; --pico-border-radius: .5rem; --pico-spacing: .9rem; }

/* top bar */
.topbar { position: sticky; top: 0; z-index: 10; margin-bottom: 1.5rem; background: var(--pico-card-background-color);
  border-bottom: 1px solid var(--pico-muted-border-color); box-shadow: 0 1px 3px rgb(0 0 0 / .05); }
.topbar nav { margin: 0; }
.topbar nav ul { align-items: center; }
.topbar .brand a { text-decoration: none; color: var(--pico-color); font-size: 1.05rem; letter-spacing: .01em; }
.topbar .brand strong { color: var(--pico-primary); }
.topbar nav a[aria-current="page"] { font-weight: 600; color: var(--pico-primary); box-shadow: inset 0 -2px 0 var(--pico-primary); border-radius: 0; }
.topbar form { margin: 0; }
.topbar button { margin: 0; padding: .3rem .85rem; width: auto; }
.topbar .who { display: inline-flex; align-items: center; gap: .4rem; }
.topbar .who::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: #22c55e; }

main.narrow { max-width: 26rem; margin-top: 7vh; }
main.narrow > h1 { text-align: center; font-size: 1.6rem; }
main.narrow .card-form { padding: 1.5rem; }
footer.container { margin-top: 3rem; padding-bottom: 2rem; text-align: center; color: var(--pico-muted-color); }
hgroup { margin-bottom: 1.25rem; }
hgroup h1 { margin-bottom: .15rem; font-size: 1.7rem; }
hgroup p { margin: 0; }

/* alerts (also used by the acceptance tests through .alert) */
.alert { padding: .75rem 1rem; margin-bottom: 1.25rem; border: 1px solid; border-radius: var(--pico-border-radius); font-size: .95rem; }
.alert-success { background: #ecfdf3; border-color: #86d6a4; color: #14532d; }
.alert-warning { background: #fffbeb; border-color: #f2cd69; color: #78350f; }
.alert-danger { background: #fef2f2; border-color: #f0a3a3; color: #7f1d1d; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .alert-success { background: #0f2a1b; border-color: #1f6b3f; color: #bbf7d0; }
  :root:not([data-theme="light"]) .alert-warning { background: #2d2308; border-color: #7a5d12; color: #fde68a; }
  :root:not([data-theme="light"]) .alert-danger { background: #2f1212; border-color: #7f2d2d; color: #fecaca; }
}

/* forms */
.error { display: block; margin-top: -.6rem; margin-bottom: .8rem; color: var(--pico-del-color); font-size: .85rem; }
form.stack { max-width: 34rem; }
form.stack button[type="submit"], form.stack > button { width: auto; }
.row { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 0 1rem; }
button.small, [role="button"].small { width: auto; padding: .3rem .8rem; font-size: .85rem; }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; margin-bottom: 1rem; }
.toolbar form, .toolbar p { margin: 0; }
.toolbar select { margin: 0; width: auto; }
.toolbar [role="button"] { margin: 0; }
[role="button"].disabled { opacity: .45; pointer-events: none; }
input[type="checkbox"] { margin-top: 0; }

/* tables */
.table-wrap { overflow-x: auto; margin-bottom: 1rem; }
table.data { font-size: .88rem; margin-bottom: 0; }
table.data th { white-space: nowrap; font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; color: var(--pico-muted-color); }
table.data td { vertical-align: middle; }
table.data tr.filters td { padding: .3rem .35rem; background: var(--pico-card-sectioning-background-color); }
table.data .filters input, table.data .filters select { margin: 0; padding: .3rem .5rem; height: auto; min-width: 5.5rem; font-size: .82rem; }
table.data .filters button { margin: 0; padding: .3rem .8rem; font-size: .82rem; width: auto; }
table.data .num { text-align: right; font-variant-numeric: tabular-nums; }
table.data code, code.key { font-size: .85em; }
.actions { white-space: nowrap; text-align: right; }
.actions form { display: inline; margin: 0; }
.actions a, .actions button { display: inline-block; width: auto; margin: 0 0 0 .25rem; padding: .2rem .65rem; font-size: .8rem; }
.empty { padding: 2rem; text-align: center; color: var(--pico-muted-color); }

/* badges */
.badge { display: inline-block; padding: .08rem .6rem; border-radius: 999px; font-size: .74rem; font-weight: 600; line-height: 1.5;
  background: var(--pico-muted-border-color); color: var(--pico-color); }
.badge-live, .badge-active, .badge-yes { background: #dcfce7; color: #14532d; }
.badge-trialing, .badge-active-r, .badge-warn { background: #fef3c7; color: #78350f; }
.badge-hist, .badge-inactive, .badge-no { background: #e5e7eb; color: #374151; }
.badge-canceled, .badge-revoked, .badge-unpaid, .badge-past_due, .badge-incomplete, .badge-incomplete_expired, .badge-danger { background: #fee2e2; color: #7f1d1d; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .badge-live, :root:not([data-theme="light"]) .badge-active, :root:not([data-theme="light"]) .badge-yes { background: #14532d; color: #dcfce7; }
  :root:not([data-theme="light"]) .badge-trialing, :root:not([data-theme="light"]) .badge-active-r, :root:not([data-theme="light"]) .badge-warn { background: #78350f; color: #fef3c7; }
  :root:not([data-theme="light"]) .badge-hist, :root:not([data-theme="light"]) .badge-inactive, :root:not([data-theme="light"]) .badge-no { background: #374151; color: #e5e7eb; }
  :root:not([data-theme="light"]) .badge-canceled, :root:not([data-theme="light"]) .badge-revoked, :root:not([data-theme="light"]) .badge-unpaid,
  :root:not([data-theme="light"]) .badge-past_due, :root:not([data-theme="light"]) .badge-incomplete, :root:not([data-theme="light"]) .badge-incomplete_expired, :root:not([data-theme="light"]) .badge-danger { background: #7f1d1d; color: #fee2e2; }
}

/* pager */
.pager { display: flex; flex-wrap: wrap; gap: .35rem; justify-content: center; margin: 1rem 0 0; padding: 0; list-style: none; }
.pager a, .pager b { display: inline-block; min-width: 2.2rem; padding: .3rem .6rem; text-align: center; border-radius: var(--pico-border-radius); border: 1px solid var(--pico-muted-border-color); text-decoration: none; }
.pager b { background: var(--pico-primary); border-color: var(--pico-primary); color: var(--pico-primary-inverse); }

/* detail lists and cards */
dl.kv { display: grid; grid-template-columns: max-content 1fr; gap: .45rem 1.5rem; margin: 0; }
dl.kv dt { color: var(--pico-muted-color); }
dl.kv dd { margin: 0; font-weight: 500; }
article h2, article h3 { font-size: 1.1rem; margin-bottom: .75rem; }
article > header { margin-bottom: 1rem; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.stat { padding: 1rem 1.25rem; margin: 0; }
.stat small { display: block; color: var(--pico-muted-color); text-transform: uppercase; letter-spacing: .04em; font-size: .7rem; }
.stat strong { font-size: 1.5rem; font-variant-numeric: tabular-nums; }
fieldset[role="group"] { margin-bottom: 0; }
.keys { list-style: none; padding: 0; margin: 0; }
.keys li { margin-bottom: 1rem; }
.keys code { display: inline-block; margin: .15rem .25rem .15rem 0; padding: .25rem .6rem; font-size: .95rem; letter-spacing: .06em; user-select: all; }
.muted { color: var(--pico-muted-color); }
.altcha-box { margin-bottom: 1rem; }

/* badges inside buttons keep contrast on the button colour */
[role="button"] .badge { margin-left: .35rem; background: rgb(255 255 255 / .28); color: inherit; }
[role="button"].outline .badge, [role="button"].secondary .badge { background: var(--pico-muted-border-color); color: var(--pico-color); }
.topbar .who { text-decoration: none; }