/* Disable hover effect on rows */
.dash-spreadsheet .dash-cell {
    background-color: transparent !important;
}

.dash-spreadsheet .dash-cell.focused {
    background-color: transparent !important; border: none !important;
}

.dash-table-tooltip {
    background-color: white !important; border: 1px solid lightgray !important;
    color: black !important;
    text-align: center !important;
    font-weight: bold !important;
    font-size: 14px !important;
    padding: 8px; /* Add some padding inside the tooltip */
    border-radius: 4px; /* Add rounded corners for a smoother appearance */
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1); /* Optional: Add a subtle shadow */
}

/* Center all table cell contents */
.dash-table-container .dash-spreadsheet-container .dash-cell-value {
    text-align: center !important;
    justify-content: center;
    align-items: center;
    display: flex;   /* needed for vertical centering */
}

.custom-tooltip {
    background-color: white !important;
    border: 1px solid lightgrey !important;
    color: black !important;
    font-weight: bold;
    font-size: 14px;
    text-align: center;
    padding: 5px;
}

.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner table {
    --hover: transparent !important;
  }

/* Performance page only: keep DataTable cells opaque so fixed columns mask horizontal scroll. */
.performance-page #performance-table .dash-spreadsheet .dash-cell,
.performance-page #performance-table .dash-spreadsheet .dash-header,
.performance-page #performance-table .dash-spreadsheet .cell--fixed-left {
    background-color: rgb(0, 43, 54) !important;
}

.performance-page #performance-table .dash-spreadsheet .dash-cell.focused {
    background-color: rgb(0, 43, 54) !important;
    border: 1px solid white !important;
}

/* dropdown menu options */
.Select-value-label {
    background-color: transparent !important;
    color: white !important;
 }

/* Ensure no blur or background effects are applied to cards */
.card-body {
    backdrop-filter: transparent !important;
    filter: transparent !important;
    background: transparent !important;
    box-shadow: transparent !important;
    text-align: center !important;
}

/* Remove blurry background from parent containers */
.dash-bootstrap {
    backdrop-filter: none !important;
    filter: none !important;
    background: none !important;
    text-align: center !important;
}

/* Specifically for cards */
.card-body, .card {
    backdrop-filter: none !important;
    filter: none !important;
    background: none !important;
    box-shadow: none !important;
    text-align: center !important;
    font-weight: bold !important;
    font-size: 30px !important;
    padding: 20px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.card-column {
    padding-left: 5px !important;
    padding-right: 5px !important;
    font-weight: bold !important;
    font-size: 30px !important;
}

/* Default sizes for larger screens */
.carousel-caption h5 {
    font-size: 2vw;
}

.carousel-caption p {
    font-size: 1.5vw;
}

/* Medium devices (tablets, small desktops) */
@media (max-width: 768px) {
    .carousel-caption h5 {
        font-size: 4vw;
    }
    .carousel-caption p {
        font-size: 3vw;
    }
}

/* Small devices (phones) */
@media (max-width: 480px) {
    .carousel-caption h5 {
        font-size: 3.5vw; /* Decrease from 6vw */
        line-height: 1.2;
    }
    .carousel-caption p {
        font-size: 2.8vw; /* Decrease from 5vw */
        line-height: 1.2;
    }
}

/* Extra-small devices (like iPhone SE or similar) */
@media (max-width: 400px) {
    .carousel-caption h5 {
        font-size: 3vw;
    }

    .carousel-caption p {
        font-size: 2.5vw;
    }
}


.player-card {
    background-color: rgb(216, 183, 99) !important;
}

/* ==== STICKER TOP RIGHT POSITION ==== */
.sticker-container {
    position: fixed;
    top: 0;        /* No gap from top */
    right: 0;      /* No gap from right */
    padding: 0;
    margin: 0;
    z-index: 9999;
}

.sticker-image {
    width: 150px;
    height: auto;
    transform-origin: top right;
    transform-style: preserve-3d;
    transition: transform 0.35s ease, filter 0.35s ease;
    filter: drop-shadow(0px 2px 2px rgba(0,0,0,0.25));
    cursor: pointer;
    display: block;
}

.sticker-image:hover {
    transform: rotateZ(-12deg) rotateX(18deg) scale(1.04);
    filter: drop-shadow(0px 6px 12px rgba(0,0,0,0.35));
}

.reality-check-page {
    padding:20px;
}

.reality-check-page .reality-chart-row{
    --bs-gutter-x:0;
    display:flex;
    flex-wrap:nowrap;
    align-items:flex-start;
    gap:24px;
}

.reality-check-page .js-plotly-plot{
    width:100% !important;
}

.reality-check-page .plot-container{
    width:100% !important;
}

.reality-check-page .svg-container{
    width:100% !important;
}

.reality-check-page .reality-chart-row > div {
    padding-left:0;
    padding-right:0;
}

.reality-check-page .rc-ranking-col {
    margin-right: -6px;
}

.reality-check-page .rc-ranking-col {
    flex: 0 0 auto;
    width: auto;
}

.reality-check-page .rc-internal-chart-col{
    flex:1 1 0;
    min-width:0;
    display:flex;
    flex-direction:column;
    overflow:hidden;
}

.reality-check-page .rc-external-chart-col{
    flex:1 1 0;
    min-width:0;
    display:flex;
    flex-direction:column;
    overflow:hidden;
}

.player-ranking-panel {
    flex-shrink:0;
}

.player-ranking-header {
    display:grid;
    grid-template-columns:34px 80px 75px 70px;
    align-items:center;
    column-gap:2px;
    height:38px;
    padding-bottom:0px;
    color:white;
    font-weight:700;
    font-size:14px;
}

.player-ranking-row {
    display:grid;
    grid-template-columns:34px 80px 75px 70px;
    align-items:center;
    height:38px;
    column-gap:2px;
    padding:0;
    color:white;
    font-weight:700;
    font-size:14px;
}

.ranking-index {
    width:34px;
}

.ranking-player {
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.ranking-flag {
    width:32px;
    height:22px;
    object-fit:cover;
    justify-self:center;
}

.ranking-flag-header {
    width:75px;
    text-align:center;
    font-size:14px;
    font-weight:700;
    justify-self:center;
}

.ranking-position {
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    text-align: center;
    justify-self: center;
    width: 100%;
}

.player-flag {
    width:24px;
    height:16px;
    object-fit:cover;
}

/* =========================================
   ROSTER PLAYER CARDS
   ========================================= */
.roster-player-card {
    background-color: rgb(151,155,167) !important;
    color: white !important;
    border-radius: 14px !important;
    width: 300px;
    min-width: 300px;
    max-width: 300px;
    min-height: 255px;
    padding: 8px;
}

.roster-player-card-body {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    font-size: 14px !important;
    color: white !important;
    padding: 12px !important;
}

.metrics-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 10px;
    margin-top: 12px;
}

.metric-column {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.metric-row {
    display: grid;
    grid-template-columns: minmax(max-content, 1fr) 40px;
    column-gap: 8px;
    align-items: center;
    font-size: 13px;
    font-weight: 600;
}

.metric-row-centered {
    grid-template-columns: max-content 40px;
    justify-content: center;
    column-gap: 12px;
    margin-top: 12px;
}

.metric-label {
    color: white;
    font-size: 11px;
    font-weight: 700;
    min-width: 0;
    white-space: nowrap;
}

.metric-value {
    color: white;
    font-size: 13px;
    font-weight: 700;
    text-align: right;
    justify-self: end;
}

.rc-chart-title {
    color: white;
    font-size: 20px;
    text-align: center;
    cursor: pointer;
}

.reality-check-page .mobile-layout{
    display:none;
}

@media (max-width:991px){
    .reality-check-page .desktop-layout{
        display:none;
    }
    .reality-check-page .mobile-layout{
        display:block;
    }
}

@media (max-width:991px){
    .reality-check-page .mobile-layout{
        width:100%;
    }
    .reality-check-page .mobile-layout .js-plotly-plot{
        width:100% !important;
    }
}

.reality-check-page .mobile-layout .rc-chart-title{
    margin-bottom:6px;
    font-size:18px;
}

.overview-pie-chart{
    width:100%;
    max-width:700px;
    margin:auto;
}

@media (max-width:991px){
    .overview-pie-chart{
        max-width:500px;
    }
}

@media (max-width:991px){
    .overview-pie-chart{
        margin-bottom:30px;
    }
}