/*
 * The few rules stock Bootstrap has no utility for. Everything else on the
 * site is plain Bootstrap 5.3 — custom CSS is the last resort.
 * See data/docs/features/ui.md
 */

/* Google Sans (self-hosted, vendor/google-sans) for Hebrew and English; Bootstrap's body font reads this. */
:root {
    --bs-font-sans-serif: "Google Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Chat material keeps its line breaks and wraps long words inside its bubble. */
[dir="rtl"][lang="he"] {
    overflow-wrap: anywhere;
}

/*
 * Placeholders are hints, not content: smaller than the large fields' text, so a box's prompt
 * never reads like an answer already written. Bootstrap has no placeholder-size variable; their
 * muted colour comes from the theme ($input-placeholder-color in the 1ai1 theme SCSS).
 */
.form-control::placeholder {
    font-size: .8em;
}

/* The progress bars on the admin packets screen are sized by app.js (no inline styles under the CSP). */
.progress {
    height: 6px;
}

/* A man's gender tag (ui_gender_tag()) is blue — the theme has no blue colour class; dark mode takes Bootstrap's lighter blue. */
.text-gender-man { color: var(--bs-blue); }
[data-bs-theme="dark"] .text-gender-man { color: #6ea8fe; }

/*
 * The theme switch (ui_theme_toggle): a pill of two equal segments with a
 * thumb that slides under the chosen one. Colours come from Bootstrap's
 * variables, so it fits light and dark pages and dark bars alike.
 */
.theme-toggle {
    --tt-size: 2.25rem;
    --tt-pad: 3px;
    position: relative;
    display: inline-grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    padding: var(--tt-pad);
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: 50rem;
    background: var(--bs-tertiary-bg);
    vertical-align: middle;
}
.theme-toggle-sm {
    --tt-size: 1.875rem;
    font-size: .875rem;
}
.theme-toggle-thumb {
    position: absolute;
    top: var(--tt-pad);
    bottom: var(--tt-pad);
    inset-inline-start: var(--tt-pad);
    width: calc((100% - 2 * var(--tt-pad)) / 2);
    border-radius: 50rem;
    background: var(--bs-body-bg);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .12), 0 1px 6px rgba(0, 0, 0, .08);
    transition: transform .25s cubic-bezier(.3, .7, .3, 1);
}
[data-bs-theme="dark"] .theme-toggle-thumb {
    background: var(--bs-secondary-bg);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}
.theme-toggle[data-active="dark"] .theme-toggle-thumb { transform: translateX(100%); }
[dir="rtl"] .theme-toggle[data-active="dark"] .theme-toggle-thumb { transform: translateX(-100%); }
.theme-toggle-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .375rem;
    min-width: var(--tt-size);
    height: var(--tt-size);
    padding: 0 .5rem;
    border: 0;
    border-radius: 50rem;
    background: none;
    color: var(--bs-secondary-color);
    line-height: 1;
    transition: color .2s;
}
.theme-toggle-btn:hover { color: var(--bs-body-color); }
.theme-toggle-btn[aria-pressed="true"] { color: var(--bs-emphasis-color); }
.theme-toggle-btn[aria-pressed="true"] .bi-sun-fill { color: #f59f00; }
.theme-toggle-btn[aria-pressed="true"] .bi-moon-stars-fill { color: #9775fa; }
.theme-toggle-btn:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .4);
}
.theme-toggle-labels .theme-toggle-btn { padding: 0 .875rem; }
.theme-toggle-text { font-weight: 500; }
@media (prefers-reduced-motion: reduce) {
    .theme-toggle-thumb, .theme-toggle-btn { transition: none; }
}
/* No colour transitions anywhere while the theme flips (theme.js sets this for a moment). */
.theme-switching *:not(.theme-toggle-thumb), .theme-switching *::before, .theme-switching *::after { transition: none !important; }

/* The typeahead's option list (js/typeahead.js): capped and scrolled under its input — a long list
   (every Israeli city) would otherwise run past the fold, and Bootstrap has no max-height utility.
   min-width: the input's own width, not Bootstrap's 10rem. */
.ta-menu {
    max-height: 280px;
    overflow-y: auto;
    min-width: 100%;
}