/*
 * MTT-3290: fresher status UI — alerts, badges, toasts, banners and tags.
 *
 * Solid Dashkit fills become soft tints with a thin border, dark readable text and
 * a tone-coloured icon. Class-level only (many badges/alerts are built in PHP/JS),
 * loaded after ui_refresh.css; removing the <link> in layouts/app.blade.php reverts it.
 */

:root {
    --st-warning-bg: #FFF8E6;
    --st-warning-border: #F5DFA0;
    --st-warning-text: #5C4813;
    --st-warning-icon: #D9A406;

    --st-danger-bg: #FDECEF;
    --st-danger-border: #F6C6CF;
    --st-danger-text: #8A1F33;
    --st-danger-icon: #E63757;

    --st-success-bg: #E8FBF5;
    --st-success-border: #B5EEDC;
    --st-success-text: #0B5E4C;
    --st-success-icon: #0E9E86;

    --st-info-bg: #EAF2FD;
    --st-info-border: #C5DBF7;
    --st-info-text: #1D4F91;
    --st-info-icon: #2C7BE5;

    --st-neutral-bg: #F3F6FA;
    --st-neutral-border: #E3EBF6;
    --st-neutral-text: #3B506C;
    --st-neutral-icon: #6E84A3;
}

/* ------------------------------------------------------------------ */
/* Alerts                                                              */
/* ------------------------------------------------------------------ */

.alert {
    --st-bg: var(--st-neutral-bg);
    --st-border: var(--st-neutral-border);
    --st-text: var(--st-neutral-text);
    --st-icon: var(--st-neutral-icon);
    --st-glyph: "\e97c"; /* info */

    /* Shape only: colours come from the variant classes below, so custom alerts
       (.pre-confirm-box etc.) keep their own background. */
    position: relative;
    padding: 14px 16px;
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.5;
}

.alert-warning {
    --st-bg: var(--st-warning-bg);
    --st-border: var(--st-warning-border);
    --st-text: var(--st-warning-text);
    --st-icon: var(--st-warning-icon);
    --st-glyph: "\e904"; /* alert-triangle */
}

.alert-danger {
    --st-bg: var(--st-danger-bg);
    --st-border: var(--st-danger-border);
    --st-text: var(--st-danger-text);
    --st-icon: var(--st-danger-icon);
    --st-glyph: "\e903"; /* alert-octagon */
}

.alert-success {
    --st-bg: var(--st-success-bg);
    --st-border: var(--st-success-border);
    --st-text: var(--st-success-text);
    --st-icon: var(--st-success-icon);
    --st-glyph: "\e92c"; /* check-circle */
}

.alert-info,
.alert-primary {
    --st-bg: var(--st-info-bg);
    --st-border: var(--st-info-border);
    --st-text: var(--st-info-text);
    --st-icon: var(--st-info-icon);
}

.alert-primary,
.alert-secondary,
.alert-success,
.alert-info,
.alert-warning,
.alert-danger,
.alert-light {
    border-color: var(--st-border);
    background-color: var(--st-bg);
    color: var(--st-text);
}

/* Automatic tone icon, unless the alert brings its own or is used as a layout row. */
.alert:is(.alert-primary, .alert-secondary, .alert-success, .alert-info, .alert-warning, .alert-danger, .alert-light):not(:has(.fe)):not(.row):not(.pre-confirm-box):not(#export-banner) {
    padding-left: 46px;
}

.alert:is(.alert-primary, .alert-secondary, .alert-success, .alert-info, .alert-warning, .alert-danger, .alert-light):not(:has(.fe)):not(.row):not(.pre-confirm-box):not(#export-banner)::before {
    content: var(--st-glyph);
    position: absolute;
    top: 14px;
    left: 16px;
    font-family: 'Feather';
    font-size: 18px;
    line-height: 21px;
    color: var(--st-icon);
    speak: none;
}

/* Icons the markup already has take the tone colour. */
.alert .fe {
    color: var(--st-icon);
}

.alert strong,
.alert b {
    font-weight: 600;
}

.alert .alert-heading,
.alert h1, .alert h2, .alert h3, .alert h4, .alert h5, .alert h6 {
    color: inherit;
}

/* Links: same colour as the text, bold and underlined (no more blue on yellow). */
.alert a:not(.btn),
.alert .alert-link {
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    transition: color .15s ease;
}

.alert a:not(.btn):hover,
.alert .alert-link:hover {
    color: var(--st-icon);
}

/* Utility colours written for the old solid fills would vanish on a soft tint. */
.alert .text-white,
.alert .text-dark,
.alert.text-white {
    color: inherit !important;
}

.alert hr {
    border-top-color: var(--st-border);
}

/* Close × */
.alert-dismissible {
    padding-right: 44px;
}

.alert-dismissible .close {
    top: 0;
    right: 0;
    padding: 12px 16px;
    color: inherit;
    font-weight: 400;
    text-shadow: none;
    opacity: .45;
    transition: opacity .15s ease;
}

.alert-dismissible .close:hover,
.alert-dismissible .close:focus {
    color: inherit;
    opacity: 1;
}

.alert-dismissible .close .text-white {
    color: inherit !important;
}

/* ------------------------------------------------------------------ */
/* Badges / status labels                                              */
/* ------------------------------------------------------------------ */

.badge {
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: .01em;
}

/* Variant colours apply only to real .badge elements, and without !important so a
   badge (or a badge-soft-* helper like the schedule's event cells) that carries its own
   inline colour keeps it. The .bg-* utilities are !important in Bootstrap, so the
   `.badge.bg-*` forms need it too. */
.badge:is(.badge-success, .badge-soft-success) {
    --st-dot: var(--st-success-icon);
    background-color: var(--st-success-bg);
    color: var(--st-success-text);
}

.badge:is(.badge-warning, .badge-soft-warning) {
    --st-dot: var(--st-warning-icon);
    background-color: var(--st-warning-bg);
    color: var(--st-warning-text);
}

.badge:is(.badge-danger, .badge-soft-danger) {
    --st-dot: var(--st-danger-icon);
    background-color: var(--st-danger-bg);
    color: var(--st-danger-text);
}

.badge:is(.badge-primary, .badge-soft-primary, .badge-info, .badge-soft-info) {
    --st-dot: var(--st-info-icon);
    background-color: var(--st-info-bg);
    color: var(--st-info-text);
}

.badge:is(.badge-secondary, .badge-soft-secondary, .badge-light, .badge-soft-dark) {
    --st-dot: var(--st-neutral-icon);
    background-color: var(--st-neutral-bg);
    color: var(--st-neutral-text);
}

.badge:is(.bg-success, .bg-success-soft):not([style*="background"]) {
    --st-dot: var(--st-success-icon);
    background-color: var(--st-success-bg) !important;
    color: var(--st-success-text) !important;
}

.badge:is(.bg-warning, .bg-warning-soft):not([style*="background"]) {
    --st-dot: var(--st-warning-icon);
    background-color: var(--st-warning-bg) !important;
    color: var(--st-warning-text) !important;
}

.badge:is(.bg-danger, .bg-danger-soft):not([style*="background"]) {
    --st-dot: var(--st-danger-icon);
    background-color: var(--st-danger-bg) !important;
    color: var(--st-danger-text) !important;
}

.badge:is(.bg-primary, .bg-info, .bg-primary-soft, .bg-info-soft):not([style*="background"]) {
    --st-dot: var(--st-info-icon);
    background-color: var(--st-info-bg) !important;
    color: var(--st-info-text) !important;
}

.badge:is(.bg-secondary, .bg-light, .bg-secondary-soft):not([style*="background"]) {
    --st-dot: var(--st-neutral-icon);
    background-color: var(--st-neutral-bg) !important;
    color: var(--st-neutral-text) !important;
}

/* Status dot on text badges inside tables (not on counters / pills). */
table .badge[class*="badge-"]:not(.badge-pill):not(:empty):not([style*="background"])::before,
table .badge[class*=" bg-"]:not(.badge-pill):not(:empty):not([style*="background"])::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin: 0 6px 1px 0;
    border-radius: 50%;
    background-color: var(--st-dot, currentColor);
    vertical-align: middle;
}

/* Tags-input chips stay neutral. */
.bootstrap-tagsinput .badge {
    background-color: var(--st-neutral-bg) !important;
    color: var(--st-neutral-text) !important;
    border: 1px solid var(--st-neutral-border);
}

/* ------------------------------------------------------------------ */
/* Toasts (jquery-toast, showToast / showErrorToast / showWarningToast) */
/* ------------------------------------------------------------------ */

.jq-toast-wrap {
    width: 340px;
    max-width: calc(100vw - 32px);
}

.jq-toast-wrap .jq-toast-single {
    --st-icon: var(--st-info-icon);
    --st-icon-bg: var(--st-info-bg);
    --st-glyph: "\e97c";

    margin-bottom: 8px;
    padding: 14px 40px 14px 56px !important;
    border: 1px solid rgba(18, 38, 63, .06);
    border-radius: 12px;
    background: #fff !important;
    background-image: none !important;
    color: #283E59 !important;
    box-shadow: 0 12px 32px rgba(18, 38, 63, .16);
    font-family: inherit;
    font-size: 14px;
    line-height: 1.45;
    overflow: hidden;
}

.jq-toast-wrap .jq-toast-single.jq-icon-success {
    --st-icon: var(--st-success-icon);
    --st-icon-bg: var(--st-success-bg);
    --st-glyph: "\e92c";
}

.jq-toast-wrap .jq-toast-single.jq-icon-error {
    --st-icon: var(--st-danger-icon);
    --st-icon-bg: var(--st-danger-bg);
    --st-glyph: "\e903";
}

.jq-toast-wrap .jq-toast-single.jq-icon-warning {
    --st-icon: var(--st-warning-icon);
    --st-icon-bg: var(--st-warning-bg);
    --st-glyph: "\e904";
}

.jq-toast-wrap .jq-toast-single::before {
    content: var(--st-glyph);
    position: absolute;
    top: 12px;
    left: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: var(--st-icon-bg);
    color: var(--st-icon);
    font-family: 'Feather';
    font-size: 15px;
}

.jq-toast-wrap .jq-toast-single h2 {
    margin-bottom: 2px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    color: #12263F;
}

.jq-toast-wrap .jq-toast-single a {
    color: inherit;
    border-bottom-color: currentColor;
}

.jq-toast-wrap .close-jq-toast-single {
    top: 10px;
    right: 12px;
    font-size: 18px;
    line-height: 1;
    color: #95AAC9;
    transition: color .15s ease;
}

.jq-toast-wrap .close-jq-toast-single:hover {
    color: #283E59;
}

.jq-toast-wrap .jq-toast-loader {
    top: auto;
    bottom: 0;
    height: 3px;
    border-radius: 0;
    background: var(--st-icon) !important;
    opacity: .5;
}

/* ------------------------------------------------------------------ */
/* Persistent banners                                                  */
/* ------------------------------------------------------------------ */

/* Free-trial banner (components/free_trial_alert.blade.php): soft info instead of solid blue. */
#trialAlert.custom-alert-bg {
    --st-icon: var(--st-info-icon);
    border: 1px solid var(--st-info-border);
    background-color: var(--st-info-bg) !important;
    color: var(--st-info-text);
}

#trialAlert .text-white {
    color: var(--st-info-text) !important;
}

#trialAlert .fe-alert-triangle {
    color: var(--st-info-icon) !important;
}

#trialAlert.trial-alert .btn {
    border: 0;
    border-radius: 8px;
    background-color: #2de0b5;
    color: #283E59 !important;
    font-weight: 600;
}

#trialAlert.trial-alert .btn:hover {
    background-color: #26CFA6;
}

/* Athlete-limit banner: full-width strip under the header. */
.athletes-reaching-limit-alert.alert {
    border-width: 0 0 1px;
    border-radius: 0;
}

.athletes-reaching-limit-alert .btn {
    border: 1px solid var(--st-warning-border) !important;
    background-color: #fff;
    color: var(--st-warning-text) !important;
}

.athletes-reaching-limit-alert .btn:hover {
    background-color: #FFFDF7;
}

/* Free-trial pill in the dark sidebar. */
#sidebar .badge.custom-alert-bg,
#sidebar .custom-alert-bg.badge {
    background-color: rgba(65, 112, 213, .22) !important;
    color: #C9D9FF !important;
}

/* ------------------------------------------------------------------ */
/* Tags & custom status labels (originally in custom.css)              */
/* ------------------------------------------------------------------ */

/* Dashboard event tags (latest_events_feed: badge badge-pill {type}-tag). */
.training-tag:not([style*="background"]) {
    background-color: var(--st-success-bg) !important;
    color: var(--st-success-text) !important;
}

.game-tag:not([style*="background"]) {
    background-color: var(--st-danger-bg) !important;
    color: var(--st-danger-text) !important;
}

.simple-tag:not([style*="background"]) {
    background-color: var(--st-neutral-bg) !important;
    color: var(--st-neutral-text) !important;
}

/* Club contact status (clubs/contacts, admin/home). */
.club-contact-status {
    background-color: var(--st-info-bg);
    color: var(--st-info-text);
}

.club-contact-status.contacted-positive {
    background-color: var(--st-success-bg);
    color: var(--st-success-text);
}

.club-contact-status.contacted-negative {
    background-color: var(--st-danger-bg);
    color: var(--st-danger-text);
}

.club-contact-status.not-available {
    background-color: var(--st-warning-bg);
    color: var(--st-warning-text);
}

.club-contact-status.contacted-skeptical {
    background-color: #E7F4F3;
    color: #2F6563;
}

/* KYC status boxes. */
.kyc-alert-active {
    border: 1px solid var(--st-success-border);
    background-color: var(--st-success-bg) !important;
    color: var(--st-success-text) !important;
}

.kyc-alert-warning {
    border: 1px solid var(--st-warning-border);
    background-color: var(--st-warning-bg) !important;
    color: var(--st-warning-text) !important;
}

.kyc-alert-error {
    border: 1px solid var(--st-danger-border);
    background-color: var(--st-danger-bg) !important;
    color: var(--st-danger-text) !important;
}

.evaluation-badge,
.season-action-badge {
    border-radius: 999px;
    background-color: var(--st-neutral-bg);
    color: var(--st-neutral-text);
    font-weight: 600;
}