/* Basic Reset & Defaults */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f8f9fa;
    padding-bottom: 60px; /* Space for footer */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Header */
header {
    background-color: #4a90e2; /* Blue theme */
    color: white;
    padding: 1rem;
    text-align: center;
    margin-bottom: 1.5rem;
    flex-shrink: 0; /* Prevent header from shrinking */
}

/* Main Content Area */
main {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 1rem;
    flex-grow: 1; /* Allow main content to grow */
    width: 100%; /* Ensure it takes width for centering */
}


h2 {
    margin-top: 1.5rem;
    margin-bottom: 0.8rem;
    color: #4a90e2;
    border-bottom: 2px solid #e0e0e0;
    padding-bottom: 0.3rem;
}

/* Summary Section */
.summary-container {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    background-color: #fff;
    padding: 1rem;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    margin-bottom: 1.5rem;
}

.summary-item {
    flex: 1;
    min-width: 150px;
    text-align: center;
}

.summary-item span {
    display: block;
    font-size: 0.9rem;
    color: #555;
    margin-bottom: 0.2rem;
}

.summary-item strong {
    font-size: 1.2rem;
    color: #333;
}

/* Action Buttons */
.actions {
    margin-bottom: 1.5rem;
    display: flex; /* Changed back from display: none */
    gap: 0.8rem;
    flex-wrap: wrap;
}

/* Buttons */
.button {
    padding: 0.8rem 1.2rem;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
    transition: background-color 0.2s ease, opacity 0.2s ease;
    color: white;
    text-align: center;
    line-height: 1.2; /* Adjust for better vertical alignment */
}
.button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}


.button.primary { background-color: #4a90e2; }
.button.primary:hover:not(:disabled) { background-color: #357abd; }

.button.secondary { background-color: #5cb85c; }
.button.secondary:hover:not(:disabled) { background-color: #4cae4c; }

.button.tertiary { background-color: #f0ad4e; }
.button.tertiary:hover:not(:disabled) { background-color: #ec971f; }

/* Milk List & Cards */
.milk-list {
    display: grid;
    gap: 1rem;
    /* Responsive grid columns */
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
#no-milk-message {
    grid-column: 1 / -1; /* Span across all columns if grid is active */
    text-align: center;
    color: #666;
    padding: 2rem;
    background-color: #fff;
    border-radius: 8px;
}


.milk-card {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 1rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    border-left: 5px solid #4a90e2; /* Default border color - normal */
    display: flex;
    flex-direction: column; /* Stack elements vertically */
}

.milk-card.warning { border-left-color: #f0ad4e; } /* Yellow for warning */
.milk-card.expired { border-left-color: #d9534f; opacity: 0.7; } /* Red for expired */

.card-header, .card-body, .card-footer {
    margin-bottom: 0.8rem;
}
.card-footer { margin-bottom: 0; margin-top: auto; } /* Push footer to bottom */

.card-header {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem; /* Space between note and expiry */
    font-weight: bold;
}
.milk-note{
    word-break: break-word; /* Prevent long notes from breaking layout */
}
.milk-expiry {
    font-size: 0.9rem;
    color: #555;
    flex-shrink: 0; /* Prevent expiry date from shrinking too much */
    white-space: nowrap; /* Prevent expiry date text wrap */
}
.milk-card.warning .milk-expiry { color: #c77c0e; }
.milk-card.expired .milk-expiry { color: #d9534f; font-weight: bold;}

.milk-quantity { display: block; margin-bottom: 0.3rem;}
progress { width: 100%; height: 8px; border-radius: 4px; overflow: hidden;}
/* Styling progress bar for better appearance */
progress::-webkit-progress-bar { background-color: #eee; border-radius: 4px;}
progress::-webkit-progress-value { background-color: #4a90e2; border-radius: 4px;}
progress::-moz-progress-bar { background-color: #4a90e2; border-radius: 4px;}
.milk-card.warning progress::-webkit-progress-value { background-color: #f0ad4e; }
.milk-card.warning progress::-moz-progress-bar { background-color: #f0ad4e; }
.milk-card.expired progress::-webkit-progress-value { background-color: #d9534f; }
.milk-card.expired progress::-moz-progress-bar { background-color: #d9534f; }


.card-footer {
    font-size: 0.85rem;
    color: #666;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.card-footer > div { /* Container for buttons */
    display: flex;
    gap: 0.5rem;
}

.card-action-btn {
    padding: 0.3rem 0.6rem;
    font-size: 0.8rem;
    background-color: #eee;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    color: #333;
}
.card-action-btn:hover:not(:disabled){ background-color: #ddd;}
.card-action-btn.delete-milk-btn { background-color: #f8d7da; border-color: #f5c6cb; color: #721c24;}
.card-action-btn.delete-milk-btn:hover:not(:disabled) { background-color: #f5c6cb;}
.card-action-btn:disabled {
     opacity: 0.5;
     cursor: not-allowed;
     background-color: #eee;
}


/* Modals */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1000; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* Enable scroll if needed */
    background-color: rgba(0,0,0,0.5); /* Black w/ opacity */
}

.modal-content {
    background-color: #fefefe;
    margin: 10vh auto; /* Vertical margin using viewport height */
    padding: 25px;
    border: 1px solid #888;
    border-radius: 8px;
    width: 90%; /* Responsive width */
    max-width: 500px; /* Max width */
    position: relative;
}

.close-btn {
    color: #aaa;
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    line-height: 1; /* Ensure consistent positioning */
}

.close-btn:hover,
.close-btn:focus {
    color: black;
    text-decoration: none;
}

/* Forms */
.form-group {
    margin-bottom: 1rem;
}

label, fieldset legend {
    display: block;
    margin-bottom: 0.3rem;
    font-weight: bold;
    color: #444;
}

input[type="text"],
input[type="password"],
input[type="date"],
input[type="number"],
input[type="file"],
select {
    width: 100%;
    padding: 0.7rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1rem;
    background-color: #fff; /* Ensure background color */
}
input[type="file"] { padding: 0.3rem;}
input:focus, select:focus {
    outline: none;
    border-color: #4a90e2;
    box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2);
}

.form-group small {
    font-size: 0.8rem;
    color: #666;
    display: block; /* Ensure it takes its own line */
    margin-top: 0.2rem;
}

hr { margin: 1rem 0; border: 0; border-top: 1px solid #eee; }

.quick-consume-buttons {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.8rem;
    flex-wrap: wrap;
}
.quick-consume-buttons .button { padding: 0.5rem 0.8rem; font-size: 0.9rem;}

/* Auth Modal Specifics */
.auth-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
}
#auth-error {
    margin-top: 0.8rem;
    text-align: center;
}


/* Settings Page */
.page {
    background-color: #fff;
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

fieldset {
    border: 1px solid #ccc;
    padding: 0.8rem;
    border-radius: 4px;
    margin-bottom: 1rem;
}
fieldset legend { font-size: 1rem; padding: 0 0.3rem; font-weight: bold; color: #444; }
fieldset label { font-weight: normal; margin-bottom: 0.2rem; display: inline-block; margin-right: 1rem;}
fieldset input[type="checkbox"] { margin-right: 0.5rem; vertical-align: middle; }


/* Footer */
footer {
    text-align: center;
    margin-top: 2rem;
    padding: 1rem;
    font-size: 0.9rem;
    color: #777;
    background-color: #e9ecef;
    flex-shrink: 0; /* Prevent footer from shrinking */
    width: 100%;
    /* Removed position: fixed */
}

/* Responsive Adjustments */
@media (max-width: 600px) {
    .modal-content {
        width: 95%;
        margin: 5vh auto; /* Adjust vertical margin for smaller screens */
        padding: 20px;
    }
    .actions {
        flex-direction: column; /* Stack action buttons */
        align-items: stretch; /* Make buttons full width */
    }
    .summary-container {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
     .card-header { flex-direction: column; align-items: flex-start;} /* Stack note and expiry on small screens */
     .card-footer { flex-direction: column; align-items: flex-start;}
     .card-footer > div { width: 100%; justify-content: space-around; margin-top: 0.5rem;} /* Space out buttons */
     .auth-actions { flex-direction: column; } /* Stack login/register buttons */

}