/* 
    HTMX styles
*/
@view-transition {
    navigation: auto;
}

/* 
    Other styles
*/
body {
    font-family: sans-serif;
}

/* 
    Optional wrapper to make the table responsive.
    On smaller screens, it allows the table to scroll horizontally.
*/
.table-container {
    overflow-x: auto;
}

.table-zebra {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.table-zebra caption {
    caption-side: bottom;
    text-align: right;
    font-size: 0.8rem;
    color: #666;
    padding: 10px 0;
}

.table-zebra thead {
    background-color: #2c3e50; /* A dark blue-grey header */
    color: #ffffff;
}

.table-zebra th,
.table-zebra td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid #dddddd;
}

/* This is the magic for the zebra-striping */
.table-zebra tbody tr:nth-of-type(even) {
    background-color: #f3f3f3;
}

.table-zebra tbody tr:last-of-type {
    border-bottom: 2px solid #2c3e50;
}

/* Optional: Add a hover effect for better user interaction */
.table-zebra tbody tr:hover {
    background-color: #e2e8f0;
    cursor: pointer;
}

.th-btn {
    width: 50px;
}

.get-data {
    float: right;
    margin-bottom: 3rem;
    margin-right: 14px;
}

.desc {
    margin-right: 14px;
}

.heading {
    text-align: end;
    text-decoration: underline;
    margin-right: 14px;
}

.crossed {
    text-decoration: line-through;
}

#error {
    color: rgb(170, 0, 0);
}

button {
    background: #559fff;
    font-family: inherit;
    padding: 0.6em 1em;
    font-weight: 900;
    font-size: 12px;
    border: 2px solid rgb(25, 25, 25);
    border-radius: 0.3em;
    box-shadow: 0.1em 0.1em;
    cursor: pointer;
}

button:hover {
    transform: translate(-0.05em, -0.05em);
    box-shadow: 0.15em 0.15em;
}

button:active {
    transform: translate(0.05em, 0.05em);
    box-shadow: 0.05em 0.05em;
}