:root {
    --bg: #f7f7f5;
    --surface: #ffffff;
    --text: #1f2328;
    --muted: #6b7178;
    --border: #d9dcdf;
    --accent: #2f7d4f;
    --accent-text: #ffffff;
    --error: #b42318;
    --highlight: #e7f2ea;
    --radius: 8px;
    color-scheme: light dark;
}

/* Dark: automatic from the system setting, unless forced with the theme switch (data-theme on <html>) */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme=light]) {
        --bg: #16181b;
        --surface: #1f2226;
        --text: #e6e8ea;
        --muted: #9aa1a8;
        --border: #353a40;
        --accent: #4caf7a;
        --accent-text: #0b1a12;
        --error: #f97066;
        --highlight: #23392c;
    }
}
:root[data-theme=dark] {
    --bg: #16181b;
    --surface: #1f2226;
    --text: #e6e8ea;
    --muted: #9aa1a8;
    --border: #353a40;
    --accent: #4caf7a;
    --accent-text: #0b1a12;
    --error: #f97066;
    --highlight: #23392c;
    color-scheme: dark;
}
:root[data-theme=light] { color-scheme: light; }

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

main {
    max-width: 960px;
    margin: 0 auto;
    padding: 16px;
}

h1 { font-size: 1.5rem; margin: 0.25rem 0 1rem; }
.muted { color: var(--muted); }
.error { color: var(--error); }

/* Top navigation: scrolls horizontally on small screens */
.topbar {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: 0 16px;
}
.topbar nav {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    flex: 1;
}
.topbar nav a {
    padding: 12px 10px;
    color: var(--text);
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 3px solid transparent;
}
.topbar nav a.active {
    border-bottom-color: var(--accent);
    font-weight: 600;
}
.topbar .theme { margin-left: auto; padding: 8px 10px; }
.topbar .logout { margin: 0; padding-left: 8px; }
.topbar .who { color: var(--muted); font-weight: 600; white-space: nowrap; padding-left: 8px; align-self: center; }
.topbar .who::before { content: "👤 "; }

/* Controls */
input, select, textarea, button {
    font: inherit;
    color: inherit;
}
input, select, textarea {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 8px 10px;
}
button {
    background: var(--accent);
    color: var(--accent-text);
    border: 0;
    border-radius: var(--radius);
    padding: 9px 16px;
    cursor: pointer;
}
button.secondary {
    background: transparent;
    color: var(--accent);
    border: 1px solid var(--accent);
}
button.danger {
    background: transparent;
    color: var(--error);
    border: 1px solid var(--error);
}
button.icon {
    background: none;
    color: var(--muted);
    padding: 6px 10px;
}
button.icon:hover { color: var(--error); }
button.link {
    background: none;
    color: var(--muted);
    padding: 8px 0;
    white-space: nowrap;
}

/* Login */
.login {
    max-width: 320px;
    margin: 15vh auto 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.login label {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Tables */
table.grid {
    width: 100%;
    border-collapse: collapse;
    background: var(--surface);
    border-radius: var(--radius);
    overflow: hidden;
}
.grid th, .grid td {
    text-align: left;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
}
.grid th { color: var(--muted); font-weight: 600; }

/* Cards and generic layout */
h2 { font-size: 1.1rem; margin: 0 0 0.5rem; }
h1 .muted { font-size: 1rem; font-weight: normal; }
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px 16px;
    margin: 0 0 16px;
}
.stack { display: flex; flex-direction: column; gap: 8px; }
.stack button { width: 100%; }
.flash {
    background: var(--highlight);
    border-radius: var(--radius);
    padding: 8px 12px;
}

/* Liste page */
.list-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0 16px;
}
@media (min-width: 800px) {
    .list-layout { grid-template-columns: minmax(0, 1fr) 260px; }
}

table.lines { width: 100%; border-collapse: collapse; }
.lines td {
    padding: 6px 0;
    border-top: 1px solid var(--border);
    vertical-align: middle;
}
.lines tr:first-child td { border-top: 0; }
.lines td.name small { display: block; font-size: 0.8rem; }
.lines td.qty { white-space: nowrap; text-align: right; }
.lines td.del { width: 1%; }
.lines form { margin: 0; }
.lines input[type=number] { width: 4.5em; text-align: right; padding: 4px 6px; }
.lines .unit { display: inline-block; min-width: 5.5em; color: var(--muted); font-size: 0.9rem; }
:target { scroll-margin-top: 80px; }
tr:target td { background: var(--highlight); }

.menu-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin-bottom: 4px;
}
.menu-head h2 { margin: 0; flex: 1 1 100%; }
.menu-head form { margin: 0; display: flex; align-items: center; gap: 6px; }
.menu-head input[type=number] { width: 4.5em; padding: 4px 6px; }
.menu-head button { padding: 5px 10px; }

aside textarea { width: 100%; resize: vertical; }

/* Quick add */
.quick-add { position: relative; }
#qa-search { width: 100%; font-size: 1.05rem; }
#qa-results {
    position: absolute;
    left: 16px;
    right: 16px;
    z-index: 10;
    margin: 4px 0 0;
    padding: 4px 0;
    list-style: none;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 6px 20px rgb(0 0 0 / 0.15);
    max-height: 60vh;
    overflow-y: auto;
}
#qa-results li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 12px;
    cursor: pointer;
}
#qa-results li small { color: var(--muted); white-space: nowrap; }
#qa-results li.menu span::before { content: "🍽 "; }
#qa-results li.create { color: var(--accent); }
#qa-results li[aria-selected=true] { background: var(--highlight); }
.qa-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin-top: 12px;
}
.qa-form[hidden] { display: none; }
.qa-form label { display: flex; align-items: center; gap: 6px; }
.qa-form input[type=number] { width: 6em; }

/* Courses (shop view, phone first) */
.shop { max-width: 640px; margin: 0 auto; }
.shop-head p { margin: 0 0 8px; }
.shop-note { white-space: pre-line; }
.aisle h2 {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
    margin: 20px 0 6px;
}
.aisle ul {
    list-style: none;
    margin: 0;
    padding: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.aisle li + li { border-top: 1px solid var(--border); }
.aisle label {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 52px;
    padding: 8px 14px;
    cursor: pointer;
    font-size: 1.1rem;
}
.aisle input[type=checkbox] {
    width: 26px;
    height: 26px;
    flex: none;
    accent-color: var(--accent);
}
.aisle .name { flex: 1; }
.aisle .qty { color: var(--muted); white-space: nowrap; font-size: 1rem; }
.aisle li.done .name { text-decoration: line-through; color: var(--muted); }
.aisle li.done { opacity: 0.6; }
.hide-done .aisle li.done,
.hide-done .aisle.done { display: none; }
.shop-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin: 24px 0 8px;
}
.shop-actions label { display: flex; align-items: center; gap: 8px; }
.shop-actions input[type=checkbox] { width: 22px; height: 22px; accent-color: var(--accent); }

/* Toolbars and inline forms */
.toolbar, .form-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
}
.form-row label { display: flex; align-items: center; gap: 6px; }
.form-row form { margin: 0; }
.toolbar input[type=search] { flex: 1 1 200px; }
details.card > summary { cursor: pointer; font-weight: 600; }
details.card[open] > summary { margin-bottom: 12px; }
a { color: var(--accent); }
.pager {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin: 8px 0 24px;
}

/* Produits */
.products td { padding: 8px 8px 8px 0; }
.products td.del { white-space: nowrap; text-align: right; }
.products tr.editing td { background: var(--highlight); padding: 12px; }
.products tr.editing .form-row + .form-row { margin-top: 12px; }
@media (max-width: 600px) {
    .products td:nth-child(3) { display: none; }  /* aisle column */
}

/* Rayons */
ol.aisles { list-style: none; padding: 4px 8px; }
.aisles li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    border-top: 1px solid var(--border);
    background: var(--surface);
}
.aisles li:first-child { border-top: 0; }
.aisles li form { margin: 0; display: flex; }
.aisles .rename { flex: 1; }
.aisles .rename input { width: 100%; }
.aisles .count { min-width: 2.5em; text-align: right; font-size: 0.9rem; }
.aisles .handle {
    cursor: grab;
    touch-action: none;   /* let pointer events drive the drag on touch screens */
    font-size: 1.4rem;
    padding: 4px 10px;
    color: var(--muted);
    user-select: none;
}
.aisles li.dragging { opacity: 0.7; box-shadow: 0 4px 14px rgb(0 0 0 / 0.2); position: relative; z-index: 1; }

/* Menus */
.menus-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 20px; }
@media (min-width: 860px) {
    .menus-layout { grid-template-columns: 300px minmax(0, 1fr); }
    .menu-detail .back { display: none; }
}
@media (max-width: 859px) {
    .menus-layout.has-detail .menu-list { display: none; }   /* phone: list or detail */
    .menus-layout:not(.has-detail) .menu-detail { display: none; }
}
.menu-list form { margin: 0 0 10px; }
.menu-list .toolbar input { flex: 1; }
.menu-list ul { list-style: none; padding: 4px; }
.menu-list li a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    border-radius: var(--radius);
    color: var(--text);
    text-decoration: none;
}
.menu-list li.active a, .menu-list li a:hover { background: var(--highlight); }
.menu-list li small { display: block; }
.menu-list img, .menu-list .no-photo {
    width: 48px; height: 36px; flex: none;
    object-fit: cover;
    border-radius: 4px;
    background: var(--border);
}
button.wide { width: 100%; }
.back { display: inline-block; margin-bottom: 8px; text-decoration: none; }
.grow { flex: 1 1 260px; min-width: 0; }
.spread { justify-content: space-between; }
.spread h2 { margin: 0; }

.menu-head-card { display: flex; flex-wrap: wrap; gap: 16px; }
.menu-head-card p { margin: 0; }
.menu-head-card .photo { width: 240px; max-width: 100%; }
.menu-head-card .photo img, .menu-head-card .photo .no-photo {
    display: flex; align-items: center; justify-content: center;
    width: 100%; aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius);
    background: var(--border);
    color: var(--muted);
}
.photo-actions { display: flex; gap: 16px; align-items: center; margin-top: 4px; }
.photo-actions form { margin: 0; }
.title-input { font-size: 1.3rem; font-weight: 600; width: 100%; }
.form-row input[type=number] { width: 5em; }
#recette textarea { width: 100%; resize: vertical; }
.danger-zone { margin: 8px 0 32px; text-align: right; }

a.button, label.button {
    display: inline-block;
    text-align: center;
    text-decoration: none;
    border-radius: var(--radius);
    padding: 9px 16px;
    cursor: pointer;
}
a.button.secondary, label.button.secondary, summary.button.secondary { color: var(--accent); border: 1px solid var(--accent); }
.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
    margin-top: 12px;
}
.thumb { position: relative; }
.thumb form { margin: 0; }
.thumb button:not(.icon) { padding: 0; background: none; border: 3px solid transparent; border-radius: var(--radius); width: 100%; }
.thumb img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 5px; }
.thumb.current button:not(.icon) { border-color: var(--accent); }
.thumb .delete { position: absolute; top: 4px; right: 4px; }
.thumb .delete .icon { background: var(--surface); border-radius: 50%; padding: 2px 8px; opacity: 0.9; }

/* Historique */
.history-filter label { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.badge {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--accent-text);
    background: var(--accent);
    border-radius: 999px;
    padding: 1px 8px;
    margin-left: 4px;
}
.menu-detail .shop { max-width: none; }

/* Cave */
.tabs {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    margin: -4px 0 16px;
    border-bottom: 1px solid var(--border);
}
.tabs a {
    padding: 8px 12px;
    color: var(--muted);
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 3px solid transparent;
}
.tabs a.active { color: var(--text); font-weight: 600; border-bottom-color: var(--accent); }

.wine-dot {
    display: inline-block;
    width: 0.8em; height: 0.8em;
    border-radius: 50%;
    vertical-align: baseline;
    border: 1px solid rgb(0 0 0 / 0.2);
    background: var(--border);
}
.wine-dot.c-rouge { background: #8e1b2e; }
.wine-dot.c-blanc { background: #efe3a0; }
.wine-dot.c-rose { background: #f2a3b3; }
.wine-dot.c-bulles { background: #f6efce; box-shadow: inset 0 0 0 2px #d9c56b; }
.wine-dot.c-doux { background: #d79a2b; }

.wine-list .toolbar { margin-bottom: 10px; }
.wine-list .toolbar input[type=search] { flex: 1 1 100%; }
.wine-list > .button { margin-bottom: 10px; width: 100%; }
.wine-list img, .wine-list .no-photo { width: 36px; height: 48px; }
.wine-list .vintages { display: flex; flex-wrap: wrap; gap: 2px 10px; }

.label-photo { width: 180px; }
@media (max-width: 600px) { .wine-head .label-photo { width: 140px; } }
.wine-head .label-photo img, .wine-head .label-photo .no-photo { aspect-ratio: 3 / 4; }
.wine-head h1 { margin: 0 0 4px; }
.wine-head .photo-actions { flex-wrap: wrap; gap: 4px 12px; }
.photo-preview { max-height: 120px; border-radius: var(--radius); }

.wine-form {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px 16px;
}
.wine-form label { display: flex; flex-direction: column; gap: 4px; font-size: 0.9rem; color: var(--muted); }
.wine-form label > input, .wine-form label > select, .wine-form label > textarea { color: var(--text); font-size: 1rem; }
.wine-form label.button { color: var(--accent); font-size: 1rem; }
.wine-form .full { grid-column: 1 / -1; }
.wine-form .form-row input[type=number] { width: 6em; }
.wine-form textarea { resize: vertical; }

.vintage-list { list-style: none; margin: 0; padding: 0; }
.vintage-list li { padding: 10px 0; border-top: 1px solid var(--border); }
.vintage-list li:first-child { border-top: 0; padding-top: 0; }
.vintage-head { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; }
.vintage-head .year { font-size: 1.15rem; }
.vintage-head .count { color: var(--muted); font-size: 0.9rem; }
.vintage-head .del { margin: 0 0 0 auto; }
.vintage-list .window { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 6px 0 0; }
.vintage-list .window label { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.vintage-list .window input[type=number] { width: 5.5em; padding: 4px 6px; }
.vintage-list .window input[type=text] { flex: 1 1 180px; min-width: 0; padding: 4px 6px; }
.add-vintage { margin-top: 12px; }
.add-vintage input[type=number] { width: 5.5em; }
.year-input { width: 4.5em; }
.drink {
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 999px;
    padding: 1px 8px;
    background: var(--border);
}
.drink-keep { background: #dce8f7; color: #1d4f8c; }
.drink-ready { background: var(--highlight); color: var(--accent); }
.drink-last, .drink-past { background: #fde7d2; color: #9a4b0b; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme=light]) .drink-keep { background: #1f3350; color: #9cc3f5; }
    :root:not([data-theme=light]) .drink-last, :root:not([data-theme=light]) .drink-past { background: #4a2e14; color: #f6b97b; }
}
:root[data-theme=dark] .drink-keep { background: #1f3350; color: #9cc3f5; }
:root[data-theme=dark] .drink-last, :root[data-theme=dark] .drink-past { background: #4a2e14; color: #f6b97b; }

/* Cave: shelf of cartons. Wide screens: as on the shelf (rows A, B... of 10 cartons).
   Phones: one column per shelf row (A1 beside B1), so each carton has room for its contents. */
.cave-search { margin-bottom: 16px; }
.cave-search { flex-wrap: nowrap; }
.cave-search input[type=search] { font-size: 1.05rem; flex: 1 1 0; min-width: 0; }
.shelf {
    display: grid;
    grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 24px;
}
@media (max-width: 860px) {
    .shelf {
        grid-template-columns: repeat(var(--rows), minmax(0, 1fr));
        grid-template-rows: repeat(var(--cols), auto);
        grid-auto-flow: column;
    }
}
.carton {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 64px;
    padding: 6px 8px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    text-decoration: none;
    overflow: hidden;
}
.carton:hover { border-color: var(--accent); }
.carton.selected { border: 2px solid var(--accent); padding: 5px 7px; }
.carton.match { background: var(--highlight); }
.carton.empty .carton-label { color: var(--muted); }
.carton-label { font-weight: 700; }
.slots { display: grid; grid-template-columns: repeat(3, 0.8em); gap: 3px; }
.slots .wine-dot.free { background: transparent; border: 1px dashed var(--muted); }
.carton-what {
    font-size: 0.75rem;
    color: var(--muted);
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
@media (max-width: 860px) {
    .carton { display: grid; grid-template-columns: 2.2em auto; grid-template-rows: auto 1fr; column-gap: 8px; }
    .carton-label { grid-row: 1 / 3; font-size: 1.1rem; align-self: center; }
}
@media (min-width: 861px) {
    .carton-what { display: none; }
}

.carton-tag {
    font-size: 0.8rem;
    font-weight: 600;
    padding: 1px 7px;
    border: 1px solid var(--accent);
    border-radius: 999px;
    text-decoration: none;
    white-space: nowrap;
}

/* Bottles of a carton or search results, with Sortir / Déplacer */
.bottle-lines { list-style: none; margin: 0; padding: 0; }
.bottle-line { padding: 10px 0; border-top: 1px solid var(--border); }
.bottle-line:first-child { border-top: 0; padding-top: 4px; }
.bottle-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 1.05rem; }
.bottle-head .wine-name { color: var(--text); text-decoration: none; font-weight: 600; }
.bottle-head .count { color: var(--muted); }
.bottle-head .carton-tag { margin-left: auto; font-size: 0.9rem; }
.bottle-sub { font-size: 0.9rem; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.bottle-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.bottle-actions details { flex: 0 1 auto; }
.bottle-actions details[open] { flex: 1 1 100%; }
.bottle-actions summary { list-style: none; padding: 6px 14px; }
.bottle-actions summary::-webkit-details-marker { display: none; }
.bottle-actions summary.button:not(.secondary) { background: var(--accent); color: var(--accent-text); }
.bottle-actions details[open] summary { margin-bottom: 8px; }
.bottle-actions form { padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); }
.bottle-actions input[type=number] { width: 4em; }

/* Rating: radios 5..1 in reverse order so "this star and the ones before" can be styled with ~ */
.stars { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; border: 0; margin: 0; padding: 0; }
.stars legend { float: left; width: 100%; font-size: 0.9rem; margin-bottom: 2px; }
.stars input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.stars label { font-size: 2rem; line-height: 1; padding: 0 3px; color: var(--border); cursor: pointer; }
.stars input:checked ~ label { color: #e0a400; }
.stars input:focus-visible + label { outline: 2px solid var(--accent); border-radius: 4px; }
a.button:not(.secondary) { background: var(--accent); color: var(--accent-text); }

/* Cave: Entrée */
.cave-search .button, .cave-search button { white-space: nowrap; }
.cave-search button { padding: 9px 12px; }
.pick-list { list-style: none; padding: 4px; margin-top: 10px; }
.entree-wine { display: flex; gap: 12px; align-items: center; }
.entree-wine img { width: 60px; height: 80px; object-fit: cover; border-radius: 4px; }
.entree-wine h1 { margin: 0; font-size: 1.25rem; }
.entree-wine p { margin: 2px 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip input[type=radio] { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip > span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 6px 14px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    cursor: pointer;
}
.chip input:checked + span { border: 2px solid var(--accent); background: var(--highlight); font-weight: 600; padding: 5px 13px; }
.chip input:focus-visible + span { outline: 2px solid var(--accent); }
.chip .year-input { padding: 4px 6px; }
.stepper { display: flex; align-items: center; gap: 8px; }
.stepper button { font-size: 1.4rem; width: 52px; height: 48px; padding: 0; }
.stepper input { width: 4.5em; height: 48px; text-align: center; font-size: 1.3rem; }
.hint { margin: 0 0 10px; font-size: 0.9rem; }
button.carton { font: inherit; text-align: left; cursor: pointer; position: relative; }
button.carton:disabled { opacity: 0.45; cursor: default; }
.carton.has-wine { border-style: dashed; border-color: var(--accent); }
.carton.chosen { border: 2px solid var(--accent); background: var(--highlight); padding: 5px 7px; }
.slots .wine-dot.free.new { background: var(--accent); border: 1px solid var(--accent); }
.alloc {
    position: absolute;
    top: 4px; right: 6px;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--accent-text);
    background: var(--accent);
    border-radius: 999px;
    padding: 0 7px;
}
.entree-submit {
    position: sticky;
    bottom: 0;
    padding: 10px 0 16px;
    background: linear-gradient(to bottom, transparent, var(--bg) 30%);
}
.entree-submit button { min-height: 52px; font-size: 1.05rem; }
.entree-submit button:disabled { opacity: 0.6; cursor: default; }

/* Barcode scanner (barcode.js) */
.input-with-button { display: flex; gap: 6px; flex: 1 1 100%; }
.input-with-button input { flex: 1; min-width: 0; }
.input-with-button button { padding: 6px 12px; }
.scanner {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: #000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.scanner video { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.scan-frame {
    position: relative;
    width: min(80vw, 420px);
    aspect-ratio: 2 / 1;
    border: 3px solid rgb(255 255 255 / 0.9);
    border-radius: 12px;
    box-shadow: 0 0 0 100vmax rgb(0 0 0 / 0.45);
}
.scan-status { position: relative; color: #fff; margin: 16px; text-align: center; }
.scan-actions { position: absolute; bottom: 24px; left: 16px; right: 16px; display: flex; gap: 12px; justify-content: center; }
.scan-actions button { background: rgb(0 0 0 / 0.6); color: #fff; border-color: #fff; min-height: 48px; }

/* Cave: Mouvements */
.filter-chips { margin-bottom: 12px; }
.chip-link {
    padding: 6px 14px;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text);
    text-decoration: none;
    background: var(--surface);
}
.chip-link.active { border: 2px solid var(--accent); background: var(--highlight); font-weight: 600; padding: 5px 13px; }
.moves { list-style: none; padding: 4px 12px; }
.move { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-top: 1px solid var(--border); }
.move:first-child { border-top: 0; }
.move a { color: var(--text); text-decoration: none; font-weight: 600; }
.move time { white-space: nowrap; font-size: 0.85rem; }
.move-icon {
    flex: none;
    width: 26px; height: 26px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700;
    background: var(--border);
}
.kind-1 .move-icon { background: var(--highlight); color: var(--accent); }
.kind-2 .move-icon { background: #fde7d2; color: #9a4b0b; }
.carton-move { font-size: 0.85rem; color: var(--muted); white-space: nowrap; }
.rating { color: #e0a400; letter-spacing: 1px; margin-right: 8px; }
.rating .off { color: var(--border); }
.move-note { font-style: italic; }
.drink-first summary { cursor: pointer; font-weight: 600; }
.drink-first ul { list-style: none; margin: 8px 0 0; padding: 0; }
.drink-first li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 4px 0; }
.drink-first li > a:not(.carton-tag) { color: var(--text); text-decoration: none; }
.label-pick .carton { cursor: pointer; }
.label-pick input { width: 18px; height: 18px; accent-color: var(--accent); vertical-align: -3px; }
.scan-toast {
    position: fixed;
    left: 50%; bottom: 24px;
    transform: translateX(-50%);
    z-index: 100;
    padding: 10px 18px;
    border-radius: 999px;
    background: var(--text);
    color: var(--bg);
    box-shadow: 0 4px 14px rgb(0 0 0 / 0.3);
}
.wine-form label.off-photo:not([hidden]) { display: flex; flex-direction: row; align-items: center; gap: 8px; color: var(--text); }
.off-photo input { width: 20px; height: 20px; accent-color: var(--accent); }
.off-note { font-size: 0.9rem; }

form.inline { display: inline; }

.totp-qr { width: 240px; padding: 8px; background: #fff; }

/* Utilisateurs: one card per account, its actions as separate buttons */
.accounts { list-style: none; margin: 0 0 16px; padding: 0; }
.account { transition: border-color .15s, background-color .15s; }
.account:hover { border-color: var(--accent); background: var(--highlight); }
.account.off > .account-head strong { text-decoration: line-through; }
.account-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin-bottom: 10px; }
.account-head strong { font-size: 1.1em; }
.badge { background: var(--error); color: var(--surface); border-radius: 999px; padding: 1px 10px; font-size: .85em; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 10px; border-top: 1px solid var(--border); }
.actions form { margin: 0; display: flex; gap: 6px; }
.actions button {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 4px 10px;
    cursor: pointer;
}
.actions button:hover { border-color: var(--accent); background: var(--highlight); }
.actions button.danger { color: var(--error); }
.actions button.danger:hover { border-color: var(--error); }