.align_center {
    text-align: center;
}

.breadcrumbs-container {
    padding: 3px 10px;
    background-color: var(--pico-muted-border-color); /* Light grey background from theme */
    border-radius: var(--pico-border-radius);
    overflow-x: auto;
    overflow-y: hidden;
}

.breadcrumbs-container nav {
    padding: 3px 10px;
}

.breadcrumbs-container nav ol {
    padding: 0;
    list-style: none;
    flex-grow: 1;
    flex-shrink: 0;
    white-space: nowrap;
}

.breadcrumbs-container nav li {
    display: inline;
    font-size: 0.85rem; /* Smaller text for compact appearance */
    margin: inherit;
}

.breadcrumbs-container nav a {
    color: var(--pico-primary); /* Primary color from theme */
    text-decoration: none;
}

.breadcrumbs-container nav li::after {
    content: '>';
    margin: 0 5px;
    color: var(--pico-muted-color); /* Muted color for icons and separators */
}

.breadcrumbs-container nav li:last-child::after {
    content: none;
}

.error, .errorlist {
    color: var(--pico-form-element-invalid-focus-color);
}

.success {
    color: var(--pico-form-element-valid-focus-color);
}

/* fallback */
@font-face {
    font-family: 'Material Symbols Outlined';
    font-style: normal;
    font-weight: 100 700;
    src: url(https://fonts.gstatic.com/s/materialsymbolsoutlined/v195/kJEhBvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oFsI.woff2) format('woff2');
}

.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    font-variation-settings: 'FILL' 0,
    'wght' 300,
    'GRAD' 0,
    'opsz' 24;
    vertical-align: middle;
    visibility: hidden; /* Hide until loaded */
}

.material-icons-loaded .material-symbols-outlined {
    visibility: visible; /* Show once loaded */
}

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

.button-wide {
    width: 100%;
    max-width: 600px; /* Ensure the button doesn't exceed 600px */
    margin: 0 auto; /* Center the button within its container */
}

.muted {
    color: var(--pico-muted-color);
}

.primary {
    color: var(--pico-primary);
}

/* Menu */
nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px; /* Adds some spacing inside the nav */
    z-index: 100;
}

nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
}


nav .menu {
    display: flex;
}

nav .hamburger {
    display: none;
    cursor: pointer;
    font-size: 24px; /* Adjust size as needed */
}

/* Media Query for smaller screens */
@media (max-width: 768px) {
    nav .hamburger {
        display: block; /* Shows the hamburger icon */
        z-index: 200;
    }

    nav .menu {
        position: absolute;
        top: 5em; /* Adjust based on the height of your nav */
        left: 0;
        width: 100%;
        padding-right: var(--pico-spacing);
        padding-left: var(--pico-spacing);
        padding-bottom: var(--pico-spacing);
        flex-direction: column;
        background-color: var(--pico-background-color); /* Background color from theme */
        display: none;
        z-index: 100;
    }

    nav .menu li {
        text-align: center; /* Centers text in dropdown */
        width: 100%;
    }

    #menu-toggle:checked + .hamburger + .menu {
        display: flex; /* Shows the menu when checkbox is checked */
    }
}

.action_badge {
    background-color: var(--pico-primary-background); /* Primary blue, adjust the color to match your theme */
    color: var(--pico-primary-inverse);
    border-radius: 50%; /* Circular badge */
    padding: 0 6px; /* Horizontal padding */
    font-size: 0.75em; /* Smaller font size for the badge */
    position: relative;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Optional: adds shadow for depth */
}

article .select {
    box-shadow: 0 0 0.35em var(--pico-primary-background);
}

.message-container {
    padding: 3px 10px;
    margin-bottom: 10px; /* Add margin to stack multiple messages */
    border-radius: var(--pico-border-radius);
    border-width: 1px;
    border-style: solid;
    background-color: var(--pico-muted-border-color); /* Common background color for all messages */
}

.message-info {
    border-color: var(--pico-primary);
    box-shadow: 0 0 0.35em var(--pico-primary);
}

.message-success {
    border-color: var(--pico-form-element-valid-active-border-color);
    box-shadow: 0 0 0.35em var(--pico-form-element-valid-active-border-color);
}

.message-error {
    border-color: var(--pico-form-element-invalid-active-border-color);
    box-shadow: 0 0 0.35em var(--pico-form-element-invalid-active-border-color);
}

.logo {
    height: 3.5em;
    display: inline;
}

.grid-container {
    display: flex;
    flex-direction: column;
    gap: 17px; /* Vertical gap between grid rows */
}

.flex-container {
    display: flex;
    flex-direction: column; /* Stack items on small screens */
    gap: 10px; /* Space between elements */
}

.info-section {
    flex: 1;
}

.button-section {
    display: flex;
    justify-content: center;
    align-items: center;
    height: auto; /* Ensure full height on larger screens */
}

.flex-button {
    max-width: 200px;
    width: auto;
    text-align: center;
    margin: 1px;
}

.flex-button-wide {
    width: 100%;
}

@media (min-width: 768px) {
    .flex-container {
        flex-direction: row; /* Arrange items in a row on larger screens */
        align-items: stretch; /* Stretch the container to full height */
    }

    .info-section {
        flex: 1;
    }

    .button-section {
        justify-content: flex-start;
        align-items: center;
        height: 100%; /* Ensure the button section takes up full height */
    }

    .flex-button-wide {
        width: auto;
    }

    .disabled_button {
        opacity: .5;
        pointer-events: none;
    }

}

/* Badge Styles */
.badge {
    display: inline-block;
    padding: 0.4em 0.8em;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    border-radius: var(--pico-border-radius);
    margin-right: 5px;
}

/* Colors for different states */
.badge-active {
    background-color: var(--pico-primary-background); /* Using the primary background color */
    color: var(--pico-primary-inverse); /* Inverse text color for primary background */
}

.badge-deactivated {
    background-color: var(--pico-muted-border-color); /* Muted color for deactivated */
    color: var(--pico-muted-color); /* Muted text color */
}

.badge-admin {
    background-color: var(--pico-secondary-background); /* Secondary background for admin */
    color: var(--pico-secondary-inverse); /* Inverse text color for secondary background */
}

.badge-owner {
    background-color: var(--pico-contrast-background); /* Contrast background for owner */
    color: var(--pico-contrast-inverse); /* Inverse text color for contrast */
}


.action_button {
    transition: background-color 0.2s linear; /* Smooth background color transition */
}

@keyframes loader-progress {
    0% {
        background-size: 0 100%;
    }
    100% {
        background-size: 100% 100%;
    }
}

.action_button.pressed {
    background-image: linear-gradient(to right, var(--pico-color-green-350) 100%, transparent 0%);
    background-size: 0% 100%;
    background-repeat: no-repeat;
    animation: loader-progress 3s linear forwards; /* Animate background from left to right over 3s */
}

@keyframes blinker {
    from {
        background-color: var(--pico-color-red-650);
    }
    /* Default color */
    to {
        background-color: var(--pico-color-red-350);
    }
    /* Red color */
}

.action_button.flash-red {
    animation-name: blinker;
    animation-duration: 0.05s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    animation-direction: alternate;
    background-color: var(--pico-color-red-650);
    transition: background-color 0.5s ease-out;
}

/* Select 2 styles */
/* Remove the height:auto to let it adjust dynamically */
.select2-container--default .select2-selection--single {
    background-color: var(--pico-background-color);
    border: var(--pico-border-width) solid var(--pico-form-element-border-color);
    border-radius: var(--pico-border-radius);
    padding: calc(var(--pico-form-element-spacing-horizontal) + 0.5rem) calc(var(--pico-form-element-spacing-horizontal) + 0.5rem) calc(var(--pico-form-element-spacing-horizontal) + 0.5rem) 0;
    box-shadow: var(--pico-box-shadow);
    color: var(--pico-color);
    display: flex;
    align-items: center;
}

/* Fix the arrow positioning */
.select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 50%;
    transform: translateY(-50%); /* Center the arrow vertically */
    position: absolute;
    margin-right: 0.5rem;
}

/* Focus and hover states for highlighting */
.select2-container--default .select2-selection--single:focus,
.select2-container--default .select2-selection--single:hover {
    border-color: var(--pico-form-element-border-color);
    box-shadow: 0 0 0 3px rgba(100, 150, 250, 0.5); /* Add a nice focus ring */
    outline: none;
}

/* Dropdown styling for consistency */
.select2-container--default .select2-dropdown {
    background-color: var(--pico-background-color);
    border: var(--pico-border-width) solid var(--pico-form-element-border-color);
    border-radius: var(--pico-border-radius);
    box-shadow: var(--pico-box-shadow);
    color: var(--pico-color);
}

/* Placeholder text styling */
.select2-container--default .select2-selection__placeholder {
    color: var(--pico-form-element-placeholder-color);
    opacity: 1; /* Ensure placeholder is visible */
}

/* Padding for dropdown items */
.select2-container--default .select2-results__option {
    padding: 0.5rem;
}

/* Adjust Select2 placeholder and search area */
.select2-container--default .select2-search--dropdown .select2-search__field {
    border-radius: var(--pico-border-radius);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--pico-primary);
}


[type=search] {
    --pico-border-radius: inherit;
}


/* FULL CALENDER CUSTOMIZATIONS */
/* Make the event title smaller */
.fc-event-title {
    font-size: 0.8em; /* Reduce the font size to 0.8em */
    white-space: normal; /* Allow text to wrap onto the next line */
    word-wrap: break-word; /* Ensure long words break if needed */
}

/* For dayGrid views (month and week), ensure event text is wrapped */
.fc-daygrid-event .fc-event-title {
    overflow: visible; /* Ensure text isn't clipped */
    text-overflow: clip; /* Prevent ellipses from showing */
}

/* For list views, also reduce the font size */
.fc-list-item-title {
    font-size: 0.8em; /* Make the list view event titles smaller */
    white-space: normal; /* Allow wrapping in the list view */
    word-wrap: break-word; /* Break long words in the list view */
}

/* If you want the entire event to have reduced text size, you can also target the entire event */
.fc-event {
    font-size: 0.8em; /* Apply the font size to all event content */
}

/* Optionally, style adjustments for how the events look when hovered */
.fc-event:hover {
    background-color: var(--pico-secondary); /* Change background color on hover, using Pico CSS variable */
    cursor: pointer; /* Show pointer cursor on hover */
}

/* Ensure the tooltip (via Pico CSS) is shown properly */
.fc-event[data-tooltip]:hover::after {
    white-space: normal; /* Ensure tooltip content wraps correctly */
}

/* Optional: Ensure that list view text and any overflow are handled */
.fc-list-event:hover {
    overflow: visible;
}


.fc-toolbar.fc-header-toolbar {
    display: flex;
    justify-content: space-between; /* Title on the left, buttons on the right */
    flex-wrap: wrap; /* Allow buttons to wrap onto the next line */
    align-items: center; /* Vertically center the title and buttons */
}

/* Ensure the button group stays aligned to the right, even after wrapping */
.fc-toolbar-chunk {
    display: flex;
    justify-content: flex-end;  /* Align buttons to the right */
    flex-grow: 1;  /* Ensure the buttons take up available space and push to the right */
}

/* Add space between buttons in a group */
.fc-button-group {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10px; /* Space between rows if wrapping */
}

/* Ensure title stays to the left */

.fc .fc-toolbar-title {
    flex-grow: 0;  /* Make sure the title doesn't push the buttons down when wrapping */
    text-align: left; /* Ensure the title is aligned to the left */
    margin-right: auto;  /* Push the title to the left */
    margin-bottom: 10px;

}


.fc .fc-list-day-text,
.fc .fc-list-day-side-text,
.fc .fc-daygrid-day-number,
.fc .fc-col-header-cell-cushion {
    text-decoration: none; !important;
}