/* utilities.css
 * ============================================
 * Semantic wrapper classes that replace common Bootstrap utility combos.
 * These classes self-document intent and reduce template verbosity.
 *
 * MAPPING:
 * | Bootstrap Combo                                  | Semantic Class   |
 * |--------------------------------------------------|------------------|
 * | d-flex align-items-center justify-content-between| .flex-spread     |
 * | d-flex align-items-center                        | .flex-center     |
 * | d-flex flex-column                               | .flex-column     |
 * | d-flex d-md-none align-items-center              | .mobile-nav      |
 * | d-inline-block d-md-none                         | .mobile-only     |
 * | d-none d-md-inline-block                         | .desktop-only    |
 * | bi fs-5                                          | .nav-icon        |
 * | flex-shrink-0                                    | .flex-shrink-0   |
 * | min-width: 0                                     | .min-width-0     |
 *
 * Last updated: 2025-12-25
 * See: docs/delivery/74-bootstrap-vanilla-css/74-4.md
 */

/* === FLEXBOX UTILITIES === */

/* Flex with space-between - replaces 3 utility classes */
.flex-spread {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Flex with center alignment - replaces 2 utility classes */
.flex-center {
    display: flex;
    align-items: center;
}

/* Flex column layout */
.flex-column {
    display: flex;
    flex-direction: column;
}

/* Prevent flex item from shrinking */
.flex-shrink-0 {
    flex-shrink: 0;
}

/* Allow shrinking below content width */
.min-width-0 {
    min-width: 0;
}

/* === RESPONSIVE VISIBILITY === */

/* Visible on mobile only - replaces d-inline-block d-md-none */
.mobile-only {
    display: inline-block;

    @media (min-width: 768px) {
        display: none;
    }
}

/* Visible on desktop only - replaces d-none d-md-inline-block */
.desktop-only {
    display: none;

    @media (min-width: 768px) {
        display: inline-block;
    }
}

/* Block version for desktop */
.desktop-only-block {
    display: none;

    @media (min-width: 768px) {
        display: block;
    }
}

/* Flex on desktop only */
.desktop-only-flex {
    display: none;

    @media (min-width: 768px) {
        display: flex;
    }
}

/* === NAVIGATION UTILITIES === */

/* Mobile navigation icons container - replaces 4+ utility classes */
.mobile-nav {
    display: flex;
    align-items: center;
    gap: 0.5rem;

    @media (min-width: 768px) {
        display: none;
    }
}

/* Icon sizing for nav items - replaces bi fs-5 */
.nav-icon {
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
}

/* === ICON UTILITIES === */

/* Base Bootstrap icon sizing */
.bi {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: -0.125em;
    width: 1em;
    height: 1em;
    fill: currentcolor;
}

.bi.fs-5 {
    width: 1.25rem;
    height: 1.25rem;
}

/* Collect icon: fixed dimensions prevent CLS on font load */
.collect-icon {
    width: var(--qs-collect-icon-size, 1.25rem);
    height: var(--qs-collect-icon-size, 1.25rem);
}

/* Icon alignment with text that may wrap */
.icon-align {
    flex-shrink: 0;
}

/* Spacer for nav items without icons (maintains alignment) */
.nav-icon-spacer {
    display: inline-block;
    width: 1em;
}

/* === HTMX UTILITIES === */

/* HTMX loading indicator base */
.htmx-indicator {
    display: none;
}

.htmx-request .htmx-indicator {
    display: block;
}

.htmx-request.htmx-indicator {
    display: block;
}

/* Submit button loading state: show spinner, hide normal text */
.submit-with-loading.htmx-request .submit-btn-text,
#submit-quote-btn.htmx-request .submit-btn-text,
#submit-originator-btn.htmx-request .submit-btn-text {
    display: none;
}

.submit-with-loading.htmx-request .htmx-indicator,
#submit-quote-btn.htmx-request .htmx-indicator,
#submit-originator-btn.htmx-request .htmx-indicator {
    display: inline-flex;
    align-items: center;
}

/* Loading state base */
.loading-base,
.search-loading {
    display: none;
    padding: 1rem;
    border-radius: var(--bs-border-radius);
}

.loading-centered,
.search-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.search-loading {
    background: rgba(255, 255, 255, 0.8);
}

.htmx-request .search-loading {
    display: block;
}

/* Loading indicator - hidden by default, shown during HTMX requests */
#loading-indicator {
    display: none;
}

.htmx-request #loading-indicator {
    display: block;
}

/* === TOOLTIP STYLING === */
.tooltip {
    --bs-tooltip-bg: var(--bs-secondary);
    --bs-tooltip-color: var(--bs-white);
    --bs-tooltip-opacity: 1;
    --bs-tooltip-arrow-height: 0.5rem;
}

/* === PAGINATION === */
.pagination {
    --bs-pagination-padding-x: 1rem;
    --bs-pagination-padding-y: 0.5rem;
    --bs-pagination-color: var(--bs-primary);
    --bs-pagination-bg: var(--bs-white);
    --bs-pagination-border-color: var(--bs-border-color);
    --bs-pagination-hover-color: var(--bs-primary);
    --bs-pagination-hover-bg: rgba(var(--bs-primary-rgb), 0.1);
    --bs-pagination-focus-color: var(--bs-primary);
    --bs-pagination-active-bg: var(--bs-primary);
    --bs-pagination-active-border-color: var(--bs-primary);
    --bs-pagination-disabled-color: var(--bs-gray-400);
    --bs-pagination-disabled-bg: var(--bs-white);
    --bs-pagination-disabled-border-color: var(--bs-border-color);
    font-size: 0.875rem;
}

.page-link {
    transition: all 0.2s ease-in-out;
    min-width: 2.5rem;
    text-align: center;
}

.page-item.active .page-link {
    font-weight: 500;
}

/* === FORM UTILITIES === */
.form-control,
.form-select {
    background-color: var(--bs-white);
    border-color: var(--bs-border-color);

    &:focus {
        background-color: var(--bs-white);
    }
}

.form-control-lg {
    &::placeholder {
        color: var(--bs-gray-400);
    }

    &:focus {
        border-color: var(--bs-primary);
        box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
    }
}

/* === SEARCH UTILITIES === */
.search-container,
.search-originators-container {
    position: relative;
}

.search-container .htmx-indicator,
.search-originators-container .htmx-indicator {
    right: 36px !important;
}

.search-container {
    width: 300px;
}

.search-originators-container {
    width: 100%;
}

@media (min-width: 768px) {
    .search-originators-container {
        width: 400px;
    }
}

@media (min-width: 992px) {
    .search-originators-container {
        width: 500px;
    }
}

.search-results-dropdown {
    position: absolute;
    width: 100%;
    top: calc(100% + 0.25rem);
    left: 0;
    background: white;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    overflow-y: auto;
    z-index: var(--z-index-dropdown);
    max-height: 400px;
}

.search-result-item {
    transition: background-color 0.2s ease;

    &:hover,
    &:focus {
        background-color: var(--bs-light);
    }
}

#originator-search-results,
#tag-search-results {
    z-index: var(--z-index-dropdown);
}

/* === SEARCH FORM CARD === */
.search-form-card {
    background-color: var(--bs-white);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);

    & .form-control-lg {
        border: 1px solid var(--bs-border-color);

        &:focus {
            border-color: var(--bs-primary);
            box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
        }
    }
}

/* === PROGRESS INDICATOR === */
.similar-quotes-progress {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    display: none;
    z-index: var(--z-index-progress);
}

/* === ALPHABET BUTTON === */
.alphabet-btn {
    font-size: 0.85rem;
    padding: 0.15rem 0.4rem;
    min-width: 1.75rem;
    text-align: center;
    line-height: 1.2;
    height: auto;
}

.d-flex.flex-wrap.gap-2 {
    gap: 0.25rem !important;
}

/* === QUICKSTART === */
.quickstart-rate-limits {
    max-width: 300px;
}