/* Title of the website, positioned on the right side of the navbar */
#title {
    font-size: 220%;
}

/* Shrink page titles/headers on small screens so they don't crowd the layout */
@media (max-width: 767.98px) {
    #title {
        font-size: 140%;
    }

    h1 {
        font-size: 1.5rem;
    }

    h2 {
        font-size: 160%;
    }

    h3 {
        font-size: 100%;
    }

    .change-password-btn .btn {
        font-size: 0.8rem;
        padding: 0.25rem 0.5rem;
    }
}

/* Navigation items on the navbar */
.nav-item {
    font-size: 120%;
}

/* Apply margin (mx-auto) and width auto (w-auto) only to authentication forms */
.auth-form input {
    margin: 0 auto !important;
    width: auto !important;
}

/* Prevent search form from inheriting authentication form styles */
form:not(.auth-form) input {
    margin: 0 !important;
    width: 100% !important;
}

/* Password field + show/hide toggle button, sized to match other auth-form inputs */
.password-field-group {
    display: inline-flex;
    width: auto !important;
}
.password-field-group input {
    width: 159px !important;
    margin: 0 !important;
}
.password-toggle-btn {
    display: flex;
    align-items: center;
}

.change-password-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
}

/* Header styles for the homepage and picks history page */
h1 {
    font-size: 350%;
    font-weight: bold;
}

/* Header styles for the odds page */
h2 {
    font-size: 220%;
}

/* Subheaders for MarketPlace Odds section displaying event information */
h3 {
    font-size: 120%;
}

/* All table headers inside any table with Bootstrap 'table' class */
table.table th {
    background-color: #2c3e50 !important; /* blue/grey */
    color: #ffffff !important;            /* white text */
    font-weight: bold;
    text-align: center;
    padding: 0.5rem;
}

/* General styling for both the odds and picks history tables */
table th,
table td {
    padding: 0.4rem 0.25rem;
    vertical-align: middle; /* Centers table cell content vertically */
    border: 1px solid black; /* Adds a black border around cells */
}

/* Clickable column headers (e.g. League Records) */
.sortable-th {
    cursor: pointer;
    user-select: none;
}
.sortable-th:hover {
    opacity: 0.85;
}
.sortable-th::after {
    content: " \21C5"; /* neutral up/down arrows hinting the column is sortable */
    font-size: 0.8em;
    opacity: 0.6;
}
.sortable-th.sort-active::after {
    content: ""; /* replaced by the directional \25B2/\25BC indicator once sorted */
}

/* Pick form section headers on the odds page */
.form-label {
    font-weight: bold;
    font-size: 120%;
}

/* Header row styling for marketplace odds table */
[id^="marketplace-odds-table-"] th {
    background-color: #2c3e50 !important; /* blue/grey */
    color: white;
    height: 35px;
}

/* Styling for the sportsbook title text */
.sportsbook-title {
    font-weight: bold;
}

/* Alternating row styling for marketplace odds and picks history table to enhance readability */
#marketplace-odds-table-rows:nth-of-type(even),
#pick-table-rows:nth-of-type(even) {
    background-color: rgba(0, 51, 153, 0.3); /* Light blue background */
}

/* Picks history table: set width and center alignment */
#pick-history-table {
    margin: auto;
    width: 90%;
}

.alert-login-notice {
  background-color: #2c3e50; /* dark blue/slate, matches table headers */
  color: #ffffff;
  border-color: #2c3e50;
}

.alert-login-notice a {
  color: #ffffff;
  text-decoration: underline;
}

.win-cell {
  background-color: #c6efce !important; /* light green */
  color: inherit !important;
}

.loss-cell {
  background-color: #ffc7ce !important; /* light red */
  color: inherit !important;
}

.pick-actions {
    white-space: nowrap;
}

.pick-actions .delete-pick-btn {
    min-height: 44px;
    min-width: 44px;
}

/* Styling for disabled dropdown elements to appear as static text */
.single-option {
    appearance: none;
    -moz-appearance: none; /* For Firefox */
    -webkit-appearance: none; /* For Safari and Chrome */
    background: none;
    pointer-events: none; /* Disable dropdown interaction */
    color: #000; /* Maintiain standard text color */
    cursor: default; /* Show default cursor instead of pointer */
}