/* internal/httpserver/web/static/css/site.css */
:root { color-scheme: light dark; }
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }
.container { max-width: 1100px; margin: 0 auto; padding: 1rem; }
.nav a { margin-right: .75rem; text-decoration: none; color: inherit; }
.nav a[aria-current="page"] { font-weight: 600; }
hr { border: 0; height: 1px; background: #ddd; margin: .75rem 0 1rem; }

.stack > * + * { margin-top: .75rem; }
.row { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
input, select, button { padding: .35rem .5rem; font-size: 14px; }

.tabs { display: flex; gap: .5rem; }
.tab { padding: .4rem .6rem; border: 1px solid #ddd; background: #f6f6f6; cursor: pointer; }
.tab.active { background: #fff; font-weight: 600; }

.grid { width: 100%; border-collapse: collapse; }
.grid th, .grid td { padding: .4rem .5rem; border-bottom: 1px solid #ddd; font-size: 14px; text-align: left; }
.grid tbody tr:nth-child(odd) { background: #fafafa; }

#pager { display: flex; gap: .5rem; align-items: center; justify-content: flex-end; margin-top: .5rem; }

#drawer { position: fixed; top: 0; right: 0; width: 420px; max-width: 100%; height: 100%; background: #fff; color: #000; border-left: 1px solid #ddd; padding: 1rem; box-shadow: -6px 0 12px rgba(0,0,0,.08); }
@media (prefers-color-scheme: dark) {
  #drawer { background: #111; color: #eaeaea; border-left-color: #333; }
  .grid tbody tr:nth-child(odd) { background: #0f0f0f; }
  hr { background: #333; }
}