/* =========================================================================
 * theme.css — Claude Design visual language applied on top of default.css
 * Phase 1: palette, typography, and restyling of existing elements only.
 * DOM and jQuery behaviour are unchanged; we override by ID/class selectors.
 * ========================================================================= */

:root {
    /* Palette */
    --bg:            #0e0c0b;
    --bg-elev-1:     #17130f;
    --bg-elev-2:     #1f1a15;
    --line:          #2a2420;
    --line-strong:   #3a3229;
    --ink:           #f3ece0;
    --ink-dim:       #cec3ae;
    --ink-mute:      #9a8e75;
    --accent:        #b5442a;   /* oxblood / claret */
    --accent-soft:   #7a2f1e;
    --cool:          #4a9e9b;   /* teal - LED / live */
    --cool-soft:     #1f3a3a;
    --gold:          #c9a875;
    --ok:            #6a8e53;
    --warn:          #c28a3c;
    --bad:           #a0433a;

    /* Wine type dots */
    --type-red:            #a8392c;
    --type-red-fortified:  #722a4a;
    --type-white:          #e3d58a;
    --type-white-sparkling:#f1ead6;
    --type-white-offdry:   #d4b85a;
    --type-white-fortified:#caa04c;
    --type-white-sweet:    #d17a8f;
    --type-rose:           #d98a95;
    --type-fruit:          #7d9c65;

    --radius: 4px;
    --radius-lg: 8px;
    --statusbar-h: 34px;
}

/* ---------- Base ------------------------------------------------------- */

html, body {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 16px 24px 40px;
    box-sizing: border-box;
    background: var(--bg);
    color: var(--ink);
    font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 13px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
}

*, *::before, *::after {
    box-sizing: border-box;
}

body, th, td, input, select, option, textarea {
    font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--ink);
}

textarea { font-size: 13px; }

/* Scrollbars */
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 4px; }
*::-webkit-scrollbar-thumb:hover { background: var(--ink-mute); }

/* ---------- Typography ------------------------------------------------- */

h1, h2, h3, h3 a {
    font-family: 'Instrument Serif', Georgia, serif;
    font-weight: 400;
    color: var(--ink);
    letter-spacing: 0.005em;
}

h1 { font-size: 36px; margin: 12px 0 6px; color: var(--ink); }
h2 { font-size: 22px; margin: 0 0 10px; color: var(--ink); }
h3 { font-size: 11px;
     font-family: 'JetBrains Mono', ui-monospace, monospace;
     text-transform: uppercase;
     letter-spacing: 0.14em;
     color: var(--ink-mute);
     margin: 0;
     font-weight: 500;
}

a {
    color: var(--gold);
    text-decoration: none;
    transition: color 120ms ease;
}
a:hover { color: var(--accent); text-decoration: none; }

.cellartracker { color: var(--gold); }
.cellartracker:hover { color: var(--accent); text-decoration: none; }

/* Logout link styled as small top-right chip */
body > a[href="login.html"] {
    position: absolute;
    top: 18px; right: 24px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--ink-mute);
    padding: 6px 10px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
}
body > a[href="login.html"]:hover { color: var(--ink); border-color: var(--ink-mute); }

/* Brand title pseudo-element (appended visually above #choices) */
#choices::before {
    content: "The Cellar";
    display: block;
    font-family: 'Instrument Serif', Georgia, serif;
    font-size: 34px;
    line-height: 1;
    color: var(--ink);
    margin: 4px 0 4px;
    letter-spacing: -0.01em;
}
#choices::after {
    content: "v2 · 2026 edition";
    display: block;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--ink-mute);
    margin: 0 0 18px;
}

/* ---------- Horizontal rules ------------------------------------------- */
hr { border: none; border-top: 1px solid var(--line); margin: 16px 0; }

/* ---------- Buttons ---------------------------------------------------- */

.button:not(.small-btn):not(.tool-button) {
    background-color: var(--accent);
    color: #fff;
    padding: 8px 14px;
    border: 1px solid var(--accent);
    border-radius: var(--radius);
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.01em;
    transition: all 120ms ease;
}
.button:not(.small-btn):not(.tool-button):hover {
    background-color: #c74e33;
    border-color: #c74e33;
}

.small-btn, .clear-button {
    background-color: transparent;
    color: var(--ink-mute);
    padding: 2px 8px;
    border: 1px solid var(--line-strong);
    border-radius: 3px;
    cursor: pointer;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    transition: all 120ms ease;
}
.small-btn:hover, .clear-button:hover {
    color: var(--accent);
    border-color: var(--accent-soft);
    background-color: transparent;
}

.tool-button {
    background: var(--bg-elev-1);
    color: var(--ink-dim);
    padding: 8px 12px;
    margin: 4px 0;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    cursor: pointer;
    float: none;
    clear: both;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 12px;
    text-align: left;
    transition: all 120ms ease;
}
.tool-button:hover {
    background-color: var(--bg-elev-2);
    color: var(--ink);
    border-color: var(--ink-mute);
}

.login-button {
    background: var(--accent);
    border: 1px solid var(--accent);
    box-shadow: none;
    text-shadow: none;
    color: #fff;
    padding: 9px 14px;
    border-radius: var(--radius);
    font-weight: 500;
}
.login-button:hover { background: #c74e33; border-color: #c74e33; }

/* ---------- Inputs / selects ------------------------------------------- */

input[type="text"],
input[type="password"],
input[type="email"],
textarea,
select {
    background: var(--bg-elev-1);
    border: 1px solid var(--line);
    color: var(--ink);
    padding: 8px 10px;
    border-radius: var(--radius);
    font: inherit;
    outline: none;
    transition: border-color 120ms;
}
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
textarea:focus,
select:focus { border-color: var(--ink-mute); }

input[type="text"]::placeholder,
input[type="password"]::placeholder,
input[type="email"]::placeholder,
textarea::placeholder { color: var(--ink-mute); }

/* Search bar */
.search-wrapper {
    width: 520px;
    max-width: 100%;
    padding: 0;
    background: var(--bg-elev-1);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    display: flex;
    align-items: center;
}
.search-wrapper input {
    width: auto;
    flex: 1;
    height: 24px;
    padding: 8px 10px;
    background: transparent;
    color: var(--ink);
    font: 14px 'Geist', sans-serif;
    border: 0;
}
.search-wrapper input:focus { outline: 0; background: transparent; }
.search-wrapper input::placeholder {
    color: var(--ink-mute);
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

#search-tools {
    width: 100%;
    margin: 8px 0 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Menu icon tools + clear icon */
#tools, #clear {
    background: transparent;
    width: 36px;
    height: 36px;
}
#tools span, #clear span { background: var(--ink-dim); }

/* ---------- Filter groups ---------------------------------------------- */

#choices {
    clear: none;
    position: relative;
}

#choices ul { margin: 0; padding: 0; list-style: none; }
#choices > ul > li {
    display: block;
    padding: 0;
    border-bottom: 1px solid var(--line);
}
#choices > ul > li:first-child,
#choices > ul > li:nth-child(2) { border-bottom: none; }

#choices li li { padding-left: 0; border-bottom: none; }

#choices .resulthead {
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    align-items: center;
    padding: 14px 2px 6px;
    gap: 10px;
}
#choices .resulthead h3 {
    flex: 1;
    margin: 0;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-mute);
}
#choices .resulthead .small-btn {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-mute);
    padding: 2px 6px;
    border: 1px solid var(--line);
    border-radius: 4px;
    cursor: pointer;
    background: transparent;
}
#choices .resulthead .small-btn:hover { color: var(--ink); border-color: var(--ink-mute); }

/* Collapsible filter sections */
#choices .filter-section .resulthead { cursor: pointer; user-select: none; }
#choices .filter-section .resulthead:hover h3 { color: var(--ink-dim); }
#choices .resulthead-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}
#choices .filter-chevron {
    font-size: 10px;
    color: var(--ink-mute);
    transition: transform 160ms ease;
}
#choices .filter-section.collapsed .filter-chevron { transform: rotate(-90deg); }
#choices .filter-section.collapsed .filter-list,
#choices .filter-section.collapsed #price,
#choices .filter-section.collapsed #special,
#choices .filter-section.collapsed .boxes { display: none; }

#choices .filter-active-count {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    letter-spacing: 0.1em;
    color: var(--ink-mute);
    min-width: 10px;
    text-align: right;
}
#choices .filter-section.has-active .filter-active-count { color: var(--accent); }
#choices .filter-active-count:empty { display: none; }

#choices .filter-active-dot {
    display: inline-block;
    width: 6px; height: 6px;
    margin-left: 6px;
    border-radius: 50%;
    background: transparent;
    vertical-align: middle;
    transition: background 120ms ease;
}
#choices .filter-section.has-active .filter-active-dot {
    background: var(--accent);
    box-shadow: 0 0 4px var(--accent);
}

#drinkability-choice,
#price-choice,
#countries-choice,
#regions-choice,
#appellations-choice,
#types-choice,
#varietals-choice,
#special-choice,
#sizes-choice,
#sort-choice {
    padding: 2px 0 10px;
}

.sort-options {
    display: flex;
    flex-flow: row wrap;
    gap: 6px 8px;
    padding: 4px 4px 10px;
}
.sort-option {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border: 1px solid var(--line-strong);
    border-radius: 100px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    letter-spacing: 0.08em;
    color: var(--ink-dim);
    background: transparent;
    cursor: pointer;
    transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}
.sort-option:hover {
    color: var(--ink);
    border-color: var(--ink-mute);
}
.sort-option.active {
    color: var(--ink);
    border-color: var(--cool);
    background: var(--cool-soft);
}
.sort-option .sort-arrow {
    font-size: 11px;
    color: var(--cool);
    line-height: 1;
}

.sort-section.collapsed .sort-options { display: none; }

/* Checkbox rows — label/input pairs inside boxes */
.boxes {
    display: flex;
    flex-flow: row wrap;
    gap: 6px 10px;
    align-items: center;
    padding: 2px 4px 6px;
}
.boxes div { padding-left: 0; }
.boxes label,
#special label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border: 1px solid var(--line-strong);
    border-radius: 100px;
    font-size: 11px;
    color: var(--ink-dim);
    cursor: pointer;
    transition: all 120ms ease;
}
.boxes label:hover,
#special label:hover { color: var(--ink); border-color: var(--ink-mute); }
/* The drinkability / price / special sections use raw <input> + <label>
   pairs. Visually hide the tiny native checkbox; the pill-shaped <label>
   itself now shows the selected state via :checked-adjacent selectors. */
.boxes > input[type="checkbox"],
#ready > input[type="checkbox"],
#price > input[type="checkbox"],
#special label > input[type="checkbox"] {
    position: absolute;
    width: 1px; height: 1px;
    opacity: 0;
    pointer-events: none;
    margin: 0;
}
/* #ready, #price: <input> followed by <label for=...> */
#ready  input[type="checkbox"]:checked + label,
#price  input[type="checkbox"]:checked + label {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}
/* #special: <label><input>text</label> */
#special label:has(input[type="checkbox"]:checked) {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

/* Hide the raw <label> that floats after <input> in the old markup but is
   not wrapped -- the #ready/#price blocks use that. Keep them but style. */
#ready, #price { padding: 2px 4px; }
#ready label,
#price label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border: 1px solid var(--line-strong);
    border-radius: 100px;
    font-size: 11px;
    color: var(--ink-dim);
    cursor: pointer;
    margin-right: 4px;
    margin-bottom: 4px;
}

/* ---------- Filter lists (one item per row) ---------------------------- */

.filter-list {
    display: flex;
    flex-direction: column;
    padding: 2px 0 8px;
    gap: 1px;
}
.filter-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 6px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    color: var(--ink-dim);
    transition: background 80ms ease, color 80ms ease;
    user-select: none;
}
.filter-item:hover {
    background: var(--bg-elev-1);
    color: var(--ink);
}
.filter-item input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 13px;
    height: 13px;
    min-width: 13px;
    border: 1px solid var(--line-strong);
    border-radius: 3px;
    background: var(--bg);
    margin: 0;
    padding: 0;
    position: relative;
    cursor: pointer;
    flex-shrink: 0;
}
.filter-item input[type="checkbox"]:checked {
    background: var(--accent);
    border-color: var(--accent);
}
.filter-item input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 3px; top: 1px;
    width: 5px; height: 2.5px;
    border-left: 1.5px solid #fff;
    border-bottom: 1.5px solid #fff;
    transform: rotate(-45deg);
}
.filter-item .filter-lbl {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.filter-item .choice-count {
    display: inline;
    color: var(--ink-mute);
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.04em;
    margin: 0;
    flex-shrink: 0;
}
.type-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    vertical-align: middle;
    border: 1px solid rgba(255,255,255,0.08);
    flex-shrink: 0;
}

/* Result table */
#wines {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
#wines td {
    vertical-align: top;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 8px 10px;
    border-bottom: 1px solid var(--line);
    color: var(--ink);
}
#wines tr:hover td { background: var(--bg-elev-1); }

#result { margin-top: 12px; }
#result .resulthead {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ink-mute);
}
#hits { font-weight: 500; color: var(--ink); }

.wineinfo { color: var(--ink); }
.wineinfo td { color: var(--ink); }
#winename {
    font-weight: 500;
    cursor: pointer;
    font-family: 'Instrument Serif', serif;
    font-size: 16px;
    color: var(--ink);
}
#winename:hover { color: var(--gold); }

.vintage { cursor: pointer; color: var(--gold); font-family: 'JetBrains Mono', monospace; }
.delWine { cursor: pointer; color: var(--ink-mute); }
.delWine:hover { color: var(--bad); }
.addWine { cursor: pointer; color: var(--ink-mute); }
.addWine:hover { color: var(--cool); }
.winecolor {
    cursor: pointer;
    height: 10px; width: 10px;
    border-radius: 50%;
    background-color: var(--type-red);
    border: 1px solid var(--line-strong);
    margin: 4px 4px 4px 2px;
    display: inline-block;
}

/* ---------- Saved / basket panel --------------------------------------- */

#saved {
    padding: 14px 0;
    border-top: 1px solid var(--line);
    margin-top: 12px;
}
#saved .resulthead { gap: 8px; align-items: center; }
#saveCount {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: var(--ink-mute);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-right: auto;
}
#savedWines { width: 100%; border-collapse: collapse; font-size: 12px; }
#savedWines td { padding: 6px 8px; border-bottom: 1px solid var(--line); color: var(--ink-dim); }

/* ---------- Toolbar / navigation --------------------------------------- */

.toolbar { margin: 4px 0; }
#toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 4px;
    margin: 0; padding: 0; list-style: none;
    border-bottom: 1px solid var(--line);
    padding-bottom: 6px;
}
#toolbar li {
    display: inline-block;
    float: none;
    padding: 0;
}
#toolbar a {
    display: block;
    padding: 7px 10px;
    text-decoration: none;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ink-mute);
    font-weight: 500;
    border-radius: var(--radius);
    cursor: pointer;
    transition: all 120ms ease;
}
#toolbar a:hover {
    color: var(--ink);
    background: var(--bg-elev-1);
}
#toolbar a.active,
#toolbar a[data-active="true"] {
    color: var(--ink);
    background: var(--bg-elev-2);
    box-shadow: inset 0 -1px 0 var(--accent);
}

/* ---------- Cart wrapper ----------------------------------------------- */

.cart-wrapper {
    position: relative;
    width: 46px; height: 32px;
    margin: 0 0 0 auto;
    overflow: visible;
}
#cart-count {
    position: absolute;
    top: 22px; left: 0;
    width: 100%;
    text-align: center;
    color: var(--ink);
    font: 500 11px 'JetBrains Mono', monospace;
    z-index: 12;
    letter-spacing: 0.08em;
    min-height: 14px;
}
#cart-count:empty { display: none; }

/* ---------- Popups ----------------------------------------------------- */

.popup,
.popup-info,
.popup-thermo,
.popup-bg-picker,
#tools-pane,
#suggest-pane,
#food-pairings-pane,
#user-management-pane {
    background: var(--bg-elev-2);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-lg);
    color: var(--ink);
    box-shadow: 0 12px 40px rgba(0,0,0,0.6);
    padding: 18px;
}

#tools-pane {
    width: 220px;
    padding: 12px;
}

.popup h2,
.popup-info h2,
.popup-thermo h2,
#tools-pane h2,
#suggest-pane h2,
#food-pairings-pane h2,
#user-management-pane h2 {
    color: var(--ink);
    border-bottom: 1px solid var(--line);
    padding-bottom: 10px;
    margin: 0 0 14px;
    font-family: 'Instrument Serif', serif;
    font-size: 22px;
    font-weight: 400;
}

.popup-thermo {
    width: 840px;
    height: 520px;
    background: var(--bg-elev-2);
    color: var(--ink);
}

#thermodiv { width: 100%; height: calc(100% - 160px); font-size: 12px; line-height: 1.2em; }
#temp-controls {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}
.temp-control-group { display: flex; flex-direction: column; gap: 4px; }
.temp-control-group label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: var(--ink-mute);
    text-transform: uppercase;
    letter-spacing: 0.12em;
}
#temp-refresh { margin: 0; padding: 7px 12px; }
#temp-status {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--ink-dim);
    margin-left: 4px;
}
#thermo-legend {
    margin-top: 10px;
    max-height: 96px;
    overflow-y: auto;
    border-top: 1px solid var(--line);
    padding-top: 8px;
    font-size: 12px;
    color: var(--ink-dim);
}

/* Info popup (bin details) keeps cream accent for legibility on wine cards */
.popup-info {
    background: var(--bg-elev-2);
    color: var(--ink);
    width: 320px; height: auto; min-height: 220px;
}

/* Suggest / food-pairing / user-management panes widths */
#suggest-pane { width: 520px; max-height: 540px; padding: 20px; }
#suggestion-result { margin-top: 16px; max-height: 400px; overflow-y: auto; padding: 10px; color: var(--ink-dim); }
#suggestion-result p { margin: 0; padding: 0 5px; }

#food-pairings-pane { width: 520px; padding: 20px; }
#food-pairings-result { margin-top: 16px; max-height: 360px; overflow-y: auto; color: var(--ink-dim); }

#user-management-pane { width: 680px; padding: 20px; }

.recommendation-set {
    border: 1px solid var(--line-strong);
    padding: 12px;
    border-radius: var(--radius);
    margin-bottom: 8px;
    background: var(--bg-elev-1);
}
.recommendation-details { font-size: 12px; color: var(--ink-mute); padding: 4px 0 0; }

.apply-recommendation {
    background-color: var(--cool);
    color: #0e0c0b;
    padding: 8px 14px;
    border: 1px solid var(--cool);
    border-radius: var(--radius);
    cursor: pointer;
    margin-bottom: 6px;
    width: 100%;
    font-weight: 500;
}
.apply-recommendation:hover { background-color: #5fb6b2; border-color: #5fb6b2; }

#matching-wines { margin-top: 16px; max-height: 300px; overflow-y: auto; }

/* ---------- Admin / modals --------------------------------------------- */

.modal {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 10000;
    display: none;
    align-items: center; justify-content: center;
}
.modal .modal-content {
    background: var(--bg-elev-2);
    color: var(--ink);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-lg);
    padding: 20px;
    width: 360px;
    max-width: 92vw;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.modal .button-group { display: flex; gap: 8px; margin-top: 6px; }
.modal input[type="text"],
.modal input[type="email"],
.modal input[type="password"],
.modal select { width: 100%; }

/* User admin table */
#users-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    margin-top: 8px;
}
#users-table th, #users-table td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--line);
    text-align: left;
}
#users-table th {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ink-mute);
    font-weight: 500;
}

/* Password change block spacing */
.password-change { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 8px 0 12px; }
.user-list-controls { display: flex; gap: 8px; margin: 10px 0; }

/* ---------- jQuery UI date picker tweaks ------------------------------- */
.ui-widget.ui-widget-content {
    border-color: var(--line-strong);
    background: var(--bg-elev-2);
    color: var(--ink);
}
.ui-datepicker-header { background: var(--bg-elev-1); border-color: var(--line); color: var(--ink); }

/* ---------- Suggestion / food-pairing rich text overrides -------------- */
/* The inline <style> block in index.html renders AI markdown with light
 * colors (#333/#444/#555). Force them back to our dark-theme ink. */

.suggestion-content,
.food-suggestions,
#suggestion-result,
#food-pairings-result {
    color: var(--ink-dim);
    line-height: 1.6;
}

.suggestion-content h1, .food-suggestions h1,
#suggestion-result h1, #food-pairings-result h1 {
    font-family: 'Instrument Serif', serif;
    font-weight: 400;
    font-size: 22px;
    color: var(--ink);
    margin: 10px 0 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--line);
}
.suggestion-content h2, .food-suggestions h2,
#suggestion-result h2, #food-pairings-result h2 {
    font-family: 'Instrument Serif', serif;
    font-weight: 400;
    font-size: 18px;
    color: var(--ink);
    margin: 8px 0 4px;
}
.suggestion-content h3, .food-suggestions h3,
#suggestion-result h3, #food-pairings-result h3 {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--ink-mute);
    font-weight: 500;
    margin: 6px 0 3px;
}
.suggestion-content p, .food-suggestions p,
#suggestion-result p, #food-pairings-result p {
    color: var(--ink-dim);
    margin-bottom: 6px;
}
.suggestion-content strong, .food-suggestions strong {
    color: var(--ink);
}

.loading { color: var(--ink-mute); font-style: italic; }
.error { color: var(--bad); text-align: center; padding: 20px; }

/* Get-suggestion buttons had inline color:black — restore white text */
#get-suggestion, #apply-filters, #get-food-pairings, #get-cellar-suggestion {
    color: #fff !important;
}

/* Autocomplete dropdown (jQuery UI) */
.ui-autocomplete,
.dish-autocomplete {
    background-color: var(--bg-elev-2) !important;
    border: 1px solid var(--line-strong) !important;
    color: var(--ink) !important;
}
.ui-menu-item,
.dish-autocomplete .ui-menu-item {
    color: var(--ink-dim) !important;
    padding: 6px 10px !important;
}
.ui-menu-item:hover, .ui-menu-item.ui-state-focus,
.dish-autocomplete .ui-menu-item:hover,
.dish-autocomplete .ui-menu-item.ui-state-focus {
    background-color: var(--accent-soft) !important;
    color: #fff !important;
}

/* ---------- Misc ------------------------------------------------------- */

#smiley { display: none; }

.clear-left { clear: none; }

/* =========================================================================
 * Phase 2: 3-column app shell + SVG rack
 * ========================================================================= */

/* Expand the page so the 3-col layout has breathing room. */
html, body { max-width: 1680px; }

/* ---------- App shell --------------------------------------------------- */

.app-shell {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr) 340px;
    gap: 20px;
    align-items: start;
    margin-top: 4px;
}

.sidebar-left,
.sidebar-right {
    position: sticky;
    top: 12px;
    max-height: calc(100vh - 24px - var(--statusbar-h));
    overflow-y: auto;
    padding: 16px 16px calc(16px + var(--statusbar-h)) 0;
    background: transparent;
    border-right: 1px solid var(--line);
}
.sidebar-right {
    padding: 16px 0 calc(16px + var(--statusbar-h)) 16px;
    border-right: none;
    border-left: 1px solid var(--line);
}

.cellar-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Brand block in left sidebar */
.brand {
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 12px;
}
.brand .brand-title {
    font-family: 'Instrument Serif', serif;
    font-size: 30px;
    line-height: 1;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin: 0 0 2px;
}
.brand .brand-title em {
    font-style: italic;
    color: var(--gold);
    font-weight: 400;
}
.brand .brand-meta {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-mute);
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 6px;
}
.brand .brand-meta span.dot::before { content: "·"; margin-right: 6px; color: var(--line-strong); }

/* Redirect the old #choices pseudo-title (Phase 1) -- no longer needed,
   we use the .brand block in the sidebar instead. */
#choices::before, #choices::after { content: none; display: none; }

/* ---------- Sidebar search (above filters) ----------------------------- */

.sb-search {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-bottom: 12px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--line);
}
.sb-search .search-wrapper {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
}
.sb-search .search-wrapper input {
    font-size: 13px;
    padding: 7px 10px;
}
.sb-search .search-wrapper #clear {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}
.sb-suggest-btn {
    width: 100%;
    padding: 8px 12px;
    background: transparent;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    color: var(--ink);
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 120ms ease;
}
.sb-suggest-btn:hover {
    border-color: var(--gold);
    color: var(--gold);
}

/* Hide the legacy main-column search/toolbar strip -- search + suggest now
   live in the sidebar. Keep #cellar in the DOM in case JS wires to it. */
#search-tools { display: none !important; }

/* Tabs (FILTER / BASKET) on top of the left sidebar */
.sb-tabs {
    display: flex;
    gap: 2px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 12px;
}
.sb-tab {
    flex: 1;
    padding: 8px 10px;
    background: transparent;
    border: 0;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-mute);
    cursor: pointer;
    border-bottom: 1px solid transparent;
    margin-bottom: -1px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.sb-tab:hover { color: var(--ink); }
.sb-tab.active {
    color: var(--ink);
    border-bottom-color: var(--accent);
}
.sb-tab .badge {
    display: inline-block;
    min-width: 16px;
    padding: 0 5px;
    height: 16px;
    line-height: 16px;
    background: var(--accent);
    color: #fff;
    border-radius: 8px;
    font-size: 9px;
    letter-spacing: 0.06em;
}

/* Hide the body-level logout link from Phase 1; moved into sidebar */
body > a[href="login.html"] { display: none; }

/* When left sidebar owns the filter stack, neutralize its outer styling */
#choices { position: static; }
#choices > ul > li { padding: 0; }

/* ---------- Basket panel (cards) -------------------------------------- */

#basket-slot { display: flex; flex-direction: column; gap: 10px; }

.basket-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 4px 2px 8px;
    border-bottom: 1px solid var(--line);
}
.basket-count-lbl {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-mute);
}
.basket-count-lbl #basket-count {
    color: var(--ink);
    font-weight: 500;
}
.sb-small-btn {
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 3px 8px;
    color: var(--ink-mute);
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 120ms ease;
}
.sb-small-btn:hover { color: var(--ink); border-color: var(--ink-mute); }

/* Light-only-saved toggle */
.basket-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 2px 10px;
    border-bottom: 1px solid var(--line);
    cursor: pointer;
    font-size: 12px;
    color: var(--ink-dim);
    user-select: none;
}
.basket-toggle input[type="checkbox"] {
    position: absolute;
    width: 1px; height: 1px;
    opacity: 0;
    pointer-events: none;
}
.basket-toggle .toggle-track {
    position: relative;
    width: 30px;
    height: 16px;
    background: var(--bg);
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    flex-shrink: 0;
    transition: background 120ms ease, border-color 120ms ease;
}
.basket-toggle .toggle-thumb {
    position: absolute;
    top: 1px; left: 1px;
    width: 12px; height: 12px;
    background: var(--ink-mute);
    border-radius: 50%;
    transition: transform 120ms ease, background 120ms ease;
}
.basket-toggle input:checked + .toggle-track {
    background: var(--accent);
    border-color: var(--accent);
}
.basket-toggle input:checked + .toggle-track .toggle-thumb {
    background: #fff;
    transform: translateX(14px);
}
.basket-toggle .toggle-lbl { flex: 1; }

/* Basket cards */
#basket-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.basket-card {
    display: grid;
    grid-template-columns: 8px 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    cursor: pointer;
    transition: border-color 120ms ease, background 120ms ease;
}
.basket-card:hover {
    border-color: var(--ink-mute);
    background: var(--bg-elev-1);
}
.basket-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.08);
}
.basket-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.basket-vintage {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.1em;
    color: var(--ink-mute);
}
.basket-name {
    font-family: 'Instrument Serif', serif;
    font-size: 15px;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.basket-sub {
    font-size: 11px;
    color: var(--ink-dim);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.basket-del {
    background: transparent;
    border: 0;
    color: var(--ink-mute);
    font-size: 18px;
    line-height: 1;
    width: 22px;
    height: 22px;
    cursor: pointer;
    border-radius: 3px;
    transition: color 120ms ease, background 120ms ease;
}
.basket-del:hover {
    color: var(--bad);
    background: rgba(255,255,255,0.04);
}

/* ---------- Main column: header strip ---------------------------------- */

.main-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line);
}
.main-header .eyebrow {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-mute);
    margin: 0 0 4px;
}
.main-header h1 {
    font-family: 'Instrument Serif', serif;
    font-size: 32px;
    line-height: 1;
    margin: 0;
    color: var(--ink);
}
.main-header .hdr-meta {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: var(--ink-mute);
    letter-spacing: 0.08em;
    margin-top: 8px;
}
.main-header .hdr-meta .accent { color: var(--gold); }

.stats-row {
    display: flex;
    gap: 22px;
}
.stat {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    min-width: 54px;
}
.stat .stat-val {
    font-family: 'Instrument Serif', serif;
    font-size: 26px;
    line-height: 1;
    color: var(--ink);
}
.stat .stat-lbl {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-mute);
    margin-top: 4px;
}

/* ---------- Main column: rack panel ------------------------------------ */

.rack-panel {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 14px 0 6px;
}

#rack {
    margin: 0;
    display: flex;
    justify-content: center;
    overflow-x: auto;
}

/* SVG rack — render at natural size so bins stay crisp.
 * Horizontal scroll in #rack wrapper kicks in on narrow viewports. */
.rack-svg {
    display: block;
    height: auto;
    margin: 0 auto;
}

.rack-svg .bin {
    cursor: pointer;
    transition: fill 120ms ease, stroke 120ms ease, fill-opacity 120ms ease;
}
.rack-svg .bin:hover {
    stroke: var(--gold);
    stroke-width: 1.2;
}

.rack-svg .wall-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.14em;
    fill: var(--ink-mute);
    text-transform: uppercase;
}
.rack-svg .wall-label-count {
    fill: var(--ink-dim);
}

/* Wall total summary below rack */
.rack-summary {
    display: flex;
    justify-content: space-around;
    margin-top: 4px;
    padding-top: 8px;
    border-top: 1px dashed var(--line);
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-mute);
}
.rack-summary .accent { color: var(--ink); }

/* ---------- Main column: search/filter bar --------------------------- */

#search-tools { margin: 0; }

/* ---------- Right sidebar: detail + LED ------------------------------- */

.detail-panel {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    overflow: hidden;
}
.detail-panel .eyebrow {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-mute);
    margin: 0 0 10px;
}
.detail-empty {
    padding: 40px 24px;
    text-align: center;
    color: var(--ink-mute);
    font-size: 12px;
}
.detail-empty .icon {
    font-family: 'Instrument Serif', serif;
    font-size: 48px;
    color: var(--line-strong);
    line-height: 1;
    margin-bottom: 14px;
}

.detail { padding: 20px; }
.detail-type {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px;
    border-radius: 100px;
    background: var(--bg-elev-2);
    border: 1px solid var(--line);
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-dim);
    margin-bottom: 12px;
}
.detail-type .dot { width: 6px; height: 6px; border-radius: 50%; }
.detail-vintage {
    font-family: 'Instrument Serif', serif;
    font-size: 42px;
    line-height: 0.95;
    color: var(--gold);
    margin-bottom: 4px;
    font-style: italic;
}
.detail-wine {
    font-family: 'Instrument Serif', serif;
    font-size: 20px;
    line-height: 1.2;
    color: var(--ink);
    margin-bottom: 14px;
}
.detail-wine .d-appellation {
    color: var(--ink-dim);
}
.detail-eyebrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-mute);
}
.detail-eyebrow .ct-link {
    color: var(--ink-mute);
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 2px 4px;
    border-radius: 2px;
}
.detail-eyebrow .ct-link:hover { color: var(--cool); background: var(--bg-elev-1); }

.detail .scores {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.score-chip {
    background: var(--bg-elev-1);
    padding: 5px 9px;
    border-radius: 3px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--ink-dim);
    border: 1px solid var(--line);
}
.score-chip .k { color: var(--ink-mute); margin-right: 6px; font-size: 10px; }
.score-chip .v { color: var(--ink); font-weight: 500; }

.detail-grid {
    display: grid;
    grid-template-columns: 74px 1fr;
    gap: 6px 14px;
    padding: 12px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    font-size: 12px;
    margin: 0 0 14px;
}
.detail-grid dt {
    color: var(--ink-mute);
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding-top: 2px;
}
.detail-grid dd { margin: 0; color: var(--ink); }
.detail-grid dd.mono { font-family: 'JetBrains Mono', monospace; }
.detail-grid dd.gold { color: var(--gold); }
.detail-grid dd.mute { color: var(--ink-mute); font-size: 11px; }

.detail-grid .ct-barcode-link {
    color: var(--ink-dim);
    text-decoration: none;
    border-bottom: 1px dashed var(--line-strong);
    padding-bottom: 1px;
    transition: color 120ms ease, border-color 120ms ease;
}
.detail-grid .ct-barcode-link:hover {
    color: var(--cool);
    border-bottom-color: var(--cool);
}
.detail-grid .ct-barcode-link .ct-arrow {
    margin-left: 4px;
    font-size: 10px;
    opacity: 0.7;
}

.detail-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.detail-actions .btn {
    flex: 1 1 auto;
    min-width: 0;
    padding: 9px 12px;
    font-size: 12px;
    background: transparent;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    color: var(--ink-dim);
    cursor: pointer;
    font-family: 'Geist', sans-serif;
    transition: border-color 0.1s, color 0.1s, background 0.1s;
}
.detail-actions .btn:hover {
    border-color: var(--ink-mute);
    color: var(--ink);
}
.detail-actions .btn.primary {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--ink);
}
.detail-actions .btn.primary:hover {
    background: var(--accent);
}

/* ---------- Wine results list ---------------------------------------- */

#wines {
    width: 100%;
    margin: 0;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--bg-elev-1);
    overflow: hidden;
}

.results-head,
.wine-row {
    display: grid;
    grid-template-columns: 10px 22px 52px 1fr 140px 96px 96px;
    gap: 10px;
    align-items: center;
    padding: 9px 14px;
    border-bottom: 1px solid var(--line);
}

.results-head {
    padding: 8px 14px;
    background: var(--bg-elev-2);
    color: var(--ink-mute);
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.results-head .sort-col { cursor: pointer; }
.results-head .sort-col:hover { color: var(--ink); }
.results-head .sort-col.active { color: var(--ink); }
.results-head .sort-arrow { margin-left: 4px; color: var(--accent); }

.wine-row {
    cursor: pointer;
    font-size: 12px;
    color: var(--ink);
    transition: background 0.05s;
}
.wine-row:last-child { border-bottom: none; }
.wine-row:hover { background: var(--bg-elev-2); }
.wine-row.selected {
    background: var(--bg-elev-2);
    box-shadow: inset 3px 0 0 var(--accent);
}

.wine-row .wine-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    display: block;
}
.wine-row .wine-add {
    color: var(--ink-mute);
    font-family: 'JetBrains Mono', monospace;
    font-size: 14px;
    text-align: center;
    cursor: pointer;
    border-radius: 2px;
    user-select: none;
    line-height: 1;
}
.wine-row .wine-add:hover { color: var(--cool); }
.wine-row.in-cart .wine-add { color: var(--cool); }

.wine-row .wine-vintage {
    font-family: 'JetBrains Mono', monospace;
    color: var(--gold);
    font-size: 12px;
    cursor: pointer;
}
.wine-row .wine-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wine-row .wine-name .wn-head { color: var(--ink); }
.wine-row .wine-name .wn-tail { color: var(--ink-dim); margin-left: 6px; }

.wine-row .wine-region {
    font-size: 11px;
    color: var(--ink-dim);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wine-row .wine-drink {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--ink-mute);
    text-align: right;
}
.wine-row .wine-drink.ready   { color: var(--ok); }
.wine-row .wine-drink.soon    { color: var(--warn); }
.wine-row .wine-drink.expired { color: var(--bad); text-decoration: line-through; }
.wine-row .wine-drink.future  { color: var(--cool); }

.wine-row .wine-score {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--ink-dim);
    text-align: right;
}
.wine-row .wine-score .ct { color: var(--ink); }

/* Older hits banner pushed up and compacted so it blends with the toolbar */
.resulthead { margin: 10px 0 6px; }
.resulthead #hits h3 {
    margin: 0;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-mute);
}

.led-panel {
    margin-top: 18px;
    padding-top: 14px;
    background: transparent;
    border: none;
    border-radius: 0;
    border-top: 1px solid var(--line);
}
.led-panel .eyebrow {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-mute);
    margin: 0 0 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.led-scenes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}
.led-scene {
    padding: 8px 10px;
    background: var(--bg-elev-1);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    color: var(--ink-dim);
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    text-align: center;
    transition: all 120ms ease;
}
.led-scene:hover { color: var(--ink); border-color: var(--ink-mute); }
.led-scene.active {
    color: var(--ink);
    background: var(--bg-elev-2);
    border-color: var(--accent);
}

.led-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.led-switch {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid var(--line-strong);
    background: var(--bg-elev-1);
    color: var(--ink-mute);
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    letter-spacing: 0.12em;
    cursor: pointer;
    user-select: none;
    transition: all 120ms ease;
}
.led-switch .led-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--ink-mute);
    box-shadow: none;
}
.led-switch.on {
    color: var(--cool);
    border-color: var(--cool);
    background: rgba(74,158,155,0.08);
}
.led-switch.on .led-dot {
    background: var(--cool);
    box-shadow: 0 0 6px var(--cool);
}
.led-panel.off .led-scenes { opacity: 0.55; }

/* ---------- Bottom status bar ----------------------------------------- */

.app-statusbar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 18px;
    background: rgba(14, 12, 11, 0.96);
    border-top: 1px solid var(--line);
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.06em;
    color: var(--ink-mute);
    backdrop-filter: blur(8px);
}
.app-statusbar .sb-seg { display: flex; align-items: center; gap: 8px; }
.app-statusbar .sb-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--cool);
    box-shadow: 0 0 6px var(--cool);
}
.app-statusbar .sb-src { color: var(--ink-dim); }
.app-statusbar .sb-link {
    color: var(--cool);
    text-decoration: none;
    cursor: pointer;
    letter-spacing: 0.1em;
}
.app-statusbar .sb-link:hover { color: var(--ink); text-decoration: underline; }
.app-statusbar .mono { color: var(--ink-dim); }
.sb-led-state { color: var(--cool); font-weight: 500; }
.sb-led-state.off { color: var(--ink-mute); }
.sb-led-state:hover { text-decoration: underline; }

/* Rack dim / glow states.
 *
 * Default/OFF: mild dim so bin colors remain readable.
 * ON: boost brightness + add a soft glow to lit bins so it's obvious
 *     that the LEDs are actually on. The glow targets only rects whose
 *     fill has been changed from the default ("var(--bg)") — i.e. bins
 *     that are currently showing a wine/type color. */
.app-shell .rack-panel,
.app-shell #rack {
    transition: opacity 180ms ease, filter 180ms ease;
}
.app-shell.lights-off .rack-panel,
.app-shell.lights-off #rack {
    opacity: 0.92;
    filter: saturate(0.88) brightness(0.96);
}
.app-shell:not(.lights-off) #rack .bin:not([fill="var(--bg)"]) {
    filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.35))
            drop-shadow(0 0 4px rgba(255, 255, 255, 0.18));
    transition: filter 180ms ease;
}

/* Push main content above the statusbar */
body { padding-bottom: calc(var(--statusbar-h) + 8px); }

/* ---------- Climate modal (temperature history) ----------------------- */

/* The header climate stat becomes a clickable link. */
#hdr-climate {
    cursor: pointer;
    border-bottom: 1px dotted transparent;
    transition: color 160ms ease, border-color 160ms ease;
}
#hdr-climate:hover {
    color: var(--cool);
    border-bottom-color: var(--cool-soft);
}

.climate-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 400;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding: 6vh 20px;
    background: rgba(10, 8, 6, 0.72);
    backdrop-filter: blur(4px);
    animation: climateFade 180ms ease;
}
.climate-modal-overlay.open { display: flex; }

@keyframes climateFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.climate-modal {
    width: min(820px, 100%);
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    background: var(--bg-elev-1);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-lg);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
    overflow: hidden;
}

.climate-modal-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 24px;
    border-bottom: 1px solid var(--line);
}
.climate-modal-head .eyebrow { margin: 0; }
.climate-modal-head .climate-title {
    font-family: 'Instrument Serif', Georgia, serif;
    font-size: 24px;
    color: var(--ink);
    margin-top: 4px;
    line-height: 1.1;
}
.climate-modal-close {
    cursor: pointer;
    color: var(--ink-mute);
    font-size: 22px;
    line-height: 1;
    padding: 4px 10px;
    border: 1px solid transparent;
    border-radius: 4px;
    transition: color 160ms ease, border-color 160ms ease, background 160ms ease;
    user-select: none;
}
.climate-modal-close:hover {
    color: var(--ink);
    background: var(--bg-elev-2);
    border-color: var(--line);
}

.climate-ranges {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    padding: 14px 24px;
    border-bottom: 1px solid var(--line);
}
.climate-range {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 6px 12px;
    border: 1px solid var(--line);
    color: var(--ink-dim);
    background: transparent;
    border-radius: 3px;
    cursor: pointer;
    transition: color 160ms ease, border-color 160ms ease, background 160ms ease;
}
.climate-range:hover {
    color: var(--ink);
    border-color: var(--ink-mute);
}
.climate-range.active {
    color: var(--cool);
    border-color: var(--cool);
    background: rgba(74, 158, 155, 0.08);
}

.climate-body {
    overflow: auto;
    flex: 1 1 auto;
}

.climate-chart-wrap {
    padding: 20px 24px;
    border-bottom: 1px solid var(--line);
}
.climate-chart-wrap svg { display: block; width: 100%; height: auto; }
.climate-chart-wrap .chart-empty {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--ink-mute);
    text-align: center;
    padding: 40px 0;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.climate-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 12px;
}
.climate-legend-item {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: var(--ink-dim);
    display: flex;
    align-items: center;
    gap: 6px;
    letter-spacing: 0.04em;
}
.climate-legend-item .swatch {
    width: 12px;
    height: 2px;
    display: inline-block;
}

.climate-probes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    padding: 20px 24px;
}
.climate-probe {
    padding: 14px;
    background: var(--bg-elev-2);
    border: 1px solid var(--line);
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.climate-probe-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}
.climate-probe .probe-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: var(--ink-mute);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
.climate-probe .probe-value {
    font-family: 'Instrument Serif', Georgia, serif;
    font-size: 26px;
    margin-top: 2px;
    line-height: 1;
    color: var(--ok);
}
.climate-probe .probe-value.cool { color: var(--cool); }
.climate-probe .probe-value.warn { color: var(--warn); }
.climate-probe .probe-value .unit {
    font-size: 14px;
    color: var(--ink-mute);
    margin-left: 2px;
}
.climate-probe .probe-stats {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: var(--ink-mute);
    text-align: right;
    line-height: 1.4;
    letter-spacing: 0.04em;
}
.climate-probe .probe-spark svg {
    display: block;
    width: 100%;
    height: 36px;
}

.climate-modal-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 24px;
    border-top: 1px solid var(--line);
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: var(--ink-mute);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.climate-modal-foot .status { color: var(--ink-dim); }

@media (max-width: 640px) {
    .climate-probes { grid-template-columns: 1fr; }
    .climate-modal { max-height: 94vh; }
}

/* ---------- Responsive fallback --------------------------------------- */

@media (max-width: 1400px) {
    .app-shell {
        grid-template-columns: 220px minmax(0, 1fr) 300px;
        column-gap: 16px;
    }
}
@media (max-width: 1100px) {
    .app-shell {
        grid-template-columns: 220px minmax(0, 1fr);
    }
    .sidebar-right {
        display: block;
        grid-column: 1 / -1;
        position: static;
        max-height: none;
        overflow: visible;
        padding: 14px 0 0;
        margin-top: 4px;
        border-left: none;
        border-right: none;
        border-top: 1px solid var(--line);
    }
    .detail-panel {
        padding: 0;
    }
    .detail-empty {
        padding: 24px 14px;
    }
}
@media (max-width: 900px) {
    .app-shell { grid-template-columns: 1fr; }
    .sidebar-left { position: static; max-height: none; }
    .sidebar-right {
        padding-top: 12px;
    }
    #wine-detail-modal {
        align-items: flex-end;
        padding: 0;
    }
    #wine-detail-modal .app-modal {
        width: 100%;
        max-width: 100%;
        max-height: calc(100vh - 8px);
        border-radius: 14px 14px 0 0;
    }
    #wine-detail-modal .app-modal-head {
        padding: 12px 16px 10px;
    }
    #wine-detail-modal .app-modal-body {
        padding: 0 0 10px;
    }
    #wine-detail-modal .detail {
        padding: 8px 16px 18px;
    }
    #wine-detail-modal .detail-empty {
        padding: 18px 16px 20px;
    }
}

/* ---------- App modal (wine suggestion / food / user admin) ------------ */

.app-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(8, 6, 5, 0.74);
    backdrop-filter: blur(3px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 400;
    padding: 40px 16px;
    animation: appModalFade 160ms ease;
}
.app-modal-overlay.open { display: flex; }
@keyframes appModalFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.app-modal {
    width: 100%;
    max-width: 640px;
    max-height: calc(100vh - 80px);
    display: flex;
    flex-direction: column;
    background: var(--bg-elev-1);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-lg);
    box-shadow: 0 24px 72px rgba(0, 0, 0, 0.55);
    overflow: hidden;
}

.app-modal.sm { max-width: 460px; }
.app-modal.lg { max-width: 820px; }
.app-modal.xl { max-width: 980px; }

/* Mobile wine detail modal */
#wine-detail-modal .app-modal {
    max-width: 620px;
}
#wine-detail-modal .app-modal-body {
    padding: 0;
}
#wine-detail-modal .detail {
    padding: 12px 18px 20px;
}
#wine-detail-modal .detail-empty {
    padding: 24px 18px;
}

.app-modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px 16px;
    border-bottom: 1px solid var(--line);
}

.app-modal-head .eyebrow {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-mute);
    margin: 0 0 4px;
}

.app-modal-title {
    font-family: 'Instrument Serif', Georgia, serif;
    font-size: 26px;
    line-height: 1.1;
    color: var(--ink);
    margin: 0;
}

.app-modal-close {
    background: none;
    border: none;
    color: var(--ink-mute);
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
    transition: color 140ms ease;
}
.app-modal-close:hover { color: var(--ink); }

.app-modal-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 20px 24px;
}
/* Override legacy default.css display:none on these IDs */
#food-pairings-pane.app-modal-body,
#suggest-pane.app-modal-body,
#user-management-pane.app-modal-body {
    display: block;
}

.app-modal-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 24px;
    border-top: 1px solid var(--line);
    background: var(--bg);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-mute);
}

/* Form field pattern reused inside app-modal ----------------------------- */

.app-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
}

.app-field label,
.app-field .app-field-label {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-mute);
}

.app-modal input[type="text"],
.app-modal input[type="password"],
.app-modal input[type="email"],
.app-modal select,
.app-modal textarea {
    width: 100%;
    box-sizing: border-box;
    background: var(--bg);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    color: var(--ink);
    font-family: inherit;
    font-size: 14px;
    padding: 9px 11px;
    transition: border-color 140ms ease, background 140ms ease;
}
.app-modal input:focus,
.app-modal select:focus,
.app-modal textarea:focus {
    outline: none;
    border-color: var(--cool);
    background: var(--bg-elev-2);
}
.app-modal input[readonly] {
    color: var(--ink-dim);
    background: var(--bg-elev-2);
}

/* Buttons inside app-modal ---------------------------------------------- */

.app-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: var(--bg-elev-2);
    border: 1px solid var(--line-strong);
    color: var(--ink);
    border-radius: var(--radius);
    padding: 9px 16px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    cursor: pointer;
    text-decoration: none;
    transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}
.app-btn:hover {
    background: var(--bg);
    border-color: var(--ink-mute);
    color: var(--ink);
    text-decoration: none;
}

.app-btn.primary {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
.app-btn.primary:hover {
    background: #c95639;
    border-color: #c95639;
    color: #fff;
}

.app-btn.cool {
    background: transparent;
    border-color: var(--cool-soft);
    color: var(--cool);
}
.app-btn.cool:hover {
    background: var(--cool-soft);
    border-color: var(--cool);
    color: var(--cool);
}

.app-btn.ghost {
    background: transparent;
    border-color: var(--line);
    color: var(--ink-dim);
}
.app-btn.ghost:hover {
    background: var(--bg);
    color: var(--ink);
}

.app-btn.danger {
    background: transparent;
    border-color: var(--bad);
    color: #eabcb6;
}
.app-btn.danger:hover {
    background: rgba(160, 67, 58, 0.18);
}

.app-btn.small {
    padding: 6px 10px;
    font-size: 10px;
    letter-spacing: 0.14em;
}

.app-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.app-btn-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.app-btn-row.end { justify-content: flex-end; }
.app-btn-row.stretch > .app-btn { flex: 1; }

/* Banners / status inside app-modal ------------------------------------- */

.app-banner {
    padding: 10px 12px;
    border-radius: var(--radius);
    border: 1px solid var(--line-strong);
    background: var(--bg-elev-2);
    color: var(--ink-dim);
    font-size: 13px;
    line-height: 1.5;
    margin: 0 0 10px;
}
.app-banner.loading {
    color: var(--cool);
    border-color: var(--cool-soft);
    background: rgba(74, 158, 155, 0.08);
}
.app-banner.error {
    color: #eabcb6;
    border-color: var(--bad);
    background: rgba(160, 67, 58, 0.12);
}
.app-banner.info {
    color: var(--ink-dim);
}

/* Rich result area (suggestion / pairing prose) ------------------------- */

.app-prose {
    color: var(--ink-dim);
    font-size: 13.5px;
    line-height: 1.65;
}
.app-prose h1,
.app-prose h2,
.app-prose h3 {
    font-family: 'Instrument Serif', Georgia, serif;
    color: var(--ink);
    font-weight: 400;
    margin: 14px 0 6px;
    border: none;
}
.app-prose h1 { font-size: 22px; }
.app-prose h2 { font-size: 18px; color: var(--gold); }
.app-prose h3 { font-size: 15px; color: var(--ink); }
.app-prose strong { color: var(--ink); font-weight: 500; }
.app-prose p { margin: 0 0 10px; }
.app-prose br + br { display: none; }

/* Recommendation cards in wine-suggestion modal ------------------------- */

.recommendation-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 14px;
}
.app-modal .recommendation-set {
    border: 1px solid var(--line);
    background: var(--bg-elev-2);
    border-radius: var(--radius);
    padding: 12px;
    margin: 0;
    position: relative;
}
.app-modal .recommendation-set::before {
    content: "";
    position: absolute;
    top: 12px; bottom: 12px; left: 0;
    width: 3px;
    background: var(--accent);
    border-radius: 0 2px 2px 0;
}
.app-modal .recommendation-set.white-wine::before      { background: var(--type-white); }
.app-modal .recommendation-set.red-wine::before        { background: var(--type-red); }
.app-modal .recommendation-set.rose-wine::before       { background: var(--type-rose); }
.app-modal .recommendation-set[class*="sparkling"]::before { background: var(--type-white-sparkling); }
.app-modal .recommendation-set[class*="fortified"]::before { background: var(--type-red-fortified); }
.app-modal .recommendation-set[class*="sweet"]::before     { background: var(--type-white-sweet); }
.app-modal .apply-recommendation {
    width: 100%;
    background: transparent;
    border: 1px solid var(--cool-soft);
    color: var(--cool);
    border-radius: var(--radius);
    padding: 8px 12px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor: pointer;
    margin: 0 0 8px;
    transition: background 140ms ease, color 140ms ease;
}
.app-modal .apply-recommendation:hover {
    background: var(--cool-soft);
    color: var(--cool);
}
.app-modal .recommendation-details {
    color: var(--ink-dim);
    font-size: 12.5px;
    line-height: 1.6;
}
.app-modal .recommendation-details strong {
    color: var(--ink);
    font-weight: 500;
}

/* User admin table ------------------------------------------------------- */

.user-admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.user-admin-table th {
    text-align: left;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-mute);
    padding: 8px 10px;
    border-bottom: 1px solid var(--line);
    background: var(--bg);
    font-weight: 500;
}
.user-admin-table td {
    padding: 10px;
    border-bottom: 1px solid var(--line);
    color: var(--ink-dim);
    vertical-align: middle;
}
.user-admin-table tr:hover td {
    background: var(--bg);
    color: var(--ink);
}
.user-admin-table .role-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 9px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.user-admin-table .role-badge.admin {
    color: var(--accent);
    background: rgba(181, 68, 42, 0.14);
    border: 1px solid var(--accent-soft);
}
.user-admin-table .role-badge.user {
    color: var(--ink-dim);
    background: var(--bg-elev-2);
    border: 1px solid var(--line-strong);
}
.user-admin-table .row-actions {
    display: inline-flex;
    gap: 6px;
}

.app-modal .admin-section {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
}

.app-modal-section-title {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-mute);
    margin: 0 0 12px;
}

/* Sub-dialog layering (add/edit user) ----------------------------------- */

.app-modal-subdialog {
    position: absolute;
    inset: 0;
    background: rgba(8, 6, 5, 0.82);
    backdrop-filter: blur(2px);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 10;
}
.app-modal-subdialog.open { display: flex; }
.app-modal-subdialog-card {
    width: 100%;
    max-width: 420px;
    background: var(--bg-elev-1);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-lg);
    padding: 20px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6);
}
.app-modal { position: relative; }

/* Entry-point affordances ----------------------------------------------- */

.basket-foot {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--line);
}

.hdr-icon-btn {
    margin-left: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    color: var(--ink-mute);
    background: transparent;
    border: 1px solid var(--line);
    cursor: pointer;
    text-decoration: none;
    transition: color 140ms ease, border-color 140ms ease, background 140ms ease;
}
.hdr-icon-btn:hover {
    color: var(--cool);
    border-color: var(--cool-soft);
    background: var(--bg-elev-1);
    text-decoration: none;
}

.hdr-led-state {
    width: auto;
    min-width: 54px;
    padding: 0 10px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.08em;
    color: var(--cool);
}
.hdr-led-state.off {
    color: var(--ink-mute);
}