body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    /* Add padding to the bottom to prevent the last element from being hidden behind the sticky bar */
    padding: 20px 20px 120px 20px; 
    background-color: #f0f8ff; /* Light AliceBlue background */
    color: #333;
}

.container {
    max-width: 1200px;
    margin: auto;
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

h1, h2, h3, h4 {
    color: #008080; /* Vibrant Teal color for headers */
    text-align: center;
}

#intro-blurb {
    background-color: #e6f7ff;
    border: 1px solid #b3e0ff;
    border-radius: 8px;
    padding: 1px 25px 15px 25px;
    margin-bottom: 30px;
}
#intro-blurb h4 {
    text-align: left;
    margin-top: 20px;
    margin-bottom: 10px;
}
#intro-blurb ol {
    padding-left: 20px;
}
#intro-blurb li {
    margin-bottom: 8px;
}


#profile-form .form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 15px;
    margin-bottom: 15px;
}

#profile-form input, #profile-form select {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 16px;
}

/* --- Hide number input arrows --- */
#age, #height-ft, #height-in, #weight, #goal-weight, #min-protein-override, #max-protein-override, #other-meals-snacks-calories {
    -moz-appearance: textfield;
}
#age::-webkit-outer-spin-button, #age::-webkit-inner-spin-button,
#height-ft::-webkit-outer-spin-button, #height-ft::-webkit-inner-spin-button,
#height-in::-webkit-outer-spin-button, #height-in::-webkit-inner-spin-button,
#weight::-webkit-outer-spin-button, #weight::-webkit-inner-spin-button,
#goal-weight::-webkit-outer-spin-button, #goal-weight::-webkit-inner-spin-button,
#min-protein-override::-webkit-outer-spin-button, #min-protein-override::-webkit-inner-spin-button,
#max-protein-override::-webkit-outer-spin-button, #max-protein-override::-webkit-inner-spin-button,
#other-meals-snacks-calories::-webkit-outer-spin-button, #other-meals-snacks-calories::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}


#profile-form .height-inputs { display: flex; gap: 10px; }
#profile-form .height-inputs input { min-width: 80px; }
#profile-form .meal-options { display: flex; align-items: center; gap: 15px; padding-top: 5px; }

.labeled-input {
    display: flex;
    flex-direction: column;
}

.labeled-input label {
    display: block;
    font-size: 0.9em;
    font-weight: 500;
    margin-bottom: 5px;
    color: #333;
    text-align: left;
}

.override-controls {
    margin-bottom: 15px;
}
.override-controls a {
    color: #008080;
    text-decoration: none;
    font-size: 0.9em;
}
.override-controls a:hover {
    text-decoration: underline;
}
#protein-override-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-top: 10px;
    background-color: #f7f7f7;
    padding: 15px;
    border-radius: 4px;
}


#profile-form button {
    width: 100%; padding: 12px; background-color: #20b2aa; /* LightSeaGreen */ color: white;
    border: none; border-radius: 4px; cursor: pointer; font-size: 16px;
    transition: background-color 0.3s;
}

#profile-form button:hover { background-color: #008080; } /* Teal */
#profile-form button.update-mode { background-color: #3cb371; } /* MediumSeaGreen */
#profile-form button.update-mode:hover { background-color: #2e8b57; } /* SeaGreen */

.disclaimer { background-color: #e6f2ff; border-left: 4px solid #008080; padding: 10px; margin: 20px 0; }

#profiles-display {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.profile-card {
    background: #fdfdfd; border: 1px solid #ddd; border-radius: 8px;
    padding: 15px; position: relative;
    border-top: 4px solid #20b2aa; /* Accent color border */
}

.profile-card h3 { margin-top: 0; color: #008080; }
.profile-actions { position: absolute; top: 10px; right: 10px; }
.profile-actions button { background: none; border: 1px solid #ccc; cursor: pointer; padding: 3px 6px; margin-left: 5px; border-radius: 4px; }
.profile-actions button:hover { background-color: #e2e2e2; }

.list-controls { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; flex-wrap: wrap; gap: 10px; }
.list-controls button { padding: 10px 15px; cursor: pointer; border: 1px solid #ccc; background-color: #f0f0f0; border-radius: 4px; }
.list-controls button:hover { background-color: #e2e2e2; }
.export-controls { display: flex; align-items: center; gap: 10px; }
.export-controls .meal-multiplier-control input { width: 50px; }


#export-container {
    margin-top: 30px;
    padding: 15px;
    background-color: #f8f9fa;
    border: 1px solid #ddd;
    border-radius: 8px;
}
#export-output {
    background-color: #fff;
    padding: 15px;
    border-radius: 5px;
    white-space: pre-wrap;
    word-wrap: break-word;
    font-family: "Courier New", Courier, monospace;
    font-size: 14px;
    border: 1px solid #ccc;
    -webkit-user-select: all; /* Chrome, Safari, Opera */
    -moz-user-select: all;    /* Firefox */
    -ms-user-select: all;     /* Internet Explorer/Edge */
    user-select: all;         /* Standard syntax */
}


.food-item-header { font-weight: bold; display: grid; grid-template-columns: 2fr 1.5fr 1.5fr repeat(8, 1fr); gap: 10px; padding: 10px; border-bottom: 2px solid #ccc; }
#food-list .food-item { display: grid; grid-template-columns: 2fr 1.5fr 1.5fr repeat(8, 1fr); gap: 10px; align-items: center; padding: 10px; border-bottom: 1px solid #eee; }
.food-item input, .food-item select { width: 100%; padding: 8px; box-sizing: border-box; font-size: 14px; border: 1px solid #ccc; border-radius: 4px; }
.serving-control { display: flex; align-items: center; }
.serving-control .serving-input { text-align: center; border-left: none; border-right: none; -moz-appearance: textfield; }
.serving-control .serving-input::-webkit-outer-spin-button, .serving-control .serving-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.serving-control .serving-btn { width: 30px; height: 34px; font-size: 20px; line-height: 1; border: 1px solid #ccc; background: #f0f0f0; cursor: pointer; padding: 0; }
.serving-control .serving-btn:hover { background-color: #e2e2e2; }
.serving-control .serving-btn.minus { border-radius: 4px 0 0 4px; }
.serving-control .serving-btn.plus { border-radius: 0 4px 4px 0; }
.item-actions { text-align: right; }
.item-actions button { cursor: pointer; font-size: 1.5em; padding: 0.2em 0.5em; margin-left: 10px; border: 1px solid #ccc; background-color: #f0f0f0; border-radius: 5px; line-height: 1; transition: background-color 0.2s, border-color 0.2s; }
.item-actions button:hover { background-color: #e2e2e2; border-color: #bbb; }
.placeholder { text-align: center; padding: 20px; color: #888; background-color: #fafafa; border-bottom: 1px solid #eee; }
.highlight-yellow { background-color: #fffb8f; }
.highlight-red { background-color: #ffc4c4; }


/* --- Collapsible Sticky Targets Section --- */
#nutritional-targets {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: white;
    box-shadow: 0 -4px 12px rgba(0,0,0,0.1);
    border-top: 1px solid #ddd;
}

.targets-header {
    cursor: pointer;
    padding: 5px 10px 10px 10px;
}

.toggle-icon {
    text-align: center;
    font-size: 1.2em;
    color: #008080;
}

.targets-summary {
    display: flex;
    justify-content: space-around;
    font-weight: bold;
}
.targets-summary .summary-item {
    text-align: center;
    flex: 1;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background-color 0.3s;
    margin: 0 4px;
}
.targets-summary .summary-item span {
    display: block;
    font-size: 0.8em;
    color: #555;
}
.targets-summary .summary-item.highlight-yellow { background-color: #fffb8f; }
.targets-summary .summary-item.highlight-red { background-color: #ffc4c4; }


.targets-details {
    max-height: 0;
    overflow-y: auto;
    transition: max-height 0.35s ease-in-out;
}

#nutritional-targets.is-expanded .targets-details {
    max-height: 70vh; /* Animate to this height when expanded */
}

#targets-details-content {
    padding: 0 20px 20px 20px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}
#targets-details-content .targets-card { margin-bottom: 15px; border-top: 4px solid #008080; }

.targets-card table { width: 100%; border-collapse: collapse; }
.targets-card th, .targets-card td { padding: 8px; text-align: left; border-bottom: 1px solid #ddd; }


/* --- Mobile Responsive Styles --- */
@media (max-width: 992px) {
    .food-item-header { display: none; }
    #food-list .food-item {
        display: grid; grid-template-columns: 1fr; grid-template-areas: "name" "variant" "serving" "actions" "nutrients";
        gap: 12px; border: 1px solid #ddd; padding: 15px; margin-bottom: 15px; border-radius: 8px;
    }
    .food-item > * { width: 100%; grid-area: auto; }
    .food-item .food-item-select { grid-area: name; font-size: 1.2em; font-weight: bold; }
    .food-item .variant-select { grid-area: variant; }
    .food-item .serving-control-wrapper { grid-area: serving; }
    .food-item .item-actions { grid-area: actions; text-align: center; }
    .food-item [data-label] { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; border-bottom: 1px solid #eee; }
    .food-item [data-label]:last-of-type { border-bottom: none; }
    .food-item [data-label]::before { content: attr(data-label) ":"; font-weight: bold; color: #555; margin-right: 10px; }
}