:root {
    --bg: #111412;
    --panel: #191d1b;
    --panel-hover: #212623;
    --line: #2c322e;
    --grid: #262b28;
    --axis: #3a413c;
    --text: #e4e8e3;
    --muted: #8d968f;
    --accent: #d8c48f;
    --accent-dim: #4d4630;
    --good: #0ca30c;
    --good-text: #4cc46a;
    --danger: #e66767;
    --warn: #fab219;
    color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 15px/1.5 "Segoe UI", system-ui, sans-serif;
}

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

h1 { font-size: 1.8rem; margin: 0 0 1rem; letter-spacing: .02em; }
h2 { font-size: 1.15rem; margin: 0 0 .5rem; }
h3 { font-size: 1rem; margin: 1rem 0 .4rem; }
h1:focus { outline: none; }

.muted { color: var(--muted); }
.small { font-size: .82rem; }
.strong { font-weight: 600; }
.nowrap { white-space: nowrap; }
.warn { color: var(--danger); }
.good { color: var(--good-text); }
code { font-family: Consolas, "Cascadia Mono", monospace; font-size: .9em; }

/* ---- Shell ---- */

.shell { display: flex; min-height: 100vh; }

.sidebar {
    width: 210px;
    flex-shrink: 0;
    padding: 1.25rem 1rem;
    background: var(--panel);
    border-right: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    gap: .2rem;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

.sidebar .brand {
    display: flex;
    align-items: center;
    gap: .55rem;
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-bottom: 1rem;
}
.sidebar .brand img { width: 1.6rem; height: 1.6rem; }

.sidebar a:not(.brand) { color: var(--text); padding: .4rem .6rem; border-radius: 6px; }
.sidebar a:not(.brand):hover { background: var(--panel-hover); text-decoration: none; }
.sidebar a.active { background: var(--accent-dim); }
.sidebar .nav-section { margin: 1rem 0 .2rem .6rem; color: var(--muted); font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; }
.sidebar .nav-bottom { margin-top: auto; }

.content { flex: 1; min-width: 0; padding: 1.5rem 2rem 3rem; }

@media (max-width: 760px) {
    .shell { flex-direction: column; }
    .sidebar { position: static; width: auto; height: auto; flex-direction: row; flex-wrap: wrap; padding: .75rem 1rem; }
    .sidebar .brand { width: 100%; margin-bottom: .25rem; }
    .sidebar .nav-section { display: none; }
    .sidebar .nav-bottom { margin-top: 0; }
    .content { padding: 1rem 1rem 3rem; }
}

@media (max-width: 1100px) {
    .hide-narrow { display: none; }
    .clip { max-width: 16rem; }
}

/* ---- Building blocks ---- */

.card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 1rem 1.25rem;
}
.card.flush { padding: 0; }
.panel { margin-bottom: 1.25rem; }
.empty { max-width: 40rem; }

.columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 1.25rem; }
.columns > .panel { margin-bottom: 0; }
.columns { margin-bottom: 1.25rem; }

.btn {
    display: inline-block;
    background: var(--accent);
    color: #1b1a17;
    border: 0;
    border-radius: 6px;
    padding: .45rem .9rem;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
.btn:hover { text-decoration: none; filter: brightness(1.08); }
.btn:disabled { opacity: .5; cursor: default; filter: none; }
.btn.ghost { background: transparent; color: var(--text); border: 1px solid var(--line); font-weight: 400; }
.btn.small { padding: .2rem .6rem; font-size: .85rem; }
.btn.danger { background: var(--danger); color: #1b1a17; }

.icon {
    background: transparent;
    border: 1px solid transparent;
    color: var(--muted);
    border-radius: 6px;
    width: 1.9rem;
    height: 1.9rem;
    cursor: pointer;
    font: inherit;
}
.icon:hover:not(:disabled) { border-color: var(--line); color: var(--text); }
.icon:disabled { opacity: .3; cursor: default; }
.icon.danger:hover { color: var(--danger); }

input, select {
    background: var(--bg);
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: .4rem .6rem;
    font: inherit;
}
input, select, textarea { font: inherit; }
textarea { background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: 6px; padding: .4rem .6rem; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 1px solid var(--accent); border-color: var(--accent); }

.check { display: inline-flex; gap: .4rem; align-items: center; }

.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.search-wide { flex: 1; min-width: 14rem; max-width: 32rem; }
.search-wide input { width: 100%; }

.notice { margin: 0 0 1rem; padding: .6rem .9rem; border-left: 3px solid var(--accent); background: var(--panel); border-radius: 0 6px 6px 0; }
.notice.warn { border-left-color: var(--danger); color: var(--text); }
.notice.offer { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }

.crumbs { margin: 0 0 .25rem; color: var(--muted); font-size: .85rem; }

ul.plain { list-style: none; padding: 0; margin: .25rem 0; }

/* ---- Chips ---- */

.chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip {
    background: transparent;
    color: var(--muted);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: .2rem .8rem;
    font: inherit;
    font-size: .85rem;
    cursor: pointer;
}
.chip:hover { color: var(--text); text-decoration: none; }
.chip.active { background: var(--accent-dim); border-color: var(--accent-dim); color: var(--text); }

/* ---- Tables ---- */

.table { width: 100%; border-collapse: collapse; }
.table th, .table td { padding: .45rem .6rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.table th { color: var(--muted); font-weight: 600; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; }
.table tbody tr:hover { background: var(--panel-hover); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table tfoot td { font-weight: 600; border-bottom: 0; }
.table.compact td { padding: .3rem .4rem; }
.table-scroll { overflow-x: auto; margin-bottom: 1rem; }
.clip { max-width: 26rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 1600px) { .clip { max-width: 46rem; } }
.actions { text-align: right; }

/* ---- Shelf ---- */

.summary { margin: -.5rem 0 1rem; }
.link-button { background: none; border: 0; padding: 0; color: var(--accent); font: inherit; cursor: pointer; }
.link-button:hover { text-decoration: underline; }
.link-button:disabled { opacity: .5; cursor: default; text-decoration: none; }
.warn-text { color: var(--warn); }
.section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.section-head h1 .icon { font-size: 1rem; vertical-align: middle; }

.shelf-group { margin-bottom: 2rem; }
.group-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1rem; margin-bottom: .6rem; padding-bottom: .3rem; border-bottom: 1px solid var(--line); }
.group-head h2 { margin: 0; }
.group-head h2 a { color: var(--text); }
.group-head h2 a:hover { color: var(--accent); }

/* Covers come in one width per row, so a series of three and a series of twelve line up. */
.covers { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 1.25rem 1rem; }
@media (max-width: 500px) { .covers { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 1rem .75rem; } }

.book-card { display: block; color: var(--text); min-width: 0; }
.book-card:hover { text-decoration: none; }
.book-card:hover .cover { outline: 2px solid var(--accent); outline-offset: 2px; }
.book-title { margin-top: .4rem; font-size: .9rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.book-card .small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cover-wrap { position: relative; }
.cover { display: block; width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 4px; background: var(--panel); box-shadow: 0 2px 8px rgba(0, 0, 0, .45); }
.cover.blank, .cover.gap { display: flex; align-items: center; justify-content: center; padding: .6rem; text-align: center; font-size: .8rem; line-height: 1.25; overflow: hidden; }
.cover.blank { background: linear-gradient(160deg, hsl(var(--hue, 40) 30% 30%), hsl(var(--hue, 40) 30% 18%)); color: #f1ead6; font-weight: 600; }
.cover.gap { background: transparent; border: 1px dashed var(--axis); color: var(--muted); box-shadow: none; }
.cover.mini { width: 2.6rem; flex-shrink: 0; font-size: 0; padding: 0; }
.cover.large { max-width: 260px; }

.position { position: absolute; left: .35rem; top: .35rem; min-width: 1.6rem; padding: .05rem .4rem; border-radius: 999px; background: rgba(17, 20, 18, .85); color: var(--accent); font-size: .78rem; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
.status-corner { position: absolute; right: .3rem; bottom: .3rem; }

.status { display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; border: 1px solid transparent; background: rgba(17, 20, 18, .85); font: inherit; font-size: .85rem; line-height: 1; cursor: default; }
button.status { cursor: pointer; }
button.status:hover { border-color: var(--accent); }
.status.s-ongelezen { color: var(--muted); }
.status.s-bezig { color: var(--warn); }
.status.s-gelezen { color: var(--good-text); }
.table .status { background: transparent; }
.table td.tick { width: 2.4rem; }
.books td, .series-table td { vertical-align: middle; }

.book-card.missing .book-title { color: var(--muted); }
.book-card.missing.side { opacity: .55; }
.missing .position { color: var(--muted); }
.series-covers { margin-bottom: 2rem; }

/* ---- Adding ---- */

input.isbn { font-size: 1.3rem; letter-spacing: .06em; width: 16rem; font-variant-numeric: tabular-nums; }
.added { list-style: none; padding: 0; margin: .5rem 0 0; display: grid; gap: .5rem; }
.added li { display: flex; align-items: center; gap: .8rem; padding: .35rem .5rem; border-radius: 6px; }
.added li:hover { background: var(--panel-hover); }
.added li > div { flex: 1; min-width: 0; }

/* Search results and editions: the shelf's cover cards, as buttons. */
button.book-card { background: none; border: 0; padding: 0; font: inherit; text-align: left; cursor: pointer; }
button.book-card:focus-visible .cover { outline: 2px solid var(--accent); outline-offset: 2px; }
.results { margin-top: .5rem; }
.result-cover { position: relative; }
.result-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 4px; }
.book-card.edition .small { white-space: normal; }
.book-card.edition:hover .cover { outline: none; }
.book-card.edition.done .cover { outline: 2px solid var(--good-text); outline-offset: 2px; }
.edition-action { margin-top: .4rem; display: grid; gap: .2rem; justify-items: start; }
.lang { position: absolute; left: .35rem; bottom: .35rem; padding: .05rem .45rem; border-radius: 999px; background: rgba(17, 20, 18, .85); color: var(--text); font-size: .72rem; }
.lang.owned { color: var(--good-text); }
.editions-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem 1rem; margin: .25rem 0 .75rem; }
.editions-head h3 { margin: 0; }
.editions-head .link-button { flex-basis: 100%; }

.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: .75rem 1rem; margin-bottom: 1rem; }
.form-grid label { display: grid; gap: .25rem; color: var(--muted); font-size: .85rem; }
.form-grid label.wide { grid-column: 1 / -1; }
.form-grid input, .form-grid textarea { width: 100%; color: var(--text); font-size: .95rem; }
.form-grid input.narrow { max-width: 7rem; }
ol.steps { margin: .25rem 0 1rem; padding-left: 1.3rem; display: grid; gap: .2rem; }

/* ---- Camera ---- */

.scan-start { margin-bottom: 1rem; font-size: 1.05rem; padding: .6rem 1.1rem; }
.scanner { position: relative; margin-bottom: 1rem; border-radius: 10px; overflow: hidden; background: #000; }
.scanner video { display: block; width: 100%; max-height: 55vh; object-fit: cover; }
/* Where to hold the barcode: a wide box across the middle, the shape of an EAN code. */
.scan-frame { position: absolute; left: 12%; right: 12%; top: 50%; height: 28%; transform: translateY(-60%); border: 2px solid var(--accent); border-radius: 8px; box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .35); pointer-events: none; }
.scan-bar { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .5rem .75rem; background: rgba(17, 20, 18, .85); }
.scan-bar > span { flex: 1; min-width: 10rem; }

@media (max-width: 760px) {
    input.isbn { width: 100%; flex: 1; min-width: 0; font-size: 1.1rem; }
    .isbn-form { flex-wrap: nowrap; }
    .added li { padding: .35rem 0; }
    .scan-start { width: 100%; }
}

/* ---- One book ---- */

.book-page { display: grid; grid-template-columns: minmax(160px, 260px) minmax(0, 1fr); gap: 2rem; align-items: start; }
.book-cover { display: grid; gap: .6rem; justify-items: start; position: sticky; top: 1.5rem; }
.book-details h1 { margin-bottom: .2rem; }
.subtitle { margin: 0 0 .3rem; font-size: 1.05rem; }
.byline { margin: 0 0 1rem; font-size: 1.05rem; }
.status-pick { margin-bottom: 1.25rem; }
.title-edit { font-size: 1.4rem; min-width: 20rem; }
@media (max-width: 700px) {
    .book-page { grid-template-columns: 1fr; }
    .book-cover { position: static; max-width: 200px; }
}

/* ---- Signing in ---- */

.sign-out { margin: .4rem 0 0 .6rem; }
body.signin-page { display: grid; place-items: center; min-height: 100vh; padding: 1.5rem; }
.signin { display: flex; flex-direction: column; gap: .6rem; width: min(100%, 23rem); }
.signin h1 { font-size: 1.4rem; margin: 0; }
.signin .search { width: 100%; min-width: 0; }
.signin .notice { margin: 0; }
.password-fields { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }

#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: .6rem 1.25rem;
    background: var(--danger);
    color: #1b1a17;
    z-index: 1000;
}
#blazor-error-ui .reload { color: #1b1a17; font-weight: 600; margin-left: .5rem; }