/* Style for dropdown container */
.dash-dropdown .Select-control {
    background-color: #343a40 !important; /* Dark background */
    border: 1px solid #495057 !important; /* Border matching Darkly */
    color: white !important;              /* White text */
    border-radius: 5px !important;       /* Rounded corners */
}

/* Style for dropdown menu */
.dash-dropdown .Select-menu-outer {
    background-color: #343a40 !important; /* Dark background for options */
    color: white !important;              /* White text */
}

/* Ensure the text color for the selected value when inactive */
.dash-dropdown .Select.has-value.Select--single > .Select-control .Select-value .Select-value-label {
    color: white !important;               /* White text for the selected value */
}

/* Style for dropdown options */
.dash-dropdown .Select-option {
    background-color: #343a40 !important; /* Option background */
    color: white !important;              /* Option text */
}

/* Style for selected option */
.dash-dropdown .Select-option.is-selected {
    background-color: #495057 !important; /* Highlight selected option */
    color: white !important;               /* Ensure selected text is visible */
}

/* Style for the selected value in the dropdown */
.dash-dropdown .Select-control .Select-value {
    color: white !important;               /* Make sure selected value is white */
}

/* Style for the selected value when dropdown is inactive */
.dash-dropdown .Select-control .Select-value {
    color: white !important;               /* Ensure selected value is white */
}

/* Style for placeholder text */
.dash-dropdown .Select-placeholder {
    color: #aab8c2 !important;             /* Lighter gray for placeholder text */
}

/* Style on hover */
.dash-dropdown .Select-option:hover {
    background-color: #3e444a !important; /* Darker background on hover */
    color: white !important;               /* White text on hover */
}


@media (max-width: 576px) {
  #tab-title {
    font-size: 20px !important;
    margin: 6px !important;
  }
}


@media (max-width: 576px) {
  .btn-group .btn {
    font-size: 0.85rem !important;
    padding: 4px 6px !important;
    margin: 2px !important;
  }
}

@media (max-width: 576px) {
  /* tighter dropdown container */
  .Select-control {
    min-height: 26px !important;
    height: 26px !important;
  }

  /* text area */
  .Select-value-label,
  .Select-placeholder {
    font-size: 0.8rem !important;
    line-height: 24px !important;
    padding: 0 4px !important;
  }

  /* arrow position and size */
  .Select-arrow {
    top: 8px !important;
    border-width: 4px !important;
  }

  /* dropdown options list */
  .Select-menu-outer {
    font-size: 0.8rem !important;
    line-height: 1.2rem !important;
  }
}

.rounded-icon {
    display: inline-block;
    border: 2px solid white; /* Border color */
    border-radius: 50%; /* Makes it circular */
    padding: 0px; /* Space around the icon */
    margin-left: 2px; /* Space between icons */
}

.dropdown-flex {
    display: flex;
    gap: 0; /* Remove space between dropdowns */
}

.hidden-dropdown {
    display: none !important;
    visibility: hidden !important;
    margin: 0 !important;
    width: 0 !important;
}

.plotly-header {
    font-size: "16px";
    color: white;
    margin-bottom: 1rem; /* Equivalent to Bootstrap's `mb-4` */
    text-align: left;
}

.custom-dropdown {
    width: 150px; /* Adjust the width as needed */
}


.square-icon {
    display: inline-block;
    width: 16px; 
    height: 16px; 
    text-align: center;
    line-height: 18px; 
    border-radius: 0px; 
    font-size: 14px;
    margin: 2px 0 0 0; 
    vertical-align: middle;
}

.win { background-color: green; color: white; }
.loss { background-color: red; color: white; }
.draw { background-color: darkblue; color: white; }

.ot-win { background-color: darkblue; color: white;}
.ot-loss { background-color: darkblue; color: white; }



p {
    margin-bottom: 0;
    margin-top: 2px;
    text-align : left;
    vertical-align: middle;
 }


 .nav-link {
    padding: 6px 8px !important; /* override Bootstrap */
    font-size: 0.9rem; /* optional */
}


:root { 
  --nav-h: 56px; 
  --sb-w: 240px; 
  --sb-gap: 16px; /* extra gap between sidebar and content */
}

#sidebar {
  position: fixed;
  top: var(--nav-h);
  left: 0;
  width: var(--sb-w);
  height: calc(100vh - var(--nav-h));
  background: #1b1f24;
  z-index: 1000;
  overflow-y: auto;
}

#main-content {
  padding-top: calc(var(--nav-h) + 8px);
  padding-left: 230px;   /* space for sidebar */
  padding-right: 8px;
  width: 100%;
  box-sizing: border-box;
}

/* On small screens: remove sidebar padding */
@media (max-width: 768px) {
  #main-content {
    padding-left: 8px;   /* or 0, depending on how tight you want it */
  }
}

html, body { 
  overflow-x: hidden; 
}




/* Make main content full width when sidebar is hidden */
@media (max-width: 768px) {
  #main-content {
    margin-left: 0 !important;
    padding-top: 64px; /* room for fixed navbar */
  }
}

@media (max-width: 768px) {
  .mobile-tight {
    padding-left: 4px !important;
    padding-right: 4px !important;
    margin: 0 !important;
  }
}

@media (max-width: 576px) {
  /* kill leftover horizontal padding inside the content card */
  #content-col .card-body {
    padding-left: 2px !important;
    padding-right: 2px !important;
  }
}



/*  Data games table (Tab 2) css custom */


@media only screen and (max-width: 600px) {
    /* Hide periodscore column on phones */
    #data-games-table [data-dash-column="periodscore"] {
        display: none !important;
    }
}


@media only screen and (max-width: 600px) {

    /* Limit width of Home + Away columns on mobile */
    #data-games-table [data-dash-column="team"],
    #data-games-table [data-dash-column="opponent"] {
        max-width: 95px !important;      /* adjust freely */
        white-space: normal !important;  /* allow wrapping */
        overflow: hidden !important;
        text-overflow: ellipsis;
        word-break: break-word;          /* hard wrap long names */
    }
}

@media only screen and (max-width: 600px) {
    #data-games-table [data-dash-column="date_adjusted"] {
        font-size: 11px !important;
        max-width: 70px !important;
        white-space: nowrap !important;
    }
}

@media only screen and (max-width: 600px) {
    #data-games-table [data-dash-column="score_team"],
    #data-games-table [data-dash-column="score_opponent"] {
        max-width: 32px !important; 
        min-width: 32px !important;
        width: 32px !important;

        text-align: center !important;

        padding-left: 0 !important;
        padding-right: 0 !important;
        white-space: nowrap !important;
    }
}