/* =============================================================================
 * IN-12155 brief-2bC1 — the auto-fill "Suggested" treatment and its banner.
 * =============================================================================
 * These render inside the SHARED metadata modal
 * (controllers/teach/modals/resources-metadata/resources-metadata-modal
 * .template.html), which is not the RL2 page, so the rules cannot live under
 * .rl2-page. Same situation and same answer as brief C's picker stylesheet and
 * brief F's stand-down stylesheet: its own file, every selector rl2- prefixed.
 *
 * SCOPING RULE (brief B D8) HELD STRICTLY. There is NO bare element selector
 * and NO non-rl2- class in this file. Every rule needs one of exactly seven
 * classes — rl2-suggest-banner, rl2-suggested-badge, rl2-suggested-input,
 * rl2-standard-hints (brief 2b-C3), rl2-ai-thinking, rl2-standard-suggestions
 * and rl2-standard-suggestions-pending (brief K2b) — and each of those is
 * written only by an ng-if / ng-class that is false unless this open actually
 * pre-filled a field, ran the AI or received AI hints or standards. For a user
 * the suggestion path never runs for, this file matches nothing in the
 * application.
 *
 * WHY THE BADGE IS ON THE LABEL. Four of the five suggestable fields are
 * select2 widgets. select2 replaces the <select> with its own generated markup
 * on init and destroys it on teardown, so anything rendered inside the control
 * is not ours to keep. The <label> is untouched by select2 and is the only
 * element that behaves identically for the one plain <input> (title) and the
 * four widgets. rl2-suggested-input is the extra affordance for that one plain
 * input, where a left border is possible without fighting select2's styles.
 *
 * NO z-index, NO position, NO transform ANYWHERE IN THIS FILE — the modal is
 * already a stacking battleground (the template's own inline
 * `z-index: 9999998`, plus BetterModal's wrapper), and brief C fix1 is the
 * standing record of what happens when RL2 CSS introduces a stacking context
 * into someone else's layout. Everything here is in-flow. The one animation
 * (brief K2b's thinking dot) changes background-color only — never opacity
 * or transform, which would create a stacking context while it runs — and
 * sets no animation-fill-mode.
 *
 * Colours are the two already in use for RL2 accents; nothing new is
 * introduced and no existing variable is overridden.
 * ========================================================================== */

.rl2-suggest-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 9px 9px 9px;
    padding: 9px 12px;
    border: 1px solid #b8daf0;
    border-left: 3px solid #0074c5;
    border-radius: 3px;
    background-color: #eaf4fb;
    color: #1f4d6b;
    font-size: 13px;
    line-height: 1.4;
}

.rl2-suggest-banner-icon {
    flex: 0 0 auto;
    color: #0074c5;
}

.rl2-suggest-banner-text {
    flex: 1 1 auto;
}

/* A plain dismiss affordance. `border: 0` rather than `border: none` and an
 * explicit background so it cannot inherit a .btn rule from elsewhere. */
.rl2-suggest-banner-dismiss {
    flex: 0 0 auto;
    padding: 0 4px;
    border: 0;
    background: transparent;
    color: #1f4d6b;
    font-size: 18px;
    line-height: 1;
    opacity: 0.6;
    cursor: pointer;
}

.rl2-suggest-banner-dismiss:hover,
.rl2-suggest-banner-dismiss:focus {
    opacity: 1;
}

/* The visual distinction the contract requires: a suggested value is never
 * mistakable for one a human chose. Sits inline in the field's label. */
.rl2-suggested-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    border: 1px solid #7fc9d3;
    border-radius: 9px;
    background-color: #e6f7f9;
    color: #00697a;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: none;
    vertical-align: middle;
}

/* Only the title field — the one suggestable control select2 does not own. */
.rl2-suggested-input.rl2-suggested-input {
    border-left: 3px solid #00aec4;
    background-color: #fbfeff;
}

/* IN-12155 brief-2bC3 — the AI-distinct badge. Same shape as the badge above,
 * in the primary blue rather than the teal, so "AI suggested" and "Suggested"
 * read as different sources at a glance and not only by their words. */
.rl2-suggested-badge.rl2-suggested-badge-ai {
    border-color: #8fc1e6;
    background-color: #e8f2fa;
    color: #005a99;
}

/* IN-12155 brief-2bC3 — AI standard hints. Display-only text BESIDE the
 * standards control, never inside it; nothing here is interactive. */
.rl2-standard-hints {
    margin-top: 6px;
    color: #4a5a66;
    font-size: 12px;
    line-height: 1.6;
}

.rl2-standard-hints .rl2-standard-hints-label {
    margin-right: 4px;
    font-style: italic;
}

.rl2-standard-hints .rl2-standard-hint {
    display: inline-block;
    margin: 0 4px 2px 0;
    padding: 0 6px;
    border: 1px dashed #8fc1e6;
    border-radius: 9px;
    background-color: #f5f9fc;
}

/* IN-12155 brief-K2b — the AI-thinking indicator. A quiet in-flow line under
 * the banner; it never overlays or blocks anything. */
.rl2-ai-thinking {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 9px 9px 9px;
    color: #005a99;
    font-size: 12px;
    line-height: 1.4;
}

.rl2-ai-thinking .rl2-ai-thinking-dot {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #0074c5;
    animation: rl2-ai-thinking-pulse 1.2s ease-in-out infinite;
}

@keyframes rl2-ai-thinking-pulse {
    0%,
    100% {
        background-color: #0074c5;
    }

    50% {
        background-color: #b8daf0;
    }
}

/* IN-12155 brief-K2b — suggested standards: real catalogue rows offered as
 * one-click Add chips, beside the standards control and never inside it. */
.rl2-standard-suggestions {
    margin-top: 6px;
    color: #4a5a66;
    font-size: 12px;
    line-height: 1.6;
}

.rl2-standard-suggestions .rl2-standard-suggestions-label {
    margin-right: 4px;
    font-weight: 600;
}

/* `border` and `background` set explicitly so the button cannot inherit a
 * .btn rule from elsewhere. */
.rl2-standard-suggestions .rl2-standard-suggestion {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0 4px 4px 0;
    padding: 1px 4px 1px 8px;
    border: 1px solid #8fc1e6;
    border-radius: 9px;
    background-color: #e8f2fa;
    color: #1f4d6b;
    font: inherit;
    cursor: pointer;
}

.rl2-standard-suggestions .rl2-standard-suggestion:hover,
.rl2-standard-suggestions .rl2-standard-suggestion:focus {
    border-color: #0074c5;
    background-color: #d6e9f7;
}

.rl2-standard-suggestions .rl2-standard-suggestion-priority {
    color: #b35a00;
}

.rl2-standard-suggestions .rl2-standard-suggestion-code {
    font-weight: 600;
}

.rl2-standard-suggestions .rl2-standard-suggestion-add {
    padding: 0 5px;
    border-radius: 7px;
    background-color: #0074c5;
    color: #ffffff;
    font-size: 11px;
}

.rl2-standard-suggestions-pending {
    margin-top: 6px;
    color: #4a5a66;
    font-size: 12px;
    font-style: italic;
}