:root {
  --bulma-primary-h: 9deg;
  --bulma-primary-s: 49%;
  --bulma-primary-l: 34%;
}

/* Ensure the body fills the whole screen height */
.site-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
}

/* This is the magic part: it grows to fill space */
.site-content {
    flex: 1 0 auto;
}

.main-container {
    width: 100%;
    padding: 0 1.5rem; /* Ensures a gap on mobile screens */
    margin: 3rem 0 0 0;
}
/* For Header and Buttons (Readability focus) */
.standard-width {
    width: 95%; /* Margin on small screens */
    /* clamp(MIN, VAL, MAX) */
    max-width: clamp(20rem, 90vw, 56rem); 
    margin: 0 auto;
}
.table-width {
    width: 95%;
    max-width: clamp(20rem, 95vw, 75rem);
    margin: 0 auto;
}

.header-row {
    display: flex;
    justify-content: space-between; /* pushes items to left and right */
    align-items: center;             /* vertical alignment */
    margin: .5rem auto;
    padding: 0 1rem;
    width: 98%
}

.avatar {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background-color: #4CAF50; /* or randomize per user */
  color: white;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}


.btn-add {
    background-color: #007bff;
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 500;
    transition: background-color 0.2s ease;
}
.btn-add:hover {
    background-color: #0056b3;
}

.form-container {
    align-items: center;             /* vertical alignment */
    margin: .5rem auto;
    padding: 0 1rem;
    width: 50%
}

input[type="date"]{
    width: auto;
}
input[type="number"]{
    width: auto;
}

.select {
    width: 100% !important;
}
.select select{
    width: 100% !important;
}


table{
    margin: 0 auto;
}


/* This ensures the footer stays at the end of the flex column */
.custom-footer {
    flex-shrink: 0;
    padding: 1rem !important; /* Makes it much smaller than Bulma default */
    background-color: #f5f5f5;
}

.custom-footer p {
    font-size: 0.85rem;
    margin-bottom: 0 !important;
}

.mobile-only {
    display: none;
}   


@media (max-width: 900px) {
    .header-row {
        flex-direction: column;    /* stack items */
        align-items: center;   /* optional: left-align items */
        width: 90%;                /* optional: take more width on small screens */
    }

    .header-row > * {
        margin-bottom: 1rem;       /* spacing between items */
    }

    .responsive-table .actions-col {
    display: none;
    }

    .action-box {
        display: flex;
        gap: 1rem;
        padding: 0.5rem;
        background-color: #f0f0f0;
        justify-content: center;
        border-radius: 0.25rem;
    }

    .clickable-row {
        cursor: pointer;
    }
    .action-box a {
        height: 1.5rem
    }
    .mobile-only {
        display: table-cell;
        cursor: pointer;
        font-size: 1.5em;
        text-align: center;
    }

    .container {
        align-items: center;             /* vertical alignment */
        margin: .5rem auto;
        padding: 0 1rem;
        width: 90%
    }
    .form-container {
        align-items: center;             /* vertical alignment */
        margin: .5rem auto;
        padding: 0 1rem;
        width: 90%
    }
    .button-container {
        margin-top: 1rem;
        flex-direction: column;
        gap: 0.5rem;
    }
}