/* ====================================================
   GH NUTRITION LOG - PURE MOBILE OVERRIDE (<= 768px)
   ==================================================== */

/* --- 1. Global Viewport Adjustments --- */
body {
    font-size: 16px; /* Prevents iOS auto-zooming into input fields */
    padding-bottom: 2rem;
}


#logo {
	height: 35px;
	padding-right: 5px;
	vertical-align: text-bottom;
}

/* --- 2. Compact Application Header & Links --- */
.app-header {
	position: static !important;
    padding: 0.5rem !important;
    height: auto !important;
}

.header-top {
    flex-direction: column;
    align-items: center;
    gap: 0.2rem; /* Condense dead space */
    text-align: center;
}

.header-top h1 { 
    font-size: 1.2rem; 
    margin-bottom: 0 !important; /* Strip default spacing */
}

/* Stack Header Icons above text */
.index-links {
    display: flex;
    justify-content: space-around;
    width: 100%;
    margin-top: 2px;
}
.index-links .action-btn {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    background: transparent;
    border: none;
}
.index-links .action-btn .icon { font-size: 1.2rem; } /* Scaled down slightly */

.index-links .action-btn .lbl {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-main);
}

/* --- 3. Accessible Touch Action Bars --- */
.bulk-action-bar { flex-direction: column; gap: 0.5rem; padding: 0.5rem; }
.bulk-group { width: 100%; justify-content: space-between; flex-wrap: wrap; gap: 6px !important; }

/* Force top row not to wrap and shrink the 3-dot menu */
.bulk-action-bar > .bulk-group:first-child { flex-wrap: nowrap !important; }
.action-btn { padding: 0.5rem 2px !important; font-size: 0.75rem !important; background: #fff; border: 1px solid #bfdbfe; flex: 1; text-align: center; white-space: nowrap !important; }
.mobile-menu-btn { 
    flex: 0 0 24px !important; /* Narrow the width */
    min-width: 24px !important; 
    padding: 0.5rem 0 !important; /* Restore vertical padding to match adjacent buttons */
}

.divider { display: none; }

/* The Hidden Drawer Toolbelt */
.mobile-menu-btn { display: block !important; }
#edit-tools-drawer { display: none !important; width: 100%; margin-top: 8px; padding-top: 8px; border-top: 1px dashed #bfdbfe; }
#edit-tools-drawer.open { display: flex !important; }

/* --- 4. Stacked Mobile Log Form Layout --- */

.logging-form {
    display: grid !important;
    grid-template-columns: 1.4fr 1fr !important; /* Creates a beautifully balanced, fluid 2-column split */
    gap: 10px !important;
    padding: 8px !important;
    height: auto !important;
}

/* Strip the horizontal wrapper so children join the mobile grid */
.top-logging-row { display: contents !important; }

/* Order Placement Magic */
.radio-toggle { grid-column: 1 / -1 !important; order: 1 !important; margin: 0 !important; align-self: center !important; }

.search-group { grid-column: 1 / -1 !important; order: 2 !important; margin: 0 !important; }
/* Adjusted INDEPENDENTLY: steals 40px from Serving Size to widen Anytime */
.amount-group { grid-column: 1 / 2 !important; order: 3 !important; margin: 0 22px 0 0 !important; } 
.category-group { grid-column: 2 / 3 !important; order: 4 !important; margin: 0 0 0 -22px !important; width: 157px !important; }

.date-group { grid-column: 1 / 2 !important; order: 5 !important; margin: 0 !important; display: flex !important; justify-content: space-between !important; }
.submit-group { flex: 1 1 135px; max-width: 135px; min-width: 135px; order: 6 !important; margin: 0 !important; }
.submit-group button, .submit-group .button { display: block !important; width: 100% !important; box-sizing: border-box !important; padding: 0 !important; margin: 0 !important; }
.amount-group input, .category-group select {
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Form Inputs Height */
.logging-form input[type="text"],
.logging-form select,
.logging-form .button,
.logging-form .btn-date-nav,
.logging-form .date-btn {
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

/* --- Mobile Layout: Form Radio & Calorie Toggle Adjustments --- */
#macro-widget-container {
    flex: 1 !important;
    min-width: 0 !important;
    justify-content: flex-end !important;
}

/* Ensure the text itself anchors to the right edge as it grows */
#macro-trigger {
    text-align: right !important;
}

/* Nudge the 'Meal' label slightly closer to 'Food' */
.radio-toggle label:nth-of-type(2) {
    margin-left: -5px !important;
}

/* --- 5. Fluid Responsive Data Tables --- */
/* Forces horizontal scrolling on the wide macro logs so rows don't collapse text columns */
.table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--border-radius);
}

.table-header-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.data-table {
    min-width: 700px; /* Forces enough layout width to keep data columns aligned and readable */
}

th, td {
    padding: 0.6rem 0.5rem; /* Tighten up cell padding for dense tracking */
}

/* Make checkboxes easy to tap with a fat thumb */
.table-header-card input[type="checkbox"] {
    transform: scale(1.1) !important;
    margin-right: 8px !important;
    margin-left: 2px !important;
    vertical-align: middle;
}
#nutrition-table input[type="checkbox"] {
    transform: scale(1.1) !important;
    margin-right: 8px !important;
    margin-left: 2px !important;
    vertical-align: middle !important;
}
.mgr-bulk-checkbox {
    transform: scale(1.1) !important;
    margin-right: 6px !important;
    margin-left: 2px !important;
    vertical-align: middle !important;
}

/* --- 6. Full-Screen Responsive Modals --- */
.modal-wide {
    width: 95vw !important;
    max-height: 90vh;
    overflow-y: auto;
    padding: 1rem !important;
}

/* Stack form fields neatly in the custom creator */
#custom-item-form .form-row {
    flex-direction: column;
    gap: 10px;
}

#custom-item-form .form-row > input,
#custom-item-form .form-row > div {
    width: 100% !important;
    flex: unset !important;
}

/* Expand recipe input strip elements vertically */
.recipe-input-strip {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
}

.recipe-input-strip > div {
    width: 100% !important;
}

/* Make the recipe modal layout fit smaller screens */
.recipe-table {
    min-width: 550px;
}

/* --- 7. Slide-Out Panel Re-Fit (Custom Manager) --- */
.slide-panel {
    width: 100% !important; /* Cover full screen on phone screens */
    right: -100%;
}

.panel-header {
    padding: 12px 10px;
}

.panel-header h3 {
    font-size: 1rem !important;
}

/* Scale button sizes down slightly to fit headers beautifully */
.panel-header button {
    padding: 4px 6px !important;
    font-size: 0.7rem !important;
    width: auto !important;
}

/* Stop the elastic bounce effect on mobile scroll */
.table-container, .table-header-container {
    overscroll-behavior-x: none !important;
}

/* --- COMPACT MOBILE EDITING MODALS (Manage Food & Meals) --- */

/* 1. Shrink the main modal width so it doesn't touch the screen edges */
#custom-item-modal .modal-wide {
    width: 92% !important;
    max-width: 360px !important;
    padding: 15px !important;
}

/* 2. Stack Brand, Name, and Amount vertically */
#custom-item-form .form-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Let Brand and Name span the full width */
#custom-brand, #custom-name {
    width: 100% !important;
    flex: none !important;
}

/* Keep Amount and the Update checkbox on the same row */
#custom-item-form .form-row .smart-dropdown-wrapper {
    width: 100% !important;
    flex: none !important;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
#custom-amount {
    flex: 1; /* Stretches to fill available space */
}

/* 3. Reformat the Macros into a 3x2 Grid */
#manual-macro-section {
    grid-template-columns: 1fr 1fr !important; /* 2 columns */
    gap: 12px 10px !important;
    justify-items: center;
    margin-top: 10px;
}

#manual-macro-section .input-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

/* Shrink the input boxes to 70px and center the numbers */
#manual-macro-section input {
    width: 70px !important;
    text-align: center;
    padding: 6px !important;
}

/* 4. Narrow and center the Save/Cancel buttons */
#custom-item-form .btn-group {
    justify-content: center;
    gap: 15px;
    margin-top: 20px;
}

#custom-item-form .btn-group .button {
    flex: 0 1 120px !important; /* Locks them to 120px wide */
    padding: 10px !important;
}

/* --- MOBILE RECIPE TABLE SCROLL FIX (V2) --- */
#recipe-builder-section {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch; /* Smooth swiping on iOS */
    padding-bottom: 10px; /* Breathing room for the scrollbar */
}

#recipe-builder-section table {
    width: 100% !important;
    min-width: 450px !important; /* Forces the table wider than the phone screen to trigger the scroll */
    border-collapse: collapse;
}

#recipe-builder-section th, 
#recipe-builder-section td {
    padding: 8px 10px !important;
    white-space: nowrap !important; /* Prevents text from stacking vertically */
}

/* --- COMPACT MOBILE RECIPE INPUT GRID --- */
#recipe-builder-section .recipe-input-strip {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px 10px !important;
    align-items: end;
    padding-bottom: 15px;
}

/* Force Ingredient (1st child) and Amount (2nd child) to stretch across both columns */
#recipe-builder-section .recipe-input-strip > div:nth-child(1),
#recipe-builder-section .recipe-input-strip > div:nth-child(2) {
    grid-column: span 2;
    width: 100% !important;
}

/* Center the 6 macro fields and their labels */
#recipe-builder-section .recipe-input-strip > div:not(:nth-child(1)):not(:nth-child(2)) {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100% !important;
}

/* Lock the macro input boxes to a uniform size */
#recipe-builder-section .recipe-input-strip > div:not(:nth-child(1)):not(:nth-child(2)) input {
    width: 70px !important;
    text-align: center;
    padding: 6px !important;
    box-sizing: border-box;
}

/* Make the Add button span the full width below the macros */
#recipe-builder-section .btn-add-recipe {
    grid-column: span 2;
    width: 100% !important;
    margin-top: 10px;
    padding: 10px !important;
}