/*
 * Inline UI: icon + text stay on one line across the whole app.
 * Instead of wrapping onto a second line, small screens scale the type (and Font Awesome icons,
 * which are sized in em) down with clamp(). Body paragraphs and descriptions still wrap normally.
 * Loaded after the other stylesheets; a container can opt out with Bootstrap's .text-wrap.
 */

:root {
    /* each value is at its minimum around 360px wide and back to the normal desktop size at 1200px */
    --ui-fs-xxs: clamp(9px, 7.4px + 0.3vw, 11px);
    --ui-fs-sm: clamp(11px, 9.4px + 0.38vw, 14px);
    --ui-fs-btn: clamp(12px, 10.6px + 0.45vw, 16px);
}

/* 1. Elements that pair an icon with a short label never wrap */
.btn,
.badge,
.studio-badge,
.nav-link,
.dropdown-item,
.page-link,
.breadcrumb-item,
.form-label,
.form-check-label,
.input-group-text,
.card-title-main,
.card-title-sub,
.slay-toast-title,
th,
:is(a, button, span, label, small, strong, b, li, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6):has(> i[class*="fa-"], > svg) {
    white-space: nowrap;
}

/* white-space is inherited: paragraphs and blocks inside those elements still wrap normally */
:is(.btn, .badge, .nav-link, .dropdown-item, th, a, button, span, label, small, strong, b, li)
    :is(p, div, ul, ol, table, .text-wrap) {
    white-space: normal;
}

/* Keep the icon at its own size and vertically centred next to the text */
:is(.btn, .badge, .studio-badge, .nav-link, .dropdown-item, th, a, button, span, label, h1, h2, h3, h4, h5, h6) > i[class*="fa-"] {
    flex-shrink: 0;
    vertical-align: -0.075em;
}

/* 2. Scale UI type with the screen instead of wrapping it */
.xx-small { font-size: var(--ui-fs-xxs) !important; }

.btn:not(.btn-lg):not(.btn-sm):not([class*="small"]) { font-size: var(--ui-fs-btn); }
.btn-sm:not([class*="small"]) { font-size: var(--ui-fs-sm); }
.badge:not([class*="small"]) { font-size: clamp(0.65em, 0.6em + 0.15vw, 0.75em); }

.card-title-main { font-size: clamp(13px, 10px + 0.5vw, 16px); }
.card-title-sub { font-size: clamp(11px, 8.6px + 0.4vw, 13.6px); }

/* Headings shrink on small screens and are back to their normal size from 1200px */
h1, .h1 { font-size: clamp(24px, 16px + 2vw, 40px); }
h2, .h2 { font-size: clamp(21px, 14px + 1.5vw, 32px); }
h3, .h3 { font-size: clamp(19px, 13px + 1.25vw, 28px); }
h4, .h4 { font-size: clamp(17px, 11px + 1.1vw, 24px); }
h5, .h5 { font-size: clamp(15px, 10px + 0.85vw, 20px); }
h6, .h6 { font-size: clamp(13px, 9px + 0.6vw, 16px); }

/* 3. Safety net: a one-line heading or label that still can't fit is cut with "…" instead of overflowing the screen */
:is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6):has(> i[class*="fa-"]),
.card-title-main {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.form-label:not([class*="d-"]) {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
}

/* 4. Rows of buttons: when they don't fit, whole buttons move to the next row (their text never wraps) */
.d-flex:not(.flex-nowrap):is(:has(> .btn), :has(> form > .btn), :has(> div > .btn)),
.d-flex.justify-content-between:not(.flex-nowrap):has(> .d-flex .btn) {
    flex-wrap: wrap;
    row-gap: 0.5rem;
}

/* Explicit opt-out still wins */
.text-wrap,
.text-wrap * { white-space: normal !important; }