:root {
    /* Ultra-Premium Light Theme Colors */
    --bg-main: #fcfcfd;
    --bg-panel: rgba(255, 255, 255, 0.85); /* For glass effect */
    --bg-solid: #ffffff;
    --bg-input: #f8f9fa;
    
    --border-color: rgba(0, 0, 0, 0.06);
    /* A visible hairline between rows. --border-color is 6% black, which
       reads as a smudge once rows are dense - see the recipe table. */
    --divider-color: rgba(0, 0, 0, 0.11);
    /* Track widths for a recipe row. Reserved whether or not the slot is
       filled, so the column of numbers holds still. --row-unit-w fits the
       three-option unit pill; --row-basis-w fits ל-1 ק"ג/ליטר, the longest
       basis, which is what an unset row prints. */
    --row-field-w: 120px;
    --row-unit-w: 140px;
    --row-tag-w: 46px;
    --row-basis-w: 68px;
    --border-focus: #111827;
    
    --text-primary: #030712;
    --text-secondary: #4b5563;
    --text-muted: #9ca3af;
    
    /* Elegant Indigo / Gold-ish Accents */
    --accent: #111827;       /* Deep almost-black for primary buttons */
    --accent-hover: #374151;
    --accent-light: #f3f4f6; /* Very soft gray for active states */
    
    --primary-color: #2563eb;
    --success: #059669;
    --success-bg: rgba(5, 150, 105, 0.08);
    --warning: #d97706;
    --warning-bg: rgba(217, 119, 6, 0.08);
    --danger: #dc2626;
    --danger-bg: rgba(220, 38, 38, 0.08);

    /* Single family for Hebrew, Latin AND numerals. Inter was first in the
       stack but has no Hebrew glyphs, so Hebrew silently fell through to Rubik
       while Latin text and every number rendered in Inter: two typefaces on
       every screen. Rubik covers all three. */
    --font-sans: 'Rubik', system-ui, sans-serif;
    
    /* Premium Shadows & Blurs */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.02);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.03), 0 2px 8px rgba(0, 0, 0, 0.02);
    --shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.02);
    
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;
}

/* Calculation Formula Tooltip System */
.calc-tooltip {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 20;
}

.calc-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 8px;
    background: rgba(37, 99, 235, 0.12);
    border: 1px solid rgba(37, 99, 235, 0.25);
    color: #2563eb;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}

.dark-theme .calc-icon {
    background: rgba(96, 165, 250, 0.15);
    border-color: rgba(96, 165, 250, 0.3);
    color: #93c5fd;
}

.calc-tooltip:hover .calc-icon {
    transform: scale(1.12);
    background: #2563eb;
    border-color: #2563eb;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35);
}

.calc-bubble {
    visibility: hidden;
    opacity: 0;
    width: 260px;
    background: #0f172a;
    color: #ffffff;
    text-align: right;
    border-radius: 12px;
    padding: 10px 14px;
    position: absolute;
    z-index: 999999;
    top: 32px;
    left: 0;
    transform: translateY(6px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.55);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    pointer-events: none;
    border: 1px solid rgba(255, 255, 255, 0.2);
    direction: rtl;
    white-space: normal;
}

.calc-bubble::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 8px;
    border-width: 6px;
    border-style: solid;
    border-color: transparent transparent #0f172a transparent;
}

.calc-tooltip:hover .calc-bubble {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

/* Ensure stat-cards and containers do not clip tooltips */
.stat-card {
    overflow: visible !important;
}
.dashboard-stats {
    overflow: visible !important;
}

/* Waste Pct Strict Horizontal Row */
.waste-pct-container {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 3px !important;
    white-space: nowrap !important;
    flex-wrap: nowrap !important;
}

.waste-pct-input {
    width: 55px !important;
    height: 32px !important;
    text-align: center !important;
    font-weight: 800 !important;
    font-size: 15px !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
    background: var(--bg-solid) !important;
    border-radius: 6px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline-block !important;
    -moz-appearance: textfield !important;
}

.waste-pct-input::-webkit-outer-spin-button,
.waste-pct-input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

.waste-pct-symbol {
    font-weight: 800 !important;
    font-size: 14px !important;
    color: var(--text-primary) !important;
    display: inline-block !important;
    line-height: 1 !important;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Browsers give form controls the OS font unless told otherwise, which was a
   second source of mixed typefaces (inputs, selects and buttons). */
input, select, textarea, button, optgroup {
    font-family: var(--font-sans);
}

body {
    background-color: var(--bg-main);
    background-image: 
        radial-gradient(at 0% 0%, hsla(253,16%,7%,0.02) 0px, transparent 50%),
        radial-gradient(at 50% 0%, hsla(225,39%,30%,0.02) 0px, transparent 50%),
        radial-gradient(at 100% 0%, hsla(339,49%,30%,0.02) 0px, transparent 50%);
    color: var(--text-primary);
    font-family: var(--font-sans);
    min-height: 100vh;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.app-container {
    display: flex;
    height: 100vh;
}

/* Recipe category sidebar is shown ONLY on recipe views (`.recipes-mode`).
   Class-driven, not inline styles, so it can never be left stranded on another page.
   The mobile media query below re-enables it as a slide-in overlay on every view. */
.app-container:not(.recipes-mode) > .sidebar {
    display: none;
}

/* Sidebar (Premium Glass) */
.sidebar {
    width: 280px;
    flex: 0 0 280px;
    height: 100vh;
    padding: 40px 24px;
    display: flex;
    flex-direction: column;
    background-color: var(--bg-panel);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-left: 1px solid var(--border-color);
    box-shadow: 2px 0 24px rgba(0,0,0,0.02);
    z-index: 10;
}

.logo h1 {
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 48px;
    color: var(--text-primary);
    letter-spacing: -1px;
}
.logo span { 
    font-weight: 400; 
    color: var(--text-muted);
    font-size: 13px;
    display: block;
    margin-top: 6px;
    letter-spacing: 0.5px;
}

#nav-menu {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.nav-divider {
    margin: 32px 0 12px 12px;
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 600;
}

.nav-item {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    padding: 14px 16px;
    border-radius: var(--radius-md);
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    text-align: right;
    display: flex;
    align-items: center;
    gap: 14px;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-item:hover {
    color: var(--text-primary);
    transform: translateX(-4px);
}

.nav-item.active {
    background: var(--bg-solid);
    color: var(--text-primary);
    font-weight: 700;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
}
.nav-item.active svg {
    stroke: var(--text-primary);
    stroke-width: 2.5;
}

/* Main Content */
.main-content {
    flex: 1;
    /* Without min-width:0 a flex item refuses to shrink below its min-content
       width. The nowrap top-nav bar and wide tables then push the whole layout
       sideways instead of scrolling inside their own containers. */
    min-width: 0;
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    padding: 24px 32px;
    overflow-y: auto;
    scroll-behavior: smooth;
}

.top-nav-brand .logo h1 {
    font-size: 20px;
    font-weight: 800;
    margin: 0;
    letter-spacing: -0.5px;
}
.top-nav-brand .logo span {
    font-weight: 400;
    font-size: 12px;
    color: var(--text-muted);
}

/* Animations */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.view {
    display: none;
    animation: fadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.view.active {
    display: block;
}

.view-header { margin-bottom: 48px; }
.flex-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.view-header h2 {
    font-size: 40px;
    font-weight: 800;
    margin-bottom: 12px;
    letter-spacing: -1.5px;
    color: var(--text-primary);
}
.view-header p {
    color: var(--text-secondary);
    font-size: 16px;
    font-weight: 400;
}

/* Simulator Controls (Elegant) */
.simulator-controls {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 14px;
    background: var(--bg-solid);
    padding: 14px 24px;
    border-radius: 100px; /* Pill shape for premium feel */
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
}
.simulator-controls label { 
    color: var(--text-secondary); 
    font-weight: 500;
    letter-spacing: 0.5px;
}
.simulator-controls select {
    background: transparent;
    color: var(--text-primary);
    border: none;
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 700;
    outline: none;
    cursor: pointer;
    padding-right: 12px;
}
.simulator-controls select:focus { 
    color: var(--accent);
}

/* Stats */
.dashboard-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
    margin-bottom: 24px;
}
.proc-tiles-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    width: 100%;
}
@media (max-width: 1100px) {
    .proc-tiles-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .proc-tiles-grid { grid-template-columns: 1fr; }
}
.stat-card {
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--bg-solid);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.stat-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}
.stat-label {
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}
.stat-card h3 {
    font-size: 42px;
    font-weight: 800;
    letter-spacing: -2px;
    color: var(--text-primary);
}
.text-success { color: var(--success) !important; }
.sim-diff {
    font-size: 13px;
    font-weight: 600;
    margin-top: 8px;
}
.sim-diff.positive { color: var(--success); }
.sim-diff.negative { color: var(--danger); }

/* Charts */
.charts-grid {
    display: grid;
    grid-template-columns: 2fr 1.5fr 1.5fr;
    gap: 32px;
    margin-bottom: 48px;
}
@media(max-width: 1400px) {
    .charts-grid { grid-template-columns: 1fr 1fr; }
    .top-sellers-card { grid-column: span 2; }
}

.chart-card {
    padding: 32px;
    display: flex;
    flex-direction: column;
    background: var(--bg-solid);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}
.chart-card h4 {
    margin-bottom: 32px;
    color: var(--text-primary);
    font-weight: 800;
    font-size: 18px;
    letter-spacing: -0.5px;
}
.chart-wrapper {
    position: relative;
    height: 240px;
    width: 100%;
}

/* Top Sellers */
.top-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.top-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: var(--bg-main);
    border-radius: var(--radius-md);
    font-size: 15px;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    border: 1px solid var(--border-color);
}
.top-list li:hover {
    transform: scale(1.03);
    box-shadow: var(--shadow-sm);
    background: var(--bg-solid);
}
.top-list li .rank {
    font-weight: 800;
    color: var(--text-muted);
    margin-left: 20px;
    font-size: 18px;
    width: 24px;
}
.top-list li .name { flex: 1; font-weight: 700; color: var(--text-primary); }
.top-list li .profit { color: var(--success); font-weight: 800; }

/* Tables */
/* The heading lives inside `.table-container`, which is the horizontal
   scroller. Two things followed from that and both looked like a rendering
   fault:

   The container has no padding, so the heading sat flush against its edge with
   the first glyph touching the boundary. "טבלת מלאי נוכחי" read as if the ט had
   been clipped, because visually it had.

   And scrolling right to read the far columns dragged the heading out of the
   scrollport with them, clipping it by however far you had scrolled. Measured
   at 900px: 112px of the title gone. Sticky pins it to the inline-start edge so
   the columns move underneath while the title stays where it belongs. */
.table-header {
    position: sticky;
    inset-inline-start: 0;
    padding: 0 20px 24px;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 32px;
}
.table-header h4 { font-size: 20px; font-weight: 800; letter-spacing: -0.5px; }

.table-container {
    width: 100%;
    overflow-x: auto;
    background: var(--bg-solid);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}
table {
    width: 100%;
    border-collapse: collapse;
    text-align: right;
    font-size: 15px;
}
th, td {
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
}
th {
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    background: var(--bg-solid);
    position: sticky;
    top: 0;
    z-index: 10;
    box-shadow: 0 2px 4px rgba(0,0,0,0.06);
}
tr { transition: background 0.3s; }
tr:hover td {
    background: var(--bg-input);
}
.dashboard-category-header td {
    background: var(--bg-solid) !important;
    color: var(--text-primary);
    font-size: 20px;
    font-weight: 800;
    padding-top: 40px;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--text-primary);
    letter-spacing: -0.5px;
}
.text-center { text-align: center; }

/* Inputs (Premium floating/borderless feel) */
.qty-input, .name-input {
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-primary);
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    font-family: var(--font-sans);
    transition: all 0.2s ease;
    font-size: 15px;
    font-weight: 500;
}
.qty-input { width: 120px; text-align: center; background: var(--bg-input); border-color: var(--border-color); }
.name-input { 
    width: 100%; 
    text-align: right; 
    font-weight: 600;
}
.name-input:hover { background: var(--bg-input); }
.name-input:focus, .qty-input:focus {
    outline: none;
    border-color: var(--border-focus);
    background: var(--bg-solid);
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

/* Base Price Input */
.price-input {
    width: 140px;
    font-weight: 800;
    color: var(--text-primary);
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    font-size: 18px;
    padding: 10px 16px;
    border-radius: var(--radius-md);
}

.dish-name {
    font-size: 28px;
    font-weight: 800;
    background: transparent;
    border: 1px solid transparent;
    padding: 8px 16px;
    margin-right: -16px;
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    letter-spacing: -1px;
    width: 100%;
}
.dish-name:hover {
    background: var(--bg-input);
}
.dish-name:focus {
    border-color: var(--border-color);
    background: var(--bg-solid);
    box-shadow: var(--shadow-md);
}

/* Add Buttons */
.add-btn {
    background: var(--bg-solid);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    padding: 12px 20px;
    border-radius: 100px; /* Pill */
    cursor: pointer;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 14px;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: var(--shadow-sm);
}
.add-btn:hover {
    background: var(--text-primary);
    color: var(--bg-solid);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
.add-btn:hover svg {
    stroke: var(--bg-solid);
}

.add-ingredient-btn {
    margin: 24px auto;
    display: flex;
    color: var(--text-secondary);
    background: var(--bg-input);
    border: none;
    box-shadow: none;
}
.add-ingredient-btn:hover {
    background: var(--text-primary);
    color: var(--bg-solid);
}

.add-dish-btn {
    width: 100%;
    margin-top: 40px;
    padding: 24px;
    font-size: 16px;
    color: var(--text-primary);
    border: 1px dashed var(--border-color);
    background: transparent;
    border-radius: var(--radius-lg);
    box-shadow: none;
}
.add-dish-btn:hover {
    background: var(--bg-solid);
    border: 1px solid transparent;
}

/* Compact Recipe Cards */
.recipe-grid {
    display: flex;
    flex-direction: column;
    gap: 48px;
}
.recipe-card { 
    background: var(--bg-solid);
    border-radius: var(--radius-lg);
    padding: 40px; 
    box-shadow: var(--shadow-lg);
    animation: fadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) backwards;
    border: 1px solid rgba(0,0,0,0.02);
}

.recipe-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 32px;
    padding-bottom: 32px;
    border-bottom: 1px solid var(--border-color);
    flex-wrap: wrap;
    gap: 24px;
}
.recipe-title-group {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1 1 350px;
}
.recipe-title {
    flex: 1;
    width: 100%;
}

/* Delete Dish Button */
.delete-dish-btn {
    background: var(--bg-input);
    border: none;
    color: var(--text-muted);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.delete-dish-btn:hover {
    background: var(--danger);
    color: #ffffff;
    transform: scale(1.1);
    box-shadow: 0 8px 16px rgba(220, 38, 38, 0.2);
}

.recipe-meta {
    display: flex;
    gap: 48px;
}
.meta-item {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
.meta-item span {
    font-size: 11px;
    color: var(--text-secondary);
    margin-bottom: 8px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}
.meta-item strong {
    font-size: 24px;
    color: var(--text-primary);
    font-weight: 800;
    line-height: 1;
    padding: 8px 0;
}
.meta-item .simulated-price-badge {
    font-size: 13px;
    color: var(--warning);
    margin-top: 8px;
    font-weight: 700;
}
.fc-badge {
    padding: 8px 16px;
    border-radius: 100px;
    font-weight: 800;
    font-size: 15px;
    line-height: 1;
}
.fc-good { background: var(--success-bg); color: var(--success); }
.fc-warn { background: var(--warning-bg); color: var(--warning); }
.fc-danger { background: var(--danger-bg); color: var(--danger); }

/* Remove Buttons (Ingredients) */
.remove-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
.remove-btn:hover {
    background: var(--danger-bg);
    color: var(--danger);
}

/* Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #cbd5e1; }

/* -------------------------------------
   DARK THEME OVERRIDES
-------------------------------------- */
body.dark-theme {
    --bg-main: #030712;
    --bg-panel: rgba(17, 24, 39, 0.85);
    --bg-solid: #111827;
    --bg-input: #1f2937;
    
    --border-color: rgba(255, 255, 255, 0.08);
    --divider-color: rgba(255, 255, 255, 0.13);
    --border-focus: #f3f4f6;
    
    --text-primary: #f9fafb;
    --text-secondary: #9ca3af;
    --text-muted: #6b7280;
    
    --accent: #f9fafb;
    --accent-hover: #e5e7eb;
    --accent-light: #1f2937;
    
    --success-bg: rgba(5, 150, 105, 0.15);
    --warning-bg: rgba(217, 119, 6, 0.15);
    --danger-bg: rgba(220, 38, 38, 0.15);
    
    background-image: 
        radial-gradient(at 0% 0%, hsla(253,16%,40%,0.04) 0px, transparent 50%),
        radial-gradient(at 50% 0%, hsla(225,39%,60%,0.04) 0px, transparent 50%),
        radial-gradient(at 100% 0%, hsla(339,49%,60%,0.04) 0px, transparent 50%);
}

body.dark-theme th {
    background: #0f172a;
}
body.dark-theme .dish-name:focus, 
body.dark-theme .qty-input:focus, 
body.dark-theme .name-input:focus {
    box-shadow: 0 4px 12px rgba(255,255,255,0.05);
}

/* ================================
   MOBILE RESPONSIVE
================================ */

/* Mobile header - hidden on desktop */
.mobile-header {
    display: none;
}

/* Sidebar overlay - hidden on desktop */
.sidebar-overlay {
    display: none;
}

@media (max-width: 768px) {

    /* Mobile top bar */
    .mobile-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        height: 60px;
        padding: 0 16px;
        background: var(--bg-solid);
        border-bottom: 1px solid var(--border-color);
        z-index: 200;
        box-shadow: var(--shadow-sm);
    }

    .mobile-logo {
        font-size: 18px;
        font-weight: 800;
        letter-spacing: -0.5px;
        color: var(--text-primary);
    }
    .mobile-logo span {
        font-weight: 400;
        color: var(--text-muted);
        font-size: 14px;
    }

    /* Hamburger button */
    .hamburger {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 28px;
        height: 20px;
        background: none;
        border: none;
        cursor: pointer;
        padding: 0;
    }
    .hamburger span {
        display: block;
        height: 2px;
        border-radius: 2px;
        background: var(--text-primary);
        transition: all 0.3s ease;
    }
    .hamburger.open span:nth-child(1) {
        transform: translateY(9px) rotate(45deg);
    }
    .hamburger.open span:nth-child(2) {
        opacity: 0;
    }
    .hamburger.open span:nth-child(3) {
        transform: translateY(-9px) rotate(-45deg);
    }

    /* Overlay */
    .sidebar-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.4);
        z-index: 150;
        backdrop-filter: blur(4px);
    }
    .sidebar-overlay.visible {
        display: block;
    }

    /* Layout */
    .app-container {
        flex-direction: column;
        height: auto;
        min-height: 100vh;
        padding-top: env(safe-area-inset-top);
    }

    /* Sidebar slides in from right (RTL). On mobile it is an overlay on EVERY
       view, so the hamburger always works — override the desktop hide rule. */
    .app-container:not(.recipes-mode) > .sidebar {
        display: flex;
    }
    .sidebar {
        position: fixed;
        top: 0;
        /* Parked at right:0 and slid with transform instead of animating `right`.
           Equivalent visually, but transform is composited so the slide doesn't
           relayout the page on every frame. */
        right: 0;
        transform: translateX(100%);
        flex: 0 0 auto;
        width: 280px;
        height: 100vh;
        z-index: 300;
        transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
        padding-top: 80px;
        overflow-y: auto;
    }
    .sidebar.open {
        transform: translateX(0);
    }

    /* Main content full width */
    .main-content {
        padding: 0 16px 24px 16px;
        width: 100%;
        overflow-x: hidden;
    }

    /* View header */
    .view-header h2 {
        font-size: 26px;
        letter-spacing: -0.5px;
    }
    .flex-header {
        flex-direction: column;
        gap: 16px;
        align-items: flex-start;
    }

    /* Simulator pill */
    .simulator-controls {
        width: 100%;
        border-radius: var(--radius-md);
        padding: 12px 16px;
    }

    /* Stats cards - 1 column */
    .dashboard-stats {
        grid-template-columns: 1fr;
        gap: 16px;
        margin-bottom: 28px;
    }
    .stat-card {
        padding: 20px;
    }
    .stat-card h3 {
        font-size: 32px;
    }

    /* Charts - 1 column */
    .charts-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-bottom: 28px;
    }
    .top-sellers-card {
        grid-column: span 1 !important;
    }
    .chart-card {
        padding: 20px;
    }
    .chart-wrapper {
        height: 200px;
    }

    /* Dashboard table - scrollable */
    .dashboard-table-wrap,
    .dashboard-table-wrap .table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .dashboard-table th,
    .dashboard-table td {
        padding: 12px 14px;
        white-space: nowrap;
        font-size: 13px;
    }

    /* Ingredient table - horizontal scroll, readable name column */
    .recipe-card .table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: var(--radius-md);
    }
    .recipe-card table {
        display: table;
        min-width: 480px; /* forces scroll before squishing */
    }
    .recipe-card thead {
        display: table-header-group;
    }
    .recipe-card tbody {
        display: table-row-group;
        gap: 0;
        padding: 0;
        background: transparent;
    }
    .recipe-card tbody tr {
        display: table-row;
        flex-direction: unset;
        background: transparent;
        border-radius: 0;
        padding: 0;
        border: none;
        border-bottom: 1px solid var(--border-color);
        gap: 0;
        position: static;
    }
    .recipe-card tbody tr:hover td {
        background: var(--bg-input);
    }
    .recipe-card tbody td {
        display: table-cell;
        padding: 14px 16px;
        border-bottom: 1px solid var(--border-color);
        font-size: 14px;
    }
    .recipe-card tbody td:first-child {
        display: table-cell;
        position: static;
        top: auto;
        left: auto;
        width: 36px;
    }
    /* Name column gets generous min-width */
    .recipe-card tbody td:nth-child(2) {
        min-width: 180px;
        width: auto;
    }
    .recipe-card tbody td:nth-child(2) .name-input {
        font-size: 14px;
        font-weight: 600;
        padding: 6px 8px;
        width: 100%;
        background: transparent;
        border-color: transparent;
    }
    .recipe-card tbody td:nth-child(2)::before,
    .recipe-card tbody td:nth-child(3)::before,
    .recipe-card tbody td:nth-child(4)::before,
    .recipe-card tbody td:nth-child(5)::before {
        content: none;
    }
    .recipe-card tbody td:nth-child(3),
    .recipe-card tbody td:nth-child(4),
    .recipe-card tbody td:nth-child(5) {
        display: table-cell;
        width: auto;
        vertical-align: middle;
    }
    .recipe-card tbody td .qty-input {
        width: 80px;
        font-size: 14px;
    }
    .recipe-card tbody td:nth-child(5) strong {
        font-size: 14px;
        color: var(--success);
        display: inline;
        padding: 0;
    }
    .recipe-card .add-ingredient-btn {
        margin: 12px auto 4px;
        width: auto;
    }

    /* Recipe cards */
    .recipe-card {
        padding: 20px;
    }
    .recipe-header {
        flex-direction: column;
        gap: 16px;
    }
    .recipe-title-group {
        flex: 1 1 auto;
        width: 100%;
    }
    .recipe-meta {
        gap: 16px;
        flex-wrap: wrap;
    }
    .meta-item {
        align-items: flex-start;
    }
    .dish-name {
        font-size: 20px;
        letter-spacing: -0.5px;
    }

    /* Add dish button */
    .add-dish-btn {
        margin-top: 20px;
        padding: 18px;
    }

    /* Top list items */
    .top-list li {
        padding: 12px 14px;
    }
}