/* --- Main Site Styles --- */

.main-content {
    margin-top: 2rem;
}

h1, h2, h3, h4, h5 {
    font-family: 'Sora', sans-serif;
    font-weight: 700; /* 400 is normal, 700 is bold */
}

/* Apply Roboto to the main body text */
body {
    font-family: 'Sora', sans-serif;
}

/* --- General Table Styles --- */
.stat-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.5rem;
}

.stat-table td {
    border: 1px solid #e6e6e6;
    text-align: center;
    padding: 0.5rem;
    width: 10%; /* Ensure cells are evenly spaced */
}

.stat-table .stat-number {
    display: block;
    font-weight: bold;
    font-size: 1.2rem;
}

.stat-table .stat-value {
    display: block;
    font-size: 0.9rem;
    color: #8a8a8a;
}

/* Style for least drawn numbers */
.stat-table .least-drawn .stat-number {
    background-color: #32CD32 !important; /* Green as requested */
    color: white;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    line-height: 35px;
    margin: 0 auto 0.2rem;
}

/* Style for coldest numbers */
.stat-table td.coldest-number span.stat-number {
    background-color: #1779ba !important; /* Foundation primary blue */
    color: white !important;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    line-height: 35px;
    margin: 0 auto 0.2rem;
}

/* Style for winning numbers in user tickets */
.winning-number {
    background-color: #32CD32 !important; /* Green as requested */
    color: white;
    font-weight: bold;
}

/* Style for sortable table headers */
thead th a {
    color: #1779ba; /* Foundation primary color */
    font-weight: bold;
}

thead th a:hover {
    text-decoration: underline;
}

/* Adjust vertical alignment for logged-in username with logout button */
.logged-in-as {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    display: flex;
    align-items: center;
}

/* Add some right margin to separate it from the button */
.top-bar-right .menu li:first-child {
    margin-right: 0.5rem;
}

/* --- Number Preferences Slider Redesign --- */

.preference-box {
    border: 1px solid #cce6ff; /* Light blue border */
    border-radius: 8px; /* Slightly more rounded corners */
    padding: 0; /* Remove padding here, header will have it */
    margin-bottom: 1.5rem;
    background-color: #fefefe; /* White background for the main box */
    overflow: hidden; /* Ensures header corners are respected */
}

/* Override Foundation's .cell padding when it's also a .preference-box */
.cell.preference-box {
    padding-left: 0;
    padding-right: 0;
}

.preference-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; /* Allow items to wrap on smaller screens */
    background-color: #379eff; /* Darker blue as requested */
    color: white;
    padding: 0.75rem 1rem; /* Keep internal padding for text/switch */
    margin: 0; /* Remove any default margins that might be pushing it in */
    width: 100%; /* Ensure it takes full width of its parent */
    box-sizing: border-box; /* Include padding in width calculation */
    border-top-left-radius: 8px; /* Match outer box radius */
    border-top-right-radius: 8px; /* Match outer box radius */
}

.preference-header h5 {
    color: white; /* Ensure title is white */
    margin-bottom: 0; /* Remove default margin from h5 */
    font-size: 1.1rem; /* Adjust font size as needed */
    flex-grow: 1; /* Allow title to take available space */
    margin-right: 1rem; /* Space between title and switch */
}

.preference-header .switch {
    flex-shrink: 0; /* Prevent switch from shrinking */
    margin-bottom: 0; /* Remove default margin from switch */
}

.slider-description-header {
    color: white; /* Description text within the header */
    font-size: 0.85rem;
    margin-top: 0.25rem; /* Space from title/toggle */
    margin-bottom: 0; /* Remove default paragraph margin */
    flex-basis: 100%; /* Make description take full width below title/toggle */
    text-align: left; /* Align description left */
    padding-top: 0.25rem; /* Small padding from the elements above */
}

.slider-with-value {
    display: flex;
    align-items: center; /* Vertically align slider and value */
    padding: 1rem; /* Uniform padding inside the preference box, below the header */
    padding-top: 0; /* Remove top padding to reduce space from header */
    margin-bottom: 0; /* Remove default margin */
}

.slider-with-value .slider {
    flex-grow: 1; /* Allow slider to take up available space */
    margin-right: 1rem; /* Space between slider and value */
    margin-bottom: 0; /* Override default slider margin */
    /* Removed default Foundation slider padding to align it to the left edge */
    padding-left: 0;
    padding-right: 0;
    /* Custom track background for markers */
    background-image: linear-gradient(to right,
        #e6e6e6 0%, #e6e6e6 10%, /* Marker for 1 */
        transparent 10%, transparent 15%,
        #e6e6e6 15%, #e6e6e6 20%, /* Marker for 2 */
        transparent 20%, transparent 25%,
        #e6e6e6 25%, #e6e6e6 30%, /* Marker for 3 */
        transparent 30%, transparent 35%,
        #e6e6e6 35%, #e6e6e6 40%, /* Marker for 4 */
        transparent 40%, transparent 45%,
        #e6e6e6 45%, #e6e6e6 50%, /* Marker for 5 */
        transparent 50%, transparent 55%,
        #e6e6e6 55%, #e6e6e6 60%, /* Marker for 6 */
        transparent 60%, transparent 65%,
        #e6e6e6 65%, #e6e6e6 70%, /* Marker for 7 */
        transparent 70%, transparent 75%,
        #e6e6e6 75%, #e6e6e6 80%, /* Marker for 8 */
        transparent 80%, transparent 85%,
        #e6e6e6 85%, #e6e6e6 90%, /* Marker for 9 */
        transparent 90%, transparent 95%,
        #e6e6e6 95%, #e6e6e6 100% /* Marker for 10 */
    );
    background-size: 10% 100%; /* Each marker segment is 10% width */
    background-repeat: no-repeat;
    background-position: left center;
}

/* Style for the slider fill to also show markers */
.custom-slider .slider-fill {
    background-image: linear-gradient(to right,
        #cacaca 0%, #cacaca 10%, /* Marker for 1 */
        transparent 10%, transparent 15%,
        #cacaca 15%, #cacaca 20%, /* Marker for 2 */
        transparent 20%, transparent 25%,
        #cacaca 25%, #cacaca 30%, /* Marker for 3 */
        transparent 30%, transparent 35%,
        #cacaca 35%, #cacaca 40%, /* Marker for 4 */
        transparent 40%, transparent 45%,
        #cacaca 45%, #cacaca 50%, /* Marker for 5 */
        transparent 50%, transparent 55%,
        #cacaca 55%, #cacaca 60%, /* Marker for 6 */
        transparent 60%, transparent 65%,
        #cacaca 65%, #cacaca 70%, /* Marker for 7 */
        transparent 70%, transparent 75%,
        #cacaca 75%, #cacaca 80%, /* Marker for 8 */
        transparent 80%, transparent 85%,
        #cacaca 85%, #cacaca 90%, /* Marker for 9 */
        transparent 90%, transparent 95%,
        #cacaca 95%, #cacaca 100% /* Marker for 10 */
    );
    background-size: 10% 100%; /* Each marker segment is 10% width */
    background-repeat: no-repeat;
    background-position: left center;
    height: 100%; /* Ensure fill covers the track */
    border-radius: 5px; /* Match slider handle/track radius */
}

/* Adjust slider handle position to align with the start of the track */
.custom-slider .slider-handle {
    margin-left: -0.75rem; /* Adjust this value to visually align the handle's center with the start of the track */
}

.slider-value-display {
    min-width: 2.5rem; /* Increased width for value display */
    text-align: center;
    background-color: #1779ba; /* Blue background for the value label */
    color: white;
    border-radius: 4px;
    padding: 0.2rem 0.5rem;
    /* Fine-tune vertical alignment of the value display with the slider */
    display: flex; /* Make it a flex item */
    align-items: center; /* Vertically center content */
    justify-content: center; /* Horizontally center content */
    height: 1.5rem; /* Match the height of the slider track/handle for better alignment */
    line-height: 1; /* Reset line-height to prevent extra vertical space */
}

/* --- Suggested Numbers Redesign --- */
.suggested-numbers-box {
    border-radius: 8px; /* Rounded corners for the containing box */
    padding: 1rem; /* Padding inside the box */
    margin-bottom: 1.5rem; /* Space below the box */
    background-color: #e0f2f7; /* Light background for the box */
    display: flex; /* Use flexbox for horizontal alignment */
    align-items: center; /* Vertically center content */
    justify-content: space-between; /* Space out title and numbers */
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
}

.suggested-numbers-title {
    margin-top: 0; /* Remove default h4 margin-top */
    margin-bottom: 0; /* Remove default h4 margin-bottom */
    color: #333; /* Darker text for the title */
    font-size: 1.2rem; /* Adjust font size as needed */
    flex-shrink: 0; /* Prevent title from shrinking */
    margin-right: 1rem; /* Space between title and numbers */
}

.suggested-numbers-list {
    display: flex; /* Use flexbox for the list of numbers */
    align-items: center; /* Vertically center the circles */
    flex-wrap: wrap; /* Allow numbers to wrap if too many */
    gap: 0.5rem; /* Space between numbers */
}

.suggested-number-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px; /* Size of the circle */
    height: 40px; /* Size of the circle */
    border-radius: 50%; /* Make it a circle */
    background-color: white; /* White background */
    color: black; /* Black text */
    font-weight: bold;
    font-size: 1.1rem;
    border: 1px solid #ccc; /* Optional: light border for definition */
    flex-shrink: 0; /* Prevent circles from shrinking */
}

.no-suggestions-msg {
    color: #555; /* Slightly darker text for the message */
    font-style: italic;
}

/* --- Delete Account Button Redesign --- */
.delete-account-box {
    padding: 1rem; /* Ensure padding inside the alert callout */
    border-radius: 8px; /* Match other rounded corners */
}

.delete-account-box p {
    margin-bottom: 0; /* Remove default paragraph margin */
    line-height: 1.5; /* Ensure text is well-spaced */
}

.delete-account-box .button {
    margin-left: 1rem; /* Space between text and button */
    flex-shrink: 0; /* Prevent button from shrinking */
}

/* --- Dashboard Tab Styling --- */

/* Style for all tab titles */
.tabs-title > a {
    background-color: #e6e6e6; /* Light grey for inactive tabs */
    color: #444; /* Darker text */
    padding: 1rem 1rem;
}

/* Style for the currently active tab title */
.tabs-title.is-active > a {
    background-color: #ffffff; /* White for the active tab */
    color: #1779ba; /* Blue text */
}

/* Optional: Change hover effect */
.tabs-title > a:hover {
    background-color: #f0f0f0; /* Slightly lighter grey on hover */
}

/* --- Number Preferences Header Styling --- */

.preference-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.preference-page-header-text h3 {
    margin-bottom: 0.25rem;
}

.preference-page-header-text p {
    margin-bottom: 0;
    color: #8a8a8a;
}

/* --- Info Tooltip Icon Styling --- */
.info-icon {
    font-size: 1rem;
    color: #1779ba; /* Foundation primary blue */
    margin-left: 0.5rem;
    cursor: help; /* Changes the cursor to a question mark on hover */
}

/* Fix for pale input text */
.preference-content-body input[type="text"] {
    color: #0a0a0a; /* Black text color */
}

/* Adds specific padding for non-slider content */
.preference-box.fav-numbers .preference-content-body {
    padding-top: 0.5rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-bottom: 0.5rem;
}

/* Adds spacing between items in the top bar menu */
.top-bar-right .menu > li + li {
    margin-left: 1rem;
}

.top-bar, .top-bar ul {
    background-color: #20257D;
}

.top-bar a {
    color: #FFFFFF;
}

.top-bar a:hover {
    color: #CCCCCC; /* A slightly dimmer white for hover effect */
}

body {
    background-color: #E5E9FF;
}

.callout {
    border: none;
}
.top-bar .button.admin-button {
    background-color: #E5E9FF;
    color: #001BBA; /* Dark blue text for contrast */
}

.top-bar .button.admin-button:hover {
    background-color: #d1d8ff; /* A slightly darker shade for the hover effect */
}

.logged-in-as {
    color: #FFFFFF;
}

.callout {
    border-radius: 9px 0 9px 9px;
}

.button {
    border-radius: 9px 0 9px 9px;
}

.top-bar .menu-text {
    color: #FFFFFF;
}

.top-bar .button.logout-button {
    background-color: #C9E300;
    color: #000000; /* Black text for better contrast */
}

.top-bar .button.logout-button:hover {
    background-color: #b8cf00; /* A slightly darker shade for the hover effect */
}

.tabs-content {
    border-radius: 0 9px 9px 9px;
    border: none;
}

/* --- Custom Admin Tab Styles --- */

/* Remove background and border from the main tab container */
#admin-tabs.tabs {
    background-color: transparent;
    border: none;
    border-radius: 0 9px 9px 9px;
}

/* Style for the inactive tabs */
#admin-tabs.tabs .tabs-title > a {
    background-color: #1779ba; /* Your specified inactive color */
    color: #FFFFFF; /* White text for readability */
        border-radius: 9px 9px 0 0;

}

/* Style for the active tab */
#admin-tabs.tabs .tabs-title.is-active > a {
    background-color: #FFFFFF; /* White background for the active tab */
    color: #1779ba; /* Blue text to match the inactive tabs */
}

/* Optional: Add a hover effect for inactive tabs */
#admin-tabs.tabs .tabs-title > a:hover {
    background-color: #1468a0; /* A slightly darker blue on hover */
}

/* Hides arrows in Chrome, Safari, Edge, and Opera */
#add-draw-form input[type="number"]::-webkit-outer-spin-button,
#add-draw-form input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* --- Custom Dashboard Tab Styles --- */

/* Remove background and border from the main tab container */
#dashboard-tabs.tabs {
    background-color: transparent;
    border: none;
    border-radius: 0 9px 9px 9px;
}

/* Style for the inactive tabs */
#dashboard-tabs.tabs .tabs-title > a {
    background-color: #1779ba; /* Your specified inactive color */
    color: #FFFFFF; /* White text for readability */
        border-radius: 9px 9px 0 0;

}

/* Style for the active tab */
#dashboard-tabs.tabs .tabs-title.is-active > a {
    background-color: #FFFFFF; /* White background for the active tab */
    color: #1779ba; /* Blue text to match the inactive tabs */
}

/* Optional: Add a hover effect for inactive tabs */
#dashboard-tabs.tabs .tabs-title > a:hover {
    background-color: #1779ba; /* A slightly darker blue on hover */
}

/* Hides arrows in Chrome, Safari, Edge, and Opera */
#add-draw-form input[type="number"]::-webkit-outer-spin-button,
#add-draw-form input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Custom styles for mobile menu alignment */
.title-bar-right {
    width: 100%;
    display: flex;
    justify-content: flex-end;
}

/* Optional: LottoOnline hover effect */
.LottoOnline > a:hover {
    color: #ffa492; /* A slightly dimmer white for hover effect */
}

/* Optional: LottoOnline hover effect */
li.LottoOnline a {
    color: #F54927; /* A slightly dimmer white for hover effect */
     font-weight: bold;
}

/* Footer Styles */
footer {
    background-color: #1c1c1c; /* Match top-bar */
    color: #fefefe;
    padding: 1rem;
    margin-top: 12px; /* This adds the spacing above the footer */
}
footer p {
    margin-bottom: 0;
}
footer a {
    color: #87ceeb;
}
footer a:hover {
    color: #ffffff;
}

/* Mobile-specific styles for the footer */
@media screen and (max-width: 39.9375em) { /* Foundation's small screen breakpoint */
    footer p {
        display: flex;
        flex-direction: column; /* Stack the items vertically */
        align-items: center;   /* Center them within the footer */
        font-size: 0.875rem;   /* Reduce font size slightly */
    }
    footer p span:first-child {
        margin-bottom: 0.5rem; /* Add space between the two lines */
    }
}

/* Hide the spinners on number input fields within the Add Ticket tab */
#add_tix input[type=number]::-webkit-inner-spin-button, 
#add_tix input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none;
    margin: 0; 
}

#add_tix input[type=number] {
    -moz-appearance: textfield; /* For Firefox */
}

/* This style adds the vertical line between the Freq and Num columns */
/* It can be moved to your mainStyles.css file if you prefer */
.frequency-table .freq-col {
    border-right: 1px solid #e6e6e6; /* Standard Foundation table border color */
}

/* Styles for the Frequency of Each Number table */
.freq-circle {
    display: inline-block;
    width: 28px;
    height: 28px;
    line-height: 28px;
    border-radius: 50%;
    color: #fefefe;
    text-align: center;
    font-weight: bold;
}

.freq-lowest {
    background-color: #F54927;
}

.freq-mid-top {
    background-color: #8a8a8a;
}

.freq-mid-bottom {
    background-color: #71D6F0;
}

.freq-highest {
    background-color: #1779ba;
}

/* Styles for the Frequency of Each Number table */

/* This styles the circle around the lottery number */
.freq-circle {
    display: inline-block;
    width: 28px;
    height: 28px;
    line-height: 28px;
    border-radius: 50%;
    background-color: #fefefe; /* White background */
    color: #1c1c1c;           /* Black text */
    text-align: center;
    font-weight: bold;
}

/* These classes set the background color for the table cells */
/* --- Styles for Frequency Table Key & Highlights --- */

/* This styles the key and adds the gap below it */
.frequency-key {
    margin-bottom: 1rem;
    display: flex;
    gap: 1.5rem;
    font-size: 0.9rem;
}

/* These general rules now apply to BOTH the table cells and the key boxes */
.freq-highest {
    background-color: #1779ba !important; /* Blue */
}

.freq-lowest {
    background-color: #F54927 !important; /* Red */
}

/* These rules remain specific to table cells as they aren't used in the key */
td.freq-mid-top { background-color: #8a8a8a; }
td.freq-mid-bottom { background-color: #71D6F0; }

/* This ensures the frequency number itself is black for readability */
td.freq-col {
    color: #1c1c1c;
    font-weight: bold;
}

/* Styles for the Frequency Table Key */
.key-color-box {
    display: inline-block;
    width: 25px;
    height: 15px;
    margin-right: 8px;
    vertical-align: middle;
    border: 1px solid #cacaca;
}

/* Custom styling for the main brand link in the top menu */
.lotto-brand {
    color: #F54927 !important;
    font-weight: bold;
}

.lotto-brand:hover {
    color: #F58B76 !important;
}

/* Custom style for the user greeting in the top bar */
.top-bar .top-bar-right .menu-item.user-greeting {
  color: #FFFFFF; /* This is the hex code for white */
  font-weight: bold; /* Optional: makes the text stand out a bit more */
}

/* Styles for the Variance column in the admin stats table */
.variance-pos {
    color: #F54927; /* Red for positive variance */
    font-weight: bold;
}

.variance-neg {
    color: #11A843; /* Green for negative variance */
    font-weight: bold;
}

.winning-number-cell {
    position: relative;
    text-align: center;
    color: white; /* Make the text white for contrast */
}

.winning-number-cell::before {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2.2rem; /* Adjust size as needed */
    height: 2.2rem; /* Adjust size as needed */
    margin: -1.1rem 0 0 -1.1rem; /* Center the circle */
    background-color: #F54927;
    border-radius: 50%;
    z-index: -1;
}

.winning-number-cell:empty::before {
    content: none;
}

.frequency-table.multi-column th.divider,
.frequency-table.multi-column td.divider {
    border-left: 1px solid #000;
}

.table-scroll {
    overflow-x: auto;
    border: 1px solid #e6e6e6;
}

.score-breakdown-table {
    width: 200%; /* Make the table wider than its container to force scroll */
    margin-bottom: 0;
}

.score-breakdown-table th:first-child,
.score-breakdown-table td:first-child,
.score-breakdown-table tfoot td:first-child {
    position: sticky;
    left: 0;
    background-color: #f1f1f1;
    z-index: 10;
}

.score-breakdown-table tfoot {
    background-color: #e6e6e6;
    font-size: 0.9em;
}

/* Two-column grid container for the parameter list */
.vector-param-grid {
    display: grid;
    /* Creates two equal-width columns */
    grid-template-columns: .5fr .5fr;
    /* Adds space between grid columns and rows */
    gap: .5rem;
    margin-top: .5rem;
}

/* Individual parameter item */
.vector-param-item {
    display: flex;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid #e6e6e6;
}

/* Removes the line from the very last items in the grid */
.vector-param-grid > .vector-param-item:nth-last-child(-n+2) {
    border-bottom: none;
}

/* Checkbox and label positioning */
.vector-param-item input[type="checkbox"] {
    /* Ensures the checkbox is aligned with the text */
    vertical-align: middle;
    margin-right: 0.5rem;
}

.vector-param-item label {
    flex-grow: 1; /* Allows the label to take up available space */
    /* This makes the label a flex container to manage the text and badge */
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Styles for the intensity badge */
.intensity-badge {
    padding: 0.15rem 0.4rem;
    font-size: 0.8rem;
    font-weight: bold;
    border-radius: 4px;
    color: #fff;
    white-space: nowrap;
    /* Pushes the badge to the right */
    margin-left: auto;
    /* Ensures the badge does not shrink */
    flex-shrink: 0;
}

.intensity-badge.low {
    background-color: #3adb76; /* Green */
}

.intensity-badge.medium {
    background-color: #FFBF00; /* Amber */
    color: #111; /* Darker text for readability */
}

.intensity-badge.high {
    background-color: #cc4b37; /* Red */
}

/* Media query for smaller screens */
@media (max-width: 767px) {
    .vector-param-grid {
        /* Reverts to a single column on mobile devices */
        grid-template-columns: 1fr;
    }
}

/* Center items and style the box for Vector Calc parameters */
.vector-param-item {
    display: flex;
    align-items: center;
    border: 1px solid #e6e6e6; /* Adds a light grey border */
    border-radius: 5px;       /* This creates the curved corners */
    padding: 0.75rem;         /* Adds some space inside the box */
    margin-bottom: 0.5rem;    /* Adds a little space between each box */
    background-color: #9ad8e7;
}

/* Styling for winning tickets in the admin "My Tix" table */
tr.ticket-winner {
    background-color: #fdf2d1; /* A light yellow background for winning rows */
    font-weight: bold;
}

td.matching-number {
    background-color: #2ECC71; /* A green background for matched numbers */
    color: white;
    border-radius: 50%;
    font-weight: bold;
}

/* Styling for the "Winner" label in the My Tix table */
.label.success {
    font-weight: bold;
}

.summary-box-info {
    background-color: #99d7f7; /* A light blue background */
    border: 1px solid #cceeff;
    border-radius: 5px; /* This creates the curved corners */
}
/* --- Definitive Navigation & Layout Fixes --- */

/* 1. Main Nav Bar Styling */
#main-nav {
    background-color: #20257D; /* Your dark blue color */
    padding: 0; /* Remove default padding */
}
#main-nav .menu, 
#main-nav .menu-text {
    background-color: transparent;
}
#main-nav a, 
#main-nav li {
    color: #FFFFFF;
}
#main-nav a:hover {
    color: #CCCCCC;
}

/* 2. Desktop Menu Alignment */
@media screen and (min-width: 40em) { /* Foundation's medium breakpoint */
    #main-nav .menu {
        display: flex;
        width: 100%;
        padding: 0 1rem; /* FIX: Apply padding here */
    }
    .push-right {
        margin-left: auto;
    }
    #main-nav .menu > li {
        display: flex;
        align-items: center;
    }
    #main-nav .menu .push-right ~ li {
        margin-left: 1rem;
    }
}

/* 3. Mobile (Drilldown) Menu Styling */
.is-drilldown {
    background: #20257D !important; /* Force the dark blue background */
    width: 100%;
}
.is-drilldown .menu {
    display: block; /* Force menu to stack vertically */
}
.is-drilldown li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.is-drilldown a {
    background: transparent !important;
}
.is-drilldown .button {
    width: 100%;
    text-align: left;
    margin: 0;
    padding-left: 1rem;
    background-color: transparent !important;
}

/* 4. Full-Width Footer Fix */
footer {
    max-width: 100%;
}

/* Fullscreen Chart Modal */
.reveal.full {
    top: 0 !important;
    left: 0 !important;
    width: 100%;
    height: 100%;
    max-width: 100vw;
    border: 0;
    border-radius: 0;
    /* Add a background color to ensure chart is visible */
    background-color: #fefefe; 
}

.chart-modal-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    z-index: 10;
    background-color: rgba(245, 245, 245, 0.9); /* A light, semi-transparent background */
}
.chart-modal-body {
    padding: 60px 1rem 1rem 1rem; /* Padding to clear the header */
    height: 100%; /* Make the body take up the full modal height */
}
/* This is the key fix to give the canvas a size */
#modalVectorChart {
    height: 95% !important; /* Force it to take up most of the body height */
    width: 100%;
}

/* Ensure the chart modal body and canvas fill the available space */
.chart-modal-body,
#modalVectorChart {
    height: 100%;
    width: 100%;
    position: relative; /* Required for Chart.js to calculate size */
}

.matching-number-circle {
    display: inline-block;
    width: 2.3em;  /* Adjust size as needed */
    height: 2.3em; /* Must be equal to width */
    line-height: 2.3em; /* Vertically centers the text */
    
    background-color: #3adb76;
    color: #ffffff;
    font-weight: bold;
    text-align: center;
    
    border-radius: 50%; /* This makes it a circle */
}

.table-scroll-wrapper {
    overflow-x: auto; /* Adds a horizontal scrollbar only when needed */
    -webkit-overflow-scrolling: touch; /* Ensures smooth scrolling on iOS devices */
    padding-bottom: 10px; /* Adds a little space below the scrollbar */
}

.top-bar-logo {
    height: 30px; /* Adjust height as needed */
    width: auto;
    vertical-align: middle; /* Aligns the logo with the menu text */
}

.title-bar-logo {
    height: 32px; /* Matches your favicon size */
    width: auto;
    vertical-align: middle; /* Aligns the logo with the hamburger icon */
}