/* Vars */
:root {
    --global-font-size: 14pt;
}

/* Reusable components */
.bordered {
    display: block;
    padding: 0.7em;
    border: 1px solid var(--font-color);
    margin-bottom: var(--global-space);
}
.hidden_item {
    color: darkgray;
    font-style: italic;
}
.slim-alert {
    padding: 0.2rem 0.5rem;
    background: white;
}
.table_topbar {
    width: 100%;
    position: sticky;
    top: 50px;
    background: white;
    display: flex;
}
.table_slim_column {
    width: 50px;
}
.table_medium_column {
    width: 125px;
}
.table_wide_column {
    width: 100%;
}
.flex_cell {
    display: flex;
    align-items: center;
    gap: 0.5em;
}

/* For report card layout */
.report_table {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1rem;
}

.report_card{
    padding:1rem;
    display:grid;
    /* id | data | author | machine | status | action */
    grid-template-columns: 1fr 1fr 1fr 2fr 1fr 120px;
    align-items:center;
    gap:0.5rem;
    border: 1px solid;
}

@media (max-width: 768px) {
    .report_card {
        display:grid;
        grid-template-columns: 1fr 1fr;
    }
}

/* For htmx loading indication */
.load-indicator span::after {
  content: '';
  animation: dots 1.5s steps(4, end) infinite;
}
@keyframes dots {
  0%   { content: ''; }
  25%  { content: '.'; }
  50%  { content: '..'; }
  75%  { content: '...'; }
  100% { content: ''; }
}
.load-indicator{
    z-index: -1;
    position: absolute;
    transform: translateY(-100px);
    width: 100%;
    background: white;
    opacity: 0;
    visibility: hidden;
}
.htmx-request.load-indicator{
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: transform 1s ease-in;
}

/* #alerts { */
    /* z-index: -1; */
    /* position: absolute; */
    /* width: 100%; */
/* } */

/* For small icon buttons */
.btn-icon {
    padding: 0.5em 0.5em;
}
.extra_text {
    margin-right: 0.5em;
}

/* For desk layout */
main {
    margin-left: 220px;
    margin-bottom: 2rem;
    height: 100%;
    padding: 0rem 1.5rem;
}

#sidebar {
    position: fixed;
    width: 220px;
    height: 100%;
    padding: 2rem 1.5rem;
    background: white;
    z-index: 10;
}
.sidebar-logo {
    text-align: center;
    font-size: 16pt;
}
.sidebar-logo a {
    padding: 10px;
}

#topbar {
    position: sticky;
    top: 0;
    z-index: 5;
    margin-bottom: 1.5rem;
}
#topbar nav {
    display: flex;
    background: white;
    align-items: center;
    justify-content: space-between;
    height: 50px;
    border-bottom: 1px solid #ddd;
    margin-bottom: 0.5rem
}

.hamburger {
    display: none;
    font-size: 1.5rem;
}
.breadcrumbs {
    flex: 1;
    margin-left: 1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.breadcrumbs a {
}
.breadcrumbs span {
    margin: 0 0.5rem;
}


@media (max-width: 768px) {
    #sidebar {
        transform: translateX(-100%); /* hidden by default */
    }
    #sidebar.active {
        transform: translateX(0); /* slide in */
    }
    .hamburger {
        display: inline-block;
    }
    .extra_text {
        display: none;
    }
    .table_wide_column {
        max-width: 500px;
        white-space: normal;
    }
    main {
        margin-left: 0; /* no sidebar space */
    }
}