@font-face {
    font-family: 'Comfortaa';
    src: local('Comfortaa'), url("/static/planner/Comfortaa-Regular.ttf") format("truetype");
}

.navbar-brand {
    font-family: "Comfortaa"
}

.navbar-nav {
    font-family: "Comfortaa"
}

a {
    text-decoration: none;
}

/* Prevent long URLs in source field breaking layout */
#mealModal td {
    word-break: break-word;
}

/* Selectize dark mode */
html[data-bs-theme="dark"] div.selectize-input {
    background-color: field;
    border-color: rgb(133, 133, 133);
}

html[data-bs-theme="dark"] div.selectize-input input {
    color: fieldtext;
}


html[data-bs-theme="dark"] div.selectize-input div.item {
    background: #212529 !important;
    color: fieldtext !important;
}

html[data-bs-theme="dark"] div.selectize-dropdown {
    border-color: #212529;
}

html[data-bs-theme="dark"] div.selectize-dropdown-content {
    background-color: #212529;
}

html[data-bs-theme="dark"] div.selectize-dropdown-content div {
    color: fieldtext !important;
}

html[data-bs-theme="dark"] div.selectize-dropdown-content div.active {
    background-color: #2b3035;
}

/* Better table background color for rows that are active or hovered on in
Bootstrap dark theme, from .dark-table */

html[data-bs-theme="dark"] .table {
    --bs-table-active-bg: #373b3e;
    --bs-table-hover-bg: #323539;
}

/* ── Star rating widget ──────────────────────────────────────────── */

/*
 * Stars are rendered in DOM order 0 (clear), 1, 2, 3, 4, 5.
 * Highlighting uses CSS :has() so that checking/hovering star N also
 * lights up all stars before it (lower values). :has() is supported in
 * all modern browsers including Firefox 121+.
 */
.star-rating {
    display: inline-flex;
    flex-direction: row;
    gap: 0.15rem;
    align-items: center;
}

.star-rating__label {
    font-size: 1.4rem;
    color: #6c757d;
    cursor: pointer;
    transition: color 0.1s;
    line-height: 1;
}

/*
 * DOM structure inside .star-rating (inputs are visually-hidden):
 *   input#_0  label.clear    ← nth-child 1, 2
 *   input#_1  label          ← nth-child 3, 4
 *   input#_2  label          ← nth-child 5, 6
 *   input#_3  label          ← nth-child 7, 8
 *   input#_4  label          ← nth-child 9, 10
 *   input#_5  label          ← nth-child 11, 12
 *
 * :has() lets us highlight stars 1..N when star N is checked/hovered.
 */

/* ── Checked state ── */
.star-rating:has(input:nth-child(3):checked) label:nth-child(4),
.star-rating:has(input:nth-child(5):checked) label:nth-child(4),
.star-rating:has(input:nth-child(5):checked) label:nth-child(6),
.star-rating:has(input:nth-child(7):checked) label:nth-child(4),
.star-rating:has(input:nth-child(7):checked) label:nth-child(6),
.star-rating:has(input:nth-child(7):checked) label:nth-child(8),
.star-rating:has(input:nth-child(9):checked) label:nth-child(4),
.star-rating:has(input:nth-child(9):checked) label:nth-child(6),
.star-rating:has(input:nth-child(9):checked) label:nth-child(8),
.star-rating:has(input:nth-child(9):checked) label:nth-child(10),
.star-rating:has(input:nth-child(11):checked) label:nth-child(4),
.star-rating:has(input:nth-child(11):checked) label:nth-child(6),
.star-rating:has(input:nth-child(11):checked) label:nth-child(8),
.star-rating:has(input:nth-child(11):checked) label:nth-child(10),
.star-rating:has(input:nth-child(11):checked) label:nth-child(12) {
    color: #ffc107;
}

/* ── Hover preview ── */
.star-rating label:nth-child(4):hover,
.star-rating:has(label:nth-child(6):hover) label:nth-child(4),
.star-rating label:nth-child(6):hover,
.star-rating:has(label:nth-child(8):hover) label:nth-child(4),
.star-rating:has(label:nth-child(8):hover) label:nth-child(6),
.star-rating label:nth-child(8):hover,
.star-rating:has(label:nth-child(10):hover) label:nth-child(4),
.star-rating:has(label:nth-child(10):hover) label:nth-child(6),
.star-rating:has(label:nth-child(10):hover) label:nth-child(8),
.star-rating label:nth-child(10):hover,
.star-rating:has(label:nth-child(12):hover) label:nth-child(4),
.star-rating:has(label:nth-child(12):hover) label:nth-child(6),
.star-rating:has(label:nth-child(12):hover) label:nth-child(8),
.star-rating:has(label:nth-child(12):hover) label:nth-child(10),
.star-rating label:nth-child(12):hover {
    color: #ffc107;
}

/* Clear / reset button */
.star-rating__clear {
    font-size: 1rem;
    margin-right: 0.3rem;
    color: #6c757d;
}

/* Display-only stars (read view & recipes table) */
.star-display {
    white-space: nowrap;
}

.star-display .bi-star-fill {
    color: #ffc107;
}

.star-display .bi-star {
    color: #6c757d;
}