@import 'nav.css';
@import 'instrument-gauge.css';

body {
    font-family: 'Strait', sans-serif !important;
    margin: 1em !important;
    font-size: 110% !important;
    background-color: #121212 !important;
    color: #ffffff !important;
}

#faqs h2 {
    font-size: 1.5em !important;
    color: rgba(255, 255, 0, 0.9) !important;
    border-bottom: 1px dotted rgba(255, 255, 0, 0.9) !important;
}



h1 {
    color: aqua !important;
}

.page-summary {
    color: rgba(255, 255, 0, 0.9);
}


textarea {
    background: #f5f5f5 !important;
    color: darkgreen !important
}

/* Custom styling */
.console-table table, .console-table th, .console-table td {
    padding: 0.2em !important;
}


.red {
    color: #000 !important;
    background-color: rgb(220, 53, 69) !important;
}

.blue {
    color: #000 !important;
    background-color: rgb(0, 123, 255) !important;
}

.alert {
    padding: 0 !important;
    border-radius: .5rem;
    margin: 0 !important;
    font-weight: 900
}

.alert-error {
   color: red !important;
}

.alert-info {
    background: #666 !important;
    color: #d9ecff !important;
}



#lowDownTable tr td {
    font-size: 3em !important;
    text-align: center !important;
}

#lowDownTable tr th {
    font-size: 1em !important;
    text-align: center !important;
    border: 1px solid #333 !important;
}

#lowDownTable tr td.prediction {
    font-size: 1.5em !important;
    background-color: #f5f5f5 !important;
    border: 1px solid #333 !important;
    color: black !important;
}

    #lowDownTable tr td.prediction a, #lowDownTable tr td.prediction a:visited {
        color: #000 !important;
    }



#playerTable tr td {
    border: 1px solid #333 !important;
}


#allPlayers {
    border: 1px solid #000 !important;
}

#red-bvf th, #red-fvb th, #red-dvb th,
#blue-bvf th, #blue-fvb th, #blue-dvb th {
    /*background-color: #000 !important;
    border: 1px solid #333 !important;*/
    /*color: #fff !important;*/
}

#red-team th {
    background-color: rgb(220, 53, 69) !important;
    border: 1px solid #333 !important;
    color: #000 !important;
}

#blue-team th {
    background-color: rgb(0, 123, 255) !important;
    border: 1px solid #333 !important;
    color: #000 !important;
}


/*#red-team td, #red-team td, #red-team td,*/
#red-bvf td, #red-fvb td, #red-dvb td {
    /*background-color: rgb(220, 53, 69) !important;
    border: 1px solid #333 !important;
    color: #000 !important;*/
}

/*#blue-team td, #blue-team td, #blue-team td,*/
#blue-bvf td, #blue-fvb td, #blue-dvb td {
    /*background-color: rgb(0, 123, 255) !important;
    border: 1px solid #333 !important;
    color: #000 !important;*/
}

#playerPickerList li {
    border: 1px solid #000;
    background-color: #000;
    padding: 2px;
    color: dodgerblue;
    float: left;
    list-style: none;
    margin: 2px;
    cursor: pointer;
    font-size: 100%;
}

    #playerPickerList li:hover {
        background-color: #333;
        border: 1px solid yellowgreen;
        padding: 2px;
        cursor: pointer;
        font-size: 100%;
    }

    #playerPickerList li.selected {
        background-color: yellowgreen;
    }

#playerCount {
    color: greenyellow;
    font-weight: 900
}

/* table with stronks */
/* Define your color palette */
:root {
    --color0: #cb2ab6; /* Dark Purple (HSL: 289°, 90%, 47%) */
    --color1: #e067d0; /* Lighter Purple (HSL: 296°, 22%, 60%) */
    --color2: #EA99DF; /* Light Purple (HSL: 216°, 32%, 60%) */
    --color3: #1976d2; /* Dark Blue (HSL: 209°, 54%, 32%) */
    --color4: #2196f3; /* Medium Blue (HSL: 196°, 94%, 34%) */
    --color5: #64b5f6; /* Light Blue (HSL: 171°, 88%, 38%) */
    --color6: #68e0f5; /* Lighter Blue (HSL: 149°, 85%, 45%) */
    --color7: #74C69D; /* Light Green (HSL: 99°, 69%, 62%) */
    --color8: #95D5B2; /* Lighter Green (HSL: 76°, 73%, 64%) */
    --color9: #B7E4C7; /* Yellow (HSL: 57°, 85%, 63%) */
    --color10: #D8F3DC; /* Light Taupe (HSL: 132°, 44%, 88%) */
    --color11: #f2f2f2; /* Light Gray (HSL: 0°, 0%, 95%) */
    --color12: #666666; /* Light Gray (HSL: 0°, 0%, 95%) */
}


/* Update element styles using the color palette */
.lowest-strength {
    background-color: var(--color10) !important; /* Yellow */
    color: #333 !important;
}

.lower-strength {
    background-color: var(--color9) !important; /* Lime */
    color: #333 !important;
}

.low-strength {
    background-color: var(--color8) !important; /* Bright Green */
    color: #333 !important;
}

.low-medium-strength {
    background-color: var(--color6) !important; /* Lime Green */
    color: #333 !important;
}

.medium-strength {
    background-color: var(--color5) !important; /* Light Green */
    color: #333 !important;
}

.low-high-strength {
    background-color: var(--color4) !important; /* Turquoise */
    color: #333 !important;
}

.medium-high-strength {
    background-color: var(--color3) !important; /* Light Blue */
    color: #333 !important;
}

.godlike-strength {
    background-color: var(--color2) !important; /* Blue */
    color: #333 !important;
}

.insane-strength {
    background-color: var(--color1) !important; /* Sky Blue */
    color: #333 !important;
}

.stier-strength, .s-tier-strength {
    background-color: var(--color0) !important; /* Purple */
    color: #333 !important;
}


/* hiding summary on checker page*/

.page-summary {
    display: none;
    /* Optional: add transition for a fade-in effect */
    opacity: 0;
    transition: opacity 0.3s;
}

.hover-trigger:hover .page-summary {
    display: block;
    opacity: 1;
}



/* compare table header */

.prob-bar {
    position: relative;
    height: 2rem;
    background: #222;
    overflow: hidden;
    display: flex;
    font-weight: 900;
}

.prob-red {
    background: #b00;
    color: #000;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 4px;
    white-space: nowrap;
    font-weight:900;
}

.prob-blue {
    background: #06c;
    color: #000;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 4px;
    white-space: nowrap;
    font-weight: 900;
}

.prob-text-left, .prob-text-right {
    font-size: 1.25rem
}


/* Base badge styling */
.role-badge {
    display: inline-flex;
    align-items: center;
    font-weight: 600;
    font-size: 0.8rem;
    border-radius: 6px;
    overflow: hidden;
    margin-left: 6px;
    backdrop-filter: blur(3px);
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}

/* Section split — left (role type) and right (role name) */
.role-badge-icon {
    padding: 3px 6px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.role-badge-text {
    padding: 3px 8px;
    background: rgba(0,0,0,0.4);
    color: #eee;
}

/* Muted overlay tones with transparency */
.role-offense .role-badge-icon {
    background-color: rgba(181, 91, 82, 0.6); /* translucent rust red */
    color: #fff;
}

.role-blitz .role-badge-icon {
    background-color: rgba(188, 164, 94, 0.6); /* translucent olive gold */
    color: #222;
}

.role-impact .role-badge-icon {
    background-color: rgba(94, 126, 155, 0.6); /* translucent steel blue */
    color: #fff;
}

/* Hover highlight for clarity */
.role-badge:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(255,255,255,0.15);
}



/* global tooltip element */
#roleTooltip {
    position: fixed;
    max-width: 320px;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 0.85rem;
    line-height: 1.25;
    color: #666666;
    background: #fdfdfd;
    box-shadow: 0 8px 24px rgba(0,0,0,0.35);
    z-index: 99999;
    pointer-events: none; /* let mouse pass through */
    opacity: 0;
    transform: translateY(4px);
    transition: opacity .12s ease, transform .12s ease;
    white-space: normal; /* wrap */
    word-wrap: break-word;
}

    #roleTooltip.show {
        opacity: 1;
        transform: translateY(0);
    }


    #roleTooltip.arrow-top::after {
        border-top: 8px solid #ffffff;
    }

    #roleTooltip.arrow-bottom::after {
        border-bottom: 8px solid #ffffff;
    }


/* --- Align Verdict and Result cells --- */
#lowDownTable td {
    vertical-align: middle;
    padding: 0.3em 0.6em !important;
}

/* Match verdict badge height to the prob bar */
.verdict-badge {
    display: flex;
    align-items: center;
    height: 2rem; /* same as .prob-bar height */
    box-sizing: border-box;
    padding: 0 10px;
    font-size: 1.25rem;
    color: #000 !important;
    font-weight:600;
}
.v-green {
    background-color: #2ecc71;

}
/* balanced / good */
.v-yellow {
    background-color: #f1c40f;
    color: #222;
}
/* mild edge */
.v-amber {
    background-color: #e67e22;
}
/* moderate imbalance */
.v-orange {
    background-color: #d35400;
}
/* strong imbalance */
.v-red {
    background-color: #c0392b;
}
/* stacked / bad */