/* Be sure to update the version in the inclusion file to break the caching */
/*PICO Overrides*/
:root {
    --pico-font-family-sans-serif: Inter, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, Helvetica, Arial, "Helvetica Neue", sans-serif, var(--pico-font-family-emoji);
    --pico-font-size: 87.5%;
    /* Original: 100% */
    --pico-line-height: 1.25;
    /* Original: 1.5 */
    --pico-form-element-spacing-vertical: 0.5rem;
    /* Original: 1rem */
    --pico-form-element-spacing-horizontal: 1.0rem;
    /* Original: 1.25rem */
    --pico-border-radius: 0.375rem;
    /* Original: 0.25rem */
}


@media (min-width: 576px) {
    :root {
        --pico-font-size: 87.5%;
        /* Original: 106.25% */
    }
}

@media (min-width: 768px) {
    :root {
        --pico-font-size: 87.5%;
        /* Original: 112.5% */
    }
}

@media (min-width: 1024px) {
    :root {
        --pico-font-size: 87.5%;
        /* Original: 118.75% */
    }
}

@media (min-width: 1280px) {
    :root {
        --pico-font-size: 87.5%;
        /* Original: 125% */
    }
}

@media (min-width: 1536px) {
    :root {
        --pico-font-size: 87.5%;
        /* Original: 131.25% */
    }
}

h1,
h2,
h3,
h4,
h5,
h6 {
    --pico-font-weight: 600;
    /* Original: 700 */
}

article {
    border: 1px solid var(--pico-muted-border-color);
    /* Original doesn't have a border */
    border-radius: calc(var(--pico-border-radius) * 2);
    /* Original: var(--pico-border-radius) */
}

article > footer {
    border-radius: calc(var(--pico-border-radius) * 2);
    /* Original: var(--pico-border-radius) */
}

/* Site Layout */
.sidebar {
    display: flex;
    flex-direction: column;
    height: 100%;
    position: sticky;
    top: 0;
    max-height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
}


/* Show elements only on small screens (width < 1080px) */
.small-screen-only {
    display: none;
}

@media (max-width: 1079px) {
    .small-screen-only {
        display: block;
    }
    .large-screen-only {
        display: none !important;
    }
}

/* Show elements only on large screens (width >= 1080px) */
@media (min-width: 1080px) {
    .site-layout {
        min-height: 100vh;
        display: grid;
        grid-template-columns: 200px 1fr;
    }

    .small-screen-only {
        display: none !important;
    }
    .large-screen-only {
        display: block;
    }
}

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

.text-secondary {
    color: var(--pico-secondary) !important;
}

.text-success {
    color: var(--pico-ins-color) !important;
}

.text-danger,
.text-error {
    color: var(--pico-del-color) !important;
}

.text-warning {
    color: var(--pico-color-amber-500) !important;
}

.text-info {
    color: var(--pico-color-azure-500) !important;
}

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

/* Table Overflow control - ~doesn't work with container fluid~*/

.overflow-auto > table th:first-child,
.overflow-auto > table td:first-child {
    position: sticky;
    left: 0;
    background: var(--pico-background-color);
}

.overflow-auto > table {
    font-size: 0.875rem;
}

.overflow-auto > table td, figure table th {
    /*padding: 0.5rem;*/
}

/*General Styles*/
.menu {
    width: 250px;
    padding: 1rem;
    overflow-y: auto;
    overflow-x: hidden;
}

#close-menu-button {
    width: 0;
    height: 0;
    position: absolute;
    z-index: -1;
}

.divider {
    margin: 2px 12px;
    background: grey;
    height: 1px;
}

.nowrap {
    text-wrap: nowrap;
}

.pt-color {
    color: #0068b9;
}

.pd-color {
    color: #d00e00;
}

.rh-color {
    color: #006104;
}

.nav-button {
    position: relative;
    overflow: hidden;
}

.nav-icon {
    transition: opacity 0.3s ease, transform 0.3s ease;
    display: inline-block;
}

.nav-icon.logo {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}

.nav-icon.bars {
    opacity: 0;
    transform: scale(0.8) rotate(-90deg);
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -16px;
    margin-top: -16px;
}

.nav-button:hover .nav-icon.logo {
    opacity: 0;
    transform: scale(0.8) rotate(90deg);
}

.nav-button:hover .nav-icon.bars {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}

@media (prefers-color-scheme: dark) {
    .pt-color {
        color: #6db0ff;
    }

    .pd-color {
        color: #ff8f90;
    }

    .rh-color {
        color: #1fffb5;
    }
}

form a {
    margin-bottom: auto;
}

@media print {
    /* Hide elements not needed for printing */
    .print:hidden {
        display: none !important;
    }
}

/* Used with active check boxes / widget */
.light-only {
    display: none;
}

.dark-only {
    display: block;
}

@media (prefers-color-scheme: light) {
    .light-only {
        display: block;
    }

    .dark-only {
        display: none;
    }
}

/*Pagination styles*/
.pagination-container {
    display: flex;
    justify-content: center;
    margin: 1rem 0;
}

.pagination-wrapper {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: center;
}

.pagination-pages {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.pagination-go-form {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: 1rem;
}


a[aria-current="page"] {
    font-weight: bold;
}

@media (max-width: 576px) {
    .pagination-pages {
        gap: 0.25rem;
    }

    .pagination-pages .page-number:not(.current-page):not(:first-child):not(:last-child) {
        display: none;
    }

    .pagination-pages .ellipsis {
        display: none;
    }

    .pagination-go-form {
        margin-left: 0.5rem;
        margin-top: 0;
    }

    .pagination-go-form label {
        display: none;
    }
}


/* Class to trigger the animation */
.fade-out {
  animation: fadeOut 2s ease-in forwards; /* 2s duration, stays hidden after */
}

/* Keyframes definition */
@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    /* Optional: can also set display: none at 100% to remove it from flow */
  }
}


/* Collapse borders for consistent rendering */
.alt-borders {
  border-collapse: collapse;
}

/* Apply bottom border on even rows only */
.alt-borders tbody tr:nth-child(even) td,
.alt-borders tbody tr:nth-child(even) th {
  border-bottom: var(--pico-border-width) solid var(--pico-table-border-color);
}

/* Ensure odd rows have no bottom border */
.alt-borders tbody tr:nth-child(odd) td,
.alt-borders tbody tr:nth-child(odd) th {
  border-bottom: none;
}


/* to enable light-dark() */

:root {
    color-scheme: light dark;
}

.yes-badge {
    color: light-dark(var(--pico-color-jade-750), var(--pico-color-jade-50));
    background-color: light-dark(var(--pico-color-jade-50), var(--pico-color-jade-700));
    border-radius: 0.3rem;
    display: inline-block;
    padding: 5px;
}

.no-badge {
    color: light-dark(var(--pico-color-red-750), var(--pico-color-red-50));
    background-color: light-dark(var(--pico-color-red-50), var(--pico-color-red-700));
    border-radius: 0.3rem;
    display: inline-block;
    padding: 5px;
}