/* General Typography */
html {
    position: relative;
    height: 100%;
    min-height: 100%;
    font-size: 11px;
    margin: 0;
    padding: 0;
}

@media (min-width: 768px) {
    html {
        font-size: 11px;
    }
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0 auto 0 auto;
    justify-content: center;
    align-items: center;
    background-color: #121C35;
    color: #eeeeff; /* Light text color for better contrast on dark background */
    font-family: 'Montserrat', sans-serif; /* Apply Montserrat to body */
    width: 1024px;
}

/* Main Content */
.main-content {
    flex: 1 0 auto;
}

/* Headings */
h1 {
    font-size: 1.5rem;
    margin: 16px 0;
}
h2 {
    font-size: 1.3rem;
    margin: 16px 0;
}
h3 {
    font-size: 1.2rem;
    margin: 16px 0;
}
h4 {
    font-size: 1.2rem;
    margin: 16px 0;
}

/* Links */
a,
a[href] {
    color: #eeeeff;
    text-decoration: none;
}

/* Centered Content */
.centered-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: calc(100vh - 160px);
}

    .centered-content h1 {
        font-size: 1.2rem;
        margin: 0;
    }

.site-container {
    display: flex; /* Enables flexbox */
    justify-content: center; /* Centers content horizontally */
    align-items: center; /* Centers content vertically (optional) */
    margin: 0 auto; /* Ensures the container is horizontally centered */
    max-width: 1200px; /* Optional: Set a maximum width for the container */
    width: 100%; /* Ensures the container spans the full width */
    padding: 16px; /* Optional: Adds padding for spacing */
    box-sizing: border-box; /* Includes padding and border in the element's total width/height */
}

/* Footer */
footer {
    flex-shrink: 0;
    width: 100%;
    height: 40px;
    line-height: 40px;
    color: #eeeeff;
    text-align: center;
    font-size: 1rem;
    background: #121C35; /* Optional: ensures background matches site */
    position: relative;
    z-index: 100;
}

/* Buttons and Forms */
.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* Pagination */
.sitepagination {
    text-align: center; /* Centers the entire pagination block */
    margin-top: 16px;
    margin-bottom: 16px; /* Adds spacing above and below the pagination */
    display: flex; /* Enables flexbox for horizontal alignment */
    justify-content: center; /* Centers the links horizontally */
    flex-wrap: wrap; /* Ensures links wrap to the next line if needed */
    gap: 2px; /* Adds spacing between links */
}

.sitepagination a {
    display: flex; /* Enables flexbox for vertical alignment */
    justify-content: center; /* Centers text horizontally */
    align-items: center; /* Centers text vertically */
    width: 35px; /* Ensures consistent width */
    height: 35px; /* Ensures consistent height */
    margin: 0; /* Removes unnecessary margin */
    padding: 0; /* Removes unnecessary padding */
    text-decoration: none;
    color: #3bf;
    border: 1px solid #ddd;
    border-radius: 2px;
    transition: background-color 0.2s, color 0.2s;
}

.sitepagination a:hover {
    background-color: #0056bf;
    color: #ffffff;
    border-color: darkorange;
}

.sitepagination .current-page {
    display: flex; /* Ensures flexbox for alignment */
    justify-content: center; /* Centers text horizontally */
    align-items: center; /* Centers text vertically */
    font-weight: bold;
    color: #ffffff;
    background-color: #0056bf;
    border: 1px solid #004a9e;
    width: 35px; /* Matches the width of other links */
    height: 35px; /* Matches the height of other links */
    border-radius: 2px;
}

/* Navigation */
.nav-center {
    display: flex; /* Enables flexbox */
    justify-content: center; /* Centers items horizontally */
    align-items: center; /* Centers items vertically */
    background-color: #121C35; /* Optional: Add a background color */
    padding: 4px; /* Optional: Add padding for spacing */
}

    .nav-center ul {
        display: flex; /* Ensures the list items are inline */
        list-style: none; /* Removes default list styling */
        margin: 0; /* Removes default margin */
        padding: 0; /* Removes default padding */
    }

    .nav-center li {
        margin: 4px; /* Adds spacing between items */
    }

    .nav-center a {
        text-decoration: none; /* Removes underline from links */
        color: #eeeeff; /* Light text color */
        font-weight: bold; /* Makes the text bold */
        transition: color 0.3s; /* Adds a hover effect */
    }

        .nav-center a:hover {
            color: #ffcc00; /* Changes color on hover */
        }

.nav-item {
    background-color: #1861ac;
    border-radius: 2px;
    border: 1px solid #ccc;
    padding: 0px;
    margin: 0px;
    width: 80px;
    height: 33px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 1.1rem;
    font-weight: 700;
    transition: border-color 0.2s;
}
    .navbar-logo {
        width: 200px;
        padding: 0px;
        margin: 4px;
    }

.nav-item:hover {
    border-color: #e9e935;
}

    .nav-item a {
        color: #ffffff !important;
        text-decoration: none !important;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        border-radius: 2px;
        transition: background 0.2s, color 0.2s;
    }

.nav-search {
    display: flex;
    align-items: center;
    height: 33px;
    margin: 4px;
}

.nav-search input[type="text"] {
    background-color: #1861ac;
    border: 1px solid #ccc;
    border-radius: 2px 0 0 2px;
    color: #fff;
    font-weight: 700;
    font-size: 1.1rem;
    height: 33px;
    width: 140px;
    padding: 0 8px;
    outline: none;
    transition: border-color 0.2s;
}

.nav-search input[type="text"]:focus {
    border-color: #e9e935;
}

.nav-search button[type="submit"] {
    background-color: #1861ac;
    border: 1px solid #ccc;
    border-left: none;
    border-radius: 0 2px 2px 0;
    color: #fff;
    font-weight: 700;
    font-size: 1.1rem;
    height: 33px;
    width: 33px;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.nav-search button[type="submit"]:hover,
.nav-search input[type="text"]:hover {
    border-color: #e9e935;
    background-color: #0056bf;
    color: #ffcc00;
}

/* Miscellaneous */
.faded {
    opacity: 0.4;
    pointer-events: none;
}

.centered-cell {
    text-align: center;
    vertical-align: middle;
}

.centered-paragraph {
    max-width: 400px;
    margin: 24px auto;
    text-align: center;
    font-size: 1.4rem;
    font-weight: 100;
    line-height: 1.1;
    color: #eeeeff;
}

.image-container {
    position: relative; /* Ensures .text-overlay is positioned relative to this container */
    display: inline-block;
    text-align: center;
}

.text-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 1rem;
    font-weight: bold;
    text-shadow: 1px 1px 2px black;
    pointer-events: none; /* Prevent text from interfering with the link */
}

.frontimage-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%; /* Ensures the container spans the full width */
    margin: 0 auto; /* Centers the container horizontally */
}

    .frontimage-container img {
        width: 256px;
        height: auto;
        object-fit: cover; /* Ensures the image fits within the dimensions */
        border-radius: 5px; /* Optional: Adds rounded corners */
        display: block; /* Ensures the image is treated as a block element */
    }

.banner-center {
    display: flex; /* Enables flexbox for centering */
    justify-content: center; /* Centers horizontally */
    align-items: center; /* Centers vertically */
    width: 100%; /* Ensures the container spans the full width */
    margin: 0 auto; /* Centers the container horizontally */
    text-align: center; /* Ensures text alignment is centered */
}

    .banner-center img {
        max-width: 100%; /* Ensures the image scales properly */
        height: auto; /* Maintains aspect ratio */
        display: block; /* Ensures the image is treated as a block element */
    }

/* Stats Container */
.stats-container {
    padding: 1px; /* Adds spacing inside the container */
    border-radius: 2px; /* Rounded corners for a modern look */
    margin: 0px auto; /* Centers the container and adds spacing */
    text-align: center; /* Ensures text is centered */
    font-size: 1rem; /* Slightly smaller font for compact display */
    font-family: 'Montserrat', sans-serif; /* Matches the site's font */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Adds a subtle shadow for depth */
    max-height: 88px;
}

/* Styling for statistic labels */
.stat-label {
    font-weight: bold; /* Makes the label text bold */
    margin-right: 5px; /* Adds spacing between label and result */
}

/* Styling for statistic results */
.stat-result {
    font-weight: normal; /* Keeps the result text normal */
    padding: 3px; /* Adds horizontal padding for spacing */
    margin: 3px; /* Resets margin to avoid extra spacing */
    width: 40px;
    border-radius: 2px; /* Rounded corners for results */
    background-color: #004a9e; /* Darker background for contrast with text */
    display: inline-block; /* Ensures the result is treated as a block element */
    border: 1px solid #0056bf; /* Adds a border for definition */
}
/* Base Table Styling */
.base-table {
    width: 100%;
    border-collapse: collapse; /* Removes gaps between table borders */
    background-color: #121C35; /* Dark background for the table */
    font-family: 'Montserrat', sans-serif; /* Matches the site's font */
    font-size: 1rem; /* Default font size */
    margin: 4px; /* Adds spacing above and below the table */
    padding: 4px;
}
    .base-table tr[onclick]:hover {
        background-color: #0056bf;
        color: #fff;
    }

    .base-table th, .base-table td {
        padding: 4px; /* Adds padding inside cells */
        border: 0px solid #ddd; /* Light border for separation */
        text-align: left; /* Centers text in cells */
        vertical-align: middle; /* Aligns content vertically */
    }

    .base-table th {
        background-color: #1861ac; /* Distinct header background */
        font-weight: bold; /* Emphasizes header text */
    }

    .base-table tbody tr:nth-child(even) {
        background-color: #1a2b4d; /* Alternating row color for better readability */
    }

    .base-table tbody tr:hover {
        background-color: #0056bf; /* Highlight row on hover */
        color: #ffffff; /* White text on hover */
    }

    /* Base Table Image Styling */
    .base-table img {
        max-width: 100px; /* Restricts image width */
        max-height: 100px; /* Restricts image height */
        border-radius: 3px; /* Adds rounded corners */
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5); /* Subtle shadow for images */
        display: block; /* Ensures images are block elements */
        margin: auto; /* Centers images within cells */
    }

/* Company Name Styling */
.company-name {
    display: flex; /* Ensures content is centered */
    justify-content: center; /* Centers text horizontally */
    align-items: center; /* Centers text vertically */
    width: 200px; /* Fixed width */
    height: 32px; /* Fixed height */
    border: 1px solid #333; /* Dark border */
    border-radius: 2px; /* Optional: Adds slight rounding to corners */
    background-color: #121C35; /* Optional: Matches the site's dark theme */
    color: #eeeeff; /* Light text color for contrast */
    text-align: center; /* Centers text inside the box */
    font-size: 1.1rem; /* Adjust font size as needed */
    font-weight: bold; /* Makes the text bold */
    overflow: hidden; /* Ensures long text doesn't overflow */
    text-overflow: ellipsis; /* Adds ellipsis for long text */
    white-space: nowrap; /* Prevents text from wrapping */
}

/* Center the table */
.companytable {
    border-collapse: separate; /* Ensures cells are treated as separate boxes */
    border-spacing: 5px; /* Adds spacing between cells */
    margin: 0 auto; /* Centers the table horizontally */
}

/* Style the table cells */
.companytable td {
    text-align: center; /* Centers text inside the cells */
    vertical-align: middle; /* Aligns content vertically */
    border: 1px solid #333; /* Adds a dark border */
    width: 200px; /* Fixed width for cells */
    height: 32px; /* Fixed height for cells */
    background-color: #121C35; /* Matches the site's dark theme */
    border-radius: 4px; /* Optional: Adds slight rounding to corners */
    overflow: hidden; /* Ensures content doesn't overflow */
}

/* Make the whole cell a link */
.companytable a {
    display: flex; /* Enables flexbox for centering */
    justify-content: center; /* Centers text horizontally */
    align-items: center; /* Centers text vertically */
    width: 100%; /* Ensures the link spans the full cell width */
    height: 100%; /* Ensures the link spans the full cell height */
    text-decoration: none; /* Removes underline from links */
    color: #eeeeff; /* Light text color */
    font-weight: bold; /* Makes the text bold */
    transition: background-color 0.2s, color 0.2s; /* Smooth hover effect */
}

/* Highlight the cell on hover */
.companytable a:hover {
    background-color: #0056bf; /* Highlight color */
    color: #ffffff; /* Light text color on hover */
    border-color: darkorange; /* Optional: Changes border color on hover */
}
.performer-name {
    display: inline-block;
    width: 180px;
    font-size: 1.2rem;
    margin: 4px;
    padding: 8px;
    box-sizing: border-box;
    text-align: center;
    word-break: break-word;
}
#spool-bg {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 0;
    width: 1024px; /* Adjust width as needed */
    height: 128px; /* Full viewport height */
    max-width: 90vw; /* Responsive: don't exceed viewport */
    opacity: 0.25;
    pointer-events: none; /* Ensures links above are clickable */
}