/* Project styles, loaded after the vendored Tabler CSS. The UI font is Tabler 1.6.1's own
   system-font stack (--tblr-font-sans-serif): nothing vendored, no @font-face, no override.
   Tabler ≤ 1.4 led with Inter; the project vendored it for a day and dropped it with 1.6.1. */

/* A webfont icon in an avatar (<i class="ti … icon">): Tabler's `.avatar .icon` sizes the box to
   --tblr-avatar-icon-size for SVG icons but leaves the glyph at `.icon`'s 1.25rem, so the glyph
   sits in the box's top-left corner. Sizing the glyph to its box centres it, at every avatar size. */
.avatar > .ti.icon {
    font-size: var(--tblr-avatar-icon-size);
}

/* A Menu item's row hidden while its form is open in place (spec 0025, week_plan_items.js sets
   `hidden`): the row is `.d-flex`, whose `display: flex !important` comes after Bootstrap's
   `[hidden] { display: none !important }` with the same specificity, and would keep it shown. */
.week-plan-item[hidden] {
    display: none !important;
}

/* A link of a day card while its request is in flight (spec 0025, week_plan_items.js sets
   `aria-disabled="true"`): a link has no disabled state of its own, so it is dimmed like Tabler's
   disabled button (its --tblr-btn-disabled-opacity, 0.4 in 1.6.1). Pointer events stay on: the
   module still has to catch and prevent the click. */
[data-week-plan-items] .btn[aria-disabled="true"] {
    opacity: var(--tblr-btn-disabled-opacity, .4);
    cursor: default;
}

/* Type to search in a select (spec 0026, select_search.js): the combobox field's list of matches
   sits right under the field, as wide as it, and scrolls past 16rem; no Popper, so it moves with
   the page. Everything else is Tabler's own .dropdown-menu / .dropdown-item / .dropdown-header.
   An option is an <li>, not a link, so it gets the pointer a link would. */
.select-search {
    position: relative;
}

.select-search-list {
    position: absolute;
    inset-inline: 0;
    max-height: 16rem;
    overflow-y: auto;
    margin-top: .25rem;
}

.select-search-list [role="option"]:not(.disabled) {
    cursor: pointer;
}

/* A long name wraps inside a narrow card (a day card's form) instead of overflowing it. */
.select-search-list .dropdown-item {
    white-space: normal;
}

/* A form drawn straight inside a card (the Account page: header, form, body) keeps its form-level
   alert (spec 0029) inside the card's padding instead of running edge to edge. */
.card > form > .alert:first-child {
    margin: var(--tblr-card-spacer-y) var(--tblr-card-spacer-x) 0;
}

/* "Mostrar solo lo que falta" (spec 0031, shopping_list_filter.js sets `data-only-missing` on the
   list's root): every line not to buy is hidden, then every aisle card left with no line to buy;
   the "Sin ingredientes" card is not an aisle and stays. The "nothing left" message is hidden
   unless the switch is on and no line is to buy. One rule per selector: a browser without :has()
   drops the whole rule it appears in, and should still hide the lines. */
[data-only-missing] [data-line-state]:not([data-line-state="to-buy"]) {
    display: none;
}

[data-only-missing] .shopping-list-group:not(:has([data-line-state="to-buy"])) {
    display: none;
}

/* Tabler takes the bottom border off a flush list's last item only; when that item is hidden, the
   last line still shown loses it too, so no hairline sits above the card's edge. */
[data-only-missing] .list-group-flush > [data-line-state="to-buy"]:not(:has(~ [data-line-state="to-buy"])) {
    border-bottom-width: 0;
}

[data-shopping-list-nothing-left] {
    display: none;
}

[data-only-missing]:not(:has([data-line-state="to-buy"])) [data-shopping-list-nothing-left] {
    display: block;
}