/*
 * Vivanda application styles.
 *
 * Every colour here comes from the semantic aliases declared in palette.css,
 * which is a design deliverable dropped in verbatim. Nothing in this file
 * should introduce a literal hex: if a shade is missing, it belongs in the
 * palette, not here.
 *
 * Rules that constrain the code (docs/brand/README.md):
 *   - one accent per screen: terracotta marks the primary action, alone;
 *   - coloured body copy uses the `deep` step, base tones only clear 3:1;
 *   - wheat is a fill, never type;
 *   - tomato is alerts and destructive actions only, it never decorates.
 */

:root {
    /*
     * The palette declares no colour for the app bar. Chrome keeps the ink
     * base in both themes: it matches the brand mark, and in dark mode it
     * coincides with --vivanda-surface, so it still separates from the
     * darker page ground.
     */
    --vv-chrome: #24201D;
}

html {
    position: relative;
    min-height: 100%;
}

body {
    background-color: var(--vivanda-bg);
    color: var(--vivanda-text);
    padding-top: 70px;
}

/* --- Chrome ------------------------------------------------------------- */

.bg-vivanda {
    background-color: var(--vv-chrome) !important;
    /* In dark mode chrome and surface share a tone, so the bar needs an edge. */
    border-bottom: 1px solid var(--vivanda-divider);
}

.navbar-brand {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    letter-spacing: .01em;
}

/* Clear space around the mark equals one bar width on the 96 grid. */
.navbar-brand img {
    width: 1.75rem;
    height: 1.75rem;
    display: block;
}

/* --- Text and links ----------------------------------------------------- */

a {
    /* Deep step: this is body copy, not a large UI label. */
    color: var(--vivanda-terracotta-deep);
    text-underline-offset: .15em;
}

a:hover,
a:focus {
    color: var(--vivanda-terracotta);
}

.text-muted {
    color: var(--vivanda-text-muted) !important;
}

.not-set {
    color: var(--vivanda-text-muted);
    font-style: italic;
}

/* --- Surfaces ----------------------------------------------------------- */

.card {
    background-color: var(--vivanda-surface);
    border-color: var(--vivanda-divider);
    color: var(--vivanda-text);
}

footer {
    border-top: 1px solid var(--vivanda-divider);
}

.table {
    --bs-table-color: var(--vivanda-text);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--vivanda-divider);
}

/* --- Actions ------------------------------------------------------------ */

/* The one accent per screen. */
.btn-vivanda {
    background-color: var(--vivanda-primary);
    border-color: var(--vivanda-primary);
    color: #fff;
}

.btn-vivanda:hover,
.btn-vivanda:focus,
.btn-vivanda:active {
    background-color: var(--vivanda-primary-hover);
    border-color: var(--vivanda-primary-hover);
    color: #fff;
}

.btn-outline-secondary {
    color: var(--vivanda-text);
    border-color: var(--vivanda-divider);
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
    background-color: var(--vivanda-text);
    border-color: var(--vivanda-text);
    color: var(--vivanda-bg);
}

/* Destructive only — never used to draw attention to anything else. */
.btn-outline-danger {
    color: var(--vivanda-tomato-deep);
    border-color: var(--vivanda-danger);
}

.btn-outline-danger:hover,
.btn-outline-danger:focus {
    background-color: var(--vivanda-danger);
    border-color: var(--vivanda-danger);
    color: #fff;
}

/* --- Forms -------------------------------------------------------------- */

.form-control,
.form-select {
    background-color: var(--vivanda-surface);
    border-color: var(--vivanda-divider);
    color: var(--vivanda-text);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--vivanda-primary);
    box-shadow: 0 0 0 .2rem var(--vivanda-primary-tint);
}

.form-check-input:checked {
    background-color: var(--vivanda-primary);
    border-color: var(--vivanda-primary);
}

.invalid-feedback,
.is-invalid ~ .invalid-feedback {
    color: var(--vivanda-tomato-deep);
}

/* --- Badges ------------------------------------------------------------- */

/* Catalogue vs household: a quiet distinction, it is not the screen's accent. */
.badge-catalogo {
    background-color: var(--vivanda-ground-deep);
    color: var(--vivanda-ink);
    font-weight: 500;
}

.badge-nucleo {
    background-color: var(--vivanda-primary-tint);
    color: var(--vivanda-terracotta-deep);
    font-weight: 500;
}

/* Olive carries "confirmed / seasonal": here, when a dish is in season. */
.badge-stagione {
    background-color: var(--vivanda-olive-light);
    color: var(--vivanda-olive-deep);
    font-weight: 500;
}

/* Neutral tags read as data, not as decoration. */
.badge-tag {
    background-color: transparent;
    border: 1px solid var(--vivanda-divider);
    color: var(--vivanda-text-muted);
    font-weight: 400;
}

/* --- Dish form ---------------------------------------------------------- */

.recipe-row {
    border-bottom: 1px solid var(--vivanda-divider);
    padding: .5rem 0;
}

.recipe-row:last-child {
    border-bottom: 0;
}

/* --- Mobile ------------------------------------------------------------- */

/* On mobile the dish list must stay readable without horizontal scrolling */
@media (max-width: 575.98px) {
    body {
        padding-top: 62px;
    }

    .container {
        padding-left: .75rem;
        padding-right: .75rem;
    }
}

@media (prefers-color-scheme: dark) {
    /*
     * The tint steps are light-mode fills. Reused on a dark card they either
     * glare or, worse, pair a dark tint with dark type: --vivanda-primary-tint
     * against --vivanda-terracotta-deep lands at 1.5:1, invisible. Every badge
     * becomes an outline here, and the hue moves to the border and the type so
     * the three keep telling each other apart.
     */
    .badge-catalogo,
    .badge-stagione,
    .badge-nucleo {
        background-color: transparent;
        border: 1px solid var(--vivanda-divider);
        color: var(--vivanda-text-muted);
    }

    .badge-nucleo {
        border-color: var(--vivanda-primary);
        color: var(--vivanda-primary-hover);
    }

    .badge-stagione {
        border-color: var(--vivanda-success);
        color: var(--vivanda-success);
    }
}