/* --- Scrollbar Styles (WebKit) --- */
::-webkit-scrollbar {
    width: 6px; /* Width of the scrollbar */
    height: 6px; /* Height of the scrollbar (for horizontal) */
}

::-webkit-scrollbar-track {
    background: #f1f1f1; /* Background of the scrollbar track */
}

::-webkit-scrollbar-thumb {
    background: var(--pico-primary); /* Color of the scrollbar thumb */
}

::-webkit-scrollbar-thumb:hover {
    background: var(--pico-primary); /* Color of the thumb on hover */
}

/* --- Utility Classes --- */

/* Primary color text */
.primary-color {
    color: var(--pico-primary) !important;
}

body {
background: #f2f2f2;
background: linear-gradient(222deg,rgba(242, 242, 242, 1) 0%, rgba(237, 222, 93, 1) 0%, rgba(46, 52, 66, 1) 0%, rgba(18, 22, 31, 1) 45%);}
/* --- General Layout --- */

/* Page container for sticky footer */
.page-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Main content area takes available space */
main {
    flex: 1;
}

/* Navigation padding */
nav {
    padding: 2em 0;
}

/* Navigation title styling */
.nav-title {
    font-size: 2em;
}

/* Gap between navigation list items */
nav ul {
    gap: 1em;
}

footer {
    margin-top:50px;
}
/* --- Table Styles --- */

/* Center align content in table cells and headers, prevent text wrapping */
td,
th {
    align-content: center;
    text-align: center !important;
    white-space: nowrap;
}

/* Padding for buttons within tables */
table button {
    padding: 0.4em 0.8em;
}

/* No padding or margin for select elements within tables */
table select {
    padding: 0;
    margin: 0;
}

/* --- Details/Summary Element Styles --- */

/* Color for the summary text in details elements */
summary {
    color: var(--pico-accordion-close-summary-color) !important;
    display:flex;
}

summary#menu-button {
    background-color: var(--pico-primary-background);
    list-style: none; /* Removes the default arrow */
    cursor: pointer; /* Changes the cursor to a pointer */
    outline: none; /* Removes the outline */
}

#menu-button::after {
    display:none
}

#menu-button img {
    filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%);
    width:35px;
}

footer {
    display:flex;
    justify-content: space-between;
}

footer p {
    display: flex;
    gap:0.5em;
}

footer p:last-child {
    gap:2em;
}