#habits-grid {
    margin: 1rem auto;
}

/* Header layout styling */
.header-container {
    margin-bottom: 1rem;
    overflow: hidden; /* Clearfix */
}

.header-title, .header-date {
    float: left;
    margin-right: 1rem;
}

.header-container > div:last-child {
    float: right;
}
@media (min-width: 769px) {
    .header-container > div, .header-container > p {
        line-height: 2.5rem;
    }
}

@media (max-width: 768px) {
    .header-container > * {
        float: none;
        display: block;
        width: 100%;
        margin: 0.25rem 0;
    }
}

.habit-info {
    min-width: 10rem;
}

.habit-card {
    position: relative;
}

/* Trucate the habit name in card */
.habit-card h4{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    width: 100%;
}



/* 
Habit Actions - Responsive Stacking: 
Controls the layout of habit action items (info, buttons, range),
making them sit in a row on larger screens and stack responsively 
on smaller screens (info/buttons side-by-side, range full-width below).
*/
.habit-actions-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.habit-actions-container > :nth-child(1) { /* Habit Info */
    flex: 1 1 35%; 
    min-width: 0;
}

.habit-actions-container > :nth-child(2) { /* Buttons */
    flex: 1 1 25%;
    display: flex; 
    align-items: center;
    padding: 0 0.5rem;
}

.habit-actions-container > :nth-child(2) Button {
    margin: 0;
    width: 2rem;
    height: 2rem;
}

.habit-actions-container > :nth-child(3) { /* Range Slider */
    flex: 1 1 30%;
    align-self: flex-end;
}

/* Responsive styles */
@media (max-width: 768px) {
    #new-habit-form div {
        flex-direction: column;
    }
    
    #new-habit-form input {
        margin: 0 0 0.5rem 0;
    }

    /* Responsive stacking for habit actions */
    .habit-actions-container > :nth-child(1) { /* Habit Info */
        flex-basis: 48%; 
    }

    .habit-actions-container > :nth-child(2) { /* Buttons */
        flex-basis: 48%; 
    }

    .habit-actions-container > :nth-child(3) { /* Range Slider */
        flex-basis: 100%;
    }

}

/* Delete habit - ultra minimal anchor */
.delete-habit {
    position: absolute;
    top: 6px;
    right: 8px;
    text-decoration: none;
    opacity: 0.4;
    margin: 0 !important; /* Override any margin */
    cursor: pointer;
}

/* Explicitly override the Tailwind space-y utility */
.space-y-6 > .delete-habit {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.delete-habit:hover {
    opacity: 1;
}