/* ============================================================================
   Cantina — "il registro della cantina"

   The identity comes from the room, not from the wine label. A cellar is cool,
   dim and plastered; the only saturated colour in it is what is in the bottles.
   So: the whole interface is achromatic, and the FOUR WineColor values are the
   only chroma on the page. That is not decoration — colour here is a data
   column, and it is what makes a shelf readable at a glance.

   Deliberately NOT the warm-cream + high-contrast-serif + terracotta look that
   every wine product reaches for. Same instinct for paper, cooled and
   desaturated, because a cellar is damp rather than sunny.

   Two faces, split by what the words ARE: prose in a humanist sans, and every
   MEASURED VALUE — shelf position, millilitres, % vol., counts, dates, ids — in
   mono. This is a ledger of physical objects; mono is how a ledger says "this is
   a value", and it lines the digits up for free.

   System stacks on purpose: this box serves a household on 2 GB and the repo
   deliberately self-hosts its assets (no CDN). A webfont here would be two more
   files to ship and cache for personality that scale, weight and case already
   carry.
   ============================================================================ */

:root {
    /* --- the room ------------------------------------------------------- */
    --paper: #e9ebe5;          /* cellar plaster, cool and slightly green    */
    --surface: #f4f5f1;        /* the ledger page laid on it                 */
    --ink: #1e241f;
    --ink-2: #5c645b;          /* secondary prose                            */
    --ink-3: #656c64;          /* captions, units, disabled — 4.94:1 on surface */
    --rule: #ccd1c7;           /* hairlines, shelf planks                    */
    --rule-soft: #dfe2da;
    --alert: #b3261e;          /* a SIGNAL, deliberately not in the wine set  */

    /* --- the wine: the only chroma, one per WineColor -------------------- */
    --wine-red: #8e2436;
    --wine-white: #bb9c33;
    --wine-rose: #cc7182;
    --wine-orange: #c2762f;

    /* --- type ------------------------------------------------------------ */
    --font-prose: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system,
        "Helvetica Neue", Arial, sans-serif;
    --font-data: ui-monospace, "Cascadia Mono", "SF Mono", "Menlo", "Consolas",
        "Liberation Mono", monospace;

    --radius: 3px;             /* almost square: shelf tags, not app chrome  */

    color-scheme: light dark;
}

/* The cellar with the light on. Bootstrap 5.3 flips on data-bs-theme; the media
   query covers the far more likely case of nobody ever setting it. */
@media (prefers-color-scheme: dark) {
    :root:not([data-bs-theme="light"]) {
        --paper: #141815;
        --surface: #1b201c;
        --ink: #e4e7e1;
        --ink-2: #a2a99f;
        --ink-3: #8b9289;
        --rule: #2f362f;
        --rule-soft: #232a24;
        --alert: #f2857c;
        --wine-red: #c04256;
        --wine-white: #d9bb4e;
        --wine-rose: #e08e9c;
        --wine-orange: #dd9147;
    }
}

:root[data-bs-theme="dark"] {
    --paper: #141815;
    --surface: #1b201c;
    --ink: #e4e7e1;
    --ink-2: #a2a99f;
    --ink-3: #8b9289;
    --rule: #2f362f;
    --rule-soft: #232a24;
    --alert: #f2857c;
    --wine-red: #c04256;
    --wine-white: #d9bb4e;
    --wine-rose: #e08e9c;
    --wine-orange: #dd9147;
}

/* --- Bootstrap, told what the room looks like ---------------------------- */
/* Re-pointing Bootstrap's own variables rather than fighting its components:
   every card, table, badge and form control inherits the palette for free. */
body {
    --bs-body-bg: var(--paper);
    --bs-body-color: var(--ink);
    --bs-secondary-color: var(--ink-2);
    --bs-tertiary-color: var(--ink-3);
    --bs-border-color: var(--rule);
    --bs-border-radius: var(--radius);
    --bs-border-radius-sm: var(--radius);
    --bs-body-font-family: var(--font-prose);
    --bs-body-font-size: 0.95rem;
    --bs-emphasis-color: var(--ink);
    --bs-secondary-bg: var(--rule-soft);
    --bs-tertiary-bg: var(--surface);

    /* Interactive things are INK, not a brand hue. The four wine colours are
       the page's whole colour budget and buttons must not compete with them. */
    --bs-primary: var(--ink);
    --bs-primary-rgb: 30, 36, 31;
    --bs-link-color: var(--ink);
    --bs-link-hover-color: var(--ink-2);

    background: var(--paper);
    color: var(--ink);
}

/* --- Type ---------------------------------------------------------------- */
/* Every measured value is mono: it lines up, and it reads as data rather than
   prose without needing a label to say so. */
.data,
.table td.text-end,
.table th.text-end,
input[type="number"],
input[type="date"] {
    font-family: var(--font-data);
    font-variant-numeric: tabular-nums;
    font-size: 0.9em;
    letter-spacing: -0.01em;
}

/* --- The shelf tag: this app's heading ----------------------------------- */
/* A cellar labels things with a tag tied to the shelf, so that is what a
   heading is here: small, mono, boxed, out of the way. The content is the
   subject of the page; the title is just what is written on the tag. It also
   gives a phone back the ~64px that an icon + h1 was spending on chrome. */
.tag {
    display: inline-block;
    font-family: var(--font-data);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--ink-2);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    padding: 0.2rem 0.55rem;
    margin: 0;
    background: transparent;
}

.tag--section {
    border: 0;
    border-left: 2px solid var(--ink-3);
    border-radius: 0;
    padding-left: 0.5rem;
    margin-bottom: 0.6rem;
}

/* --- Navigation: a cellar door, not an app bar --------------------------- */
.navbar {
    background: var(--surface) !important;
    border-bottom: 1px solid var(--rule);
}

.navbar .navbar-brand,
.navbar .nav-link,
.navbar .navbar-text {
    color: var(--ink-2);
}

.navbar .navbar-brand {
    color: var(--ink);
    font-family: var(--font-data);
    font-size: 0.95rem;
    letter-spacing: 0.06em;
}

.navbar .nav-link {
    font-size: 0.85rem;
    border-bottom: 2px solid transparent;
    border-radius: 0;
}

.navbar .nav-link:hover {
    color: var(--ink);
}

.navbar .nav-link.active {
    color: var(--ink);
    border-bottom-color: var(--ink);
}

/* --- Surfaces ------------------------------------------------------------ */
/* Flat. A cellar has no drop shadows, and a card that floats over the page is
   a device for separating things that here simply sit next to each other. */
.card {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    box-shadow: none;
}

.alert {
    border-radius: var(--radius);
    border-width: 1px;
    border-left-width: 3px;
}

/* --- Tables: the ledger -------------------------------------------------- */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--ink);
    --bs-table-border-color: var(--rule-soft);
}

.table > thead > tr > th {
    font-family: var(--font-data);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--ink-3);
    border-bottom: 1px solid var(--rule);
    padding-bottom: 0.4rem;
}

.table > tbody > tr > td {
    border-bottom-color: var(--rule-soft);
}

/* --- The wine's own colour, used as a datum ------------------------------ */
.wine {
    display: inline-block;
    width: 0.62em;
    height: 0.62em;
    border-radius: 50%;
    margin-right: 0.45em;
    vertical-align: baseline;
    background: var(--ink-3);
}

/* One set of colour modifiers for BOTH marks — the dot in a table cell and the stroke in the rack are
   the same datum drawn at two sizes, so they must not be able to drift apart. */
.wine.is-red, .bottle.is-red { background: var(--wine-red); }
.wine.is-white, .bottle.is-white { background: var(--wine-white); }
.wine.is-rose, .bottle.is-rose { background: var(--wine-rose); }
.wine.is-orange, .bottle.is-orange { background: var(--wine-orange); }

/* Sparkling is not a colour, so it is not painted as one: it is a mark. */
.sparkling {
    font-family: var(--font-data);
    font-size: 0.7rem;
    color: var(--ink-3);
    margin-left: 0.3em;
}

/* ============================================================================
   THE RACK — the signature
   One stroke per PHYSICAL bottle, lying down, resting on its shelf, coloured by
   what is in it. It is the data model drawn literally: this app's unit is one
   bottle in one position, never a quantity, so the picture of the cellar is a
   count of strokes and not a bar chart of totals.
   ============================================================================ */
.rack {
    margin: 0 0 1.75rem;
}

.rack__shelf {
    display: grid;
    grid-template-columns: 7.5rem 1fr;
    gap: 0 0.9rem;
    align-items: start;
    padding-bottom: 0.5rem;
    margin-bottom: 0.55rem;
    border-bottom: 1px solid var(--rule);   /* the plank */
}

.rack__shelf:last-child {
    margin-bottom: 0;
}

.rack__where {
    font-family: var(--font-data);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    color: var(--ink-2);
    text-align: right;
    padding-top: 0.15rem;
    overflow-wrap: anywhere;
}

.rack__count {
    color: var(--ink-3);
}

.rack__bottles {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

/* A bottle: a horizontal stroke with a neck. Nothing here is a rectangle by
   accident — bottles in a rack lie on their side, and that is the only reason
   this reads as a cellar instead of as a progress bar. */
.bottle {
    position: relative;
    display: block;
    width: 30px;
    height: 9px;
    border-radius: 1px 4px 4px 1px;
    background: var(--ink-3);
    opacity: 0.9;
}

.bottle::after {
    content: "";
    position: absolute;
    right: -5px;
    top: 3px;
    width: 5px;
    height: 3px;
    border-radius: 0 1px 1px 0;
    background: inherit;
}

/* A magnum is physically bigger, so it is drawn bigger. */
.bottle--large { width: 44px; }
.bottle--small { width: 20px; }

.rack__empty {
    font-size: 0.85rem;
    color: var(--ink-3);
}

/* A phone gives the label column nothing to spare, so the shelf name goes above its bottles. */
@media (max-width: 30rem) {
    .rack__shelf {
        grid-template-columns: 1fr;
        gap: 0.25rem;
    }

    .rack__where {
        text-align: left;
    }
}

/* --- Controls ------------------------------------------------------------ */
.btn {
    border-radius: var(--radius);
    font-size: 0.85rem;
}

.btn-outline-secondary {
    --bs-btn-color: var(--ink-2);
    --bs-btn-border-color: var(--rule);
    --bs-btn-hover-bg: var(--rule-soft);
    --bs-btn-hover-color: var(--ink);
    --bs-btn-hover-border-color: var(--ink-3);
}

.form-control,
.form-select {
    border-radius: var(--radius);
    border-color: var(--rule);
    background: var(--surface);
    color: var(--ink);
}

.form-control::placeholder {
    color: var(--ink-3);
}

.form-label {
    font-family: var(--font-data);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-3);
}

.badge {
    font-family: var(--font-data);
    font-weight: 500;
    font-size: 0.68rem;
    letter-spacing: 0.05em;
    border-radius: var(--radius);
}

/* Status is a state of one physical object, not a category, so it is drawn in
   ink at three weights rather than in three colours — the colour budget belongs
   to the wine. */
.badge.bg-success,
.badge.bg-warning,
.badge.bg-secondary {
    background: transparent !important;
    color: var(--ink-2) !important;
    border: 1px solid var(--rule);
}

.badge.bg-success { color: var(--ink) !important; border-color: var(--ink-3); }

/* --- Disclosure: manual entry is the exception, not the entrance ---------- */
/* The add form is 13 fields and used to be the first thing on the page, while
   its own comment says the main path is Dobby by voice. Folding it puts the
   cellar first and leaves the form one click away. */
.reveal > summary {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--font-data);
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-2);
    list-style: none;
    padding: 0.3rem 0;
}

.reveal > summary::-webkit-details-marker {
    display: none;
}

.reveal > summary::before {
    content: "+";
    font-size: 0.95rem;
    line-height: 1;
    color: var(--ink-3);
}

.reveal[open] > summary::before {
    content: "–";
}

.reveal > summary:hover {
    color: var(--ink);
}

/* --- Quality floor ------------------------------------------------------- */
:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* Blazor's disconnect banner, in the room's palette. */
#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--surface);
    color: var(--ink);
    border-top: 2px solid var(--alert);
    padding: .6rem 1rem;
    font-size: 0.9rem;
    z-index: 1050;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    float: right;
}

.validation-message {
    color: var(--alert);
    font-family: var(--font-prose);
}