/* ==========================================================================
   Calculation settings: trigger + drawer
   ========================================================================== */

.settings-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 16px;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: var(--bg-solid);
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: border-color 0.2s ease, background 0.2s ease;
}
.settings-trigger:hover { border-color: var(--primary-color); background: var(--bg-input); }
.settings-trigger:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px; }
.settings-trigger-summary {
    padding-inline-start: 10px;
    margin-inline-start: 2px;
    border-inline-start: 1px solid var(--border-color);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
@media (max-width: 640px) {
    .settings-trigger-summary { display: none; }
}

.drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(3px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
    z-index: 9998;
}
.drawer-overlay.is-open { opacity: 1; visibility: visible; }

/* RTL: slides in from the right, the side the content starts on. */
.calc-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: min(400px, 92vw);
    height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--bg-solid);
    border-inline-start: 1px solid var(--border-color);
    box-shadow: -12px 0 40px rgba(0, 0, 0, 0.16);
    transform: translateX(100%);
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 9999;
}
.calc-drawer.is-open { transform: translateX(0); }

.drawer-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 22px 22px 16px;
    border-bottom: 1px solid var(--border-color);
    flex: 0 0 auto;
}
.drawer-title {
    margin: 0 0 4px;
    font-size: 19px;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.3px;
}
.drawer-sub { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text-muted); }

.drawer-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 26px;
}
.drawer-field { display: flex; flex-direction: column; gap: 8px; }
.drawer-field > label {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
}
.drawer-input-row { display: flex; align-items: center; gap: 10px; }
.drawer-field input[type="number"],
.drawer-field select {
    flex: 1;
    min-height: 46px;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--bg-input);
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 17px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    width: 100%;
}
.drawer-field input[type="number"]:focus,
.drawer-field select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
.drawer-unit {
    flex: 0 0 auto;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
}
.drawer-help { margin: 0; font-size: 12px; line-height: 1.55; color: var(--text-muted); }

.drawer-secondary-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 4px;
    min-height: 44px;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px dashed var(--border-color);
    background: transparent;
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.drawer-secondary-btn:hover {
    border-style: solid;
    border-color: var(--primary-color);
    color: var(--primary-color);
    background: rgba(37, 99, 235, 0.06);
}

.drawer-foot {
    flex: 0 0 auto;
    padding: 16px 22px;
    border-top: 1px solid var(--border-color);
}
.drawer-foot .supplier-btn { width: 100%; }

@media (prefers-reduced-motion: reduce) {
    .calc-drawer, .drawer-overlay { transition: none; }
}

/* ==========================================================================
   Top navigation: three explicit zones (brand · tabs · utilities)
   ========================================================================== */

.top-nav-container {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
    padding: 10px 16px;
    overflow: visible;
}
.top-nav-brand {
    flex: 0 0 auto;
    padding-inline-end: 16px;
    border-inline-end: 1px solid var(--border-color);
}
.top-nav-main {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: flex-start;
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
    /* Breathing room on ALL four sides so the active pill's glow is not clipped.
       This is a scroll container, so anything the shadow needs must exist as
       padding INSIDE it. 2px horizontal was not enough for an 18px blur, which
       sliced the leading edge of the active pill flat. */
    padding: 6px 10px;
}
.top-nav-main .top-nav-item { flex: 0 0 auto; }
.top-nav-main::-webkit-scrollbar { display: none; }
.top-nav-actions {
    flex: 0 0 auto;
    padding-inline-start: 14px;
    border-inline-start: 1px solid var(--border-color);
}
.top-nav-item {
    padding: 9px 16px;
    font-size: 14px;
    font-weight: 600;
}
.top-nav-item.active { font-weight: 700; }

@media (max-width: 900px) {
    .top-nav-brand { display: none; }
    .top-nav-container { gap: 10px; padding: 8px 10px; }
}

/* ==========================================================================
   Recipe category filter bar (replaced the layout-shifting sidebar)
   ========================================================================== */

.category-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 14px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    margin-bottom: 20px;
}

.cat-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 40px;
    padding: 8px 16px;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: var(--bg-input);
    color: var(--text-secondary);
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.cat-chip:hover {
    background: var(--bg-solid);
    color: var(--text-primary);
    border-color: var(--primary-color);
}
.cat-chip.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
    font-weight: 700;
}
.cat-chip:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px; }

.cat-chip-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--bg-solid);
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.cat-chip.active .cat-chip-count {
    background: rgba(255, 255, 255, 0.24);
    color: #fff;
}

.cat-chip-clear {
    background: transparent;
    border-style: dashed;
    color: var(--danger);
}
.cat-chip-clear:hover {
    background: var(--danger);
    border-color: var(--danger);
    color: #fff;
}

/* Category sections stack inside the single recipes view now. */
.cat-section { margin-bottom: 36px; }
.cat-section:last-child { margin-bottom: 0; }
.cat-section .view-header { margin-bottom: 16px; }

@media (prefers-reduced-motion: reduce) {
    .cat-chip { transition: none; }
}

/* ==========================================================================
   Dish -> raw ingredient mapping page
   ========================================================================== */

.mapping-table td { vertical-align: top; padding-top: 14px; padding-bottom: 14px; }
.map-dish-cat {
    margin-top: 3px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
}

.raw-pill-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
}

.raw-pill {
    display: inline-flex;
    align-items: stretch;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: var(--bg-input);
    overflow: hidden;
    transition: border-color 0.2s ease;
}
.raw-pill:hover { border-color: var(--primary-color); }

/* A raw name with no matching inventory item cannot be costed or ordered,
   so it is flagged rather than looking like a valid mapping. */
.raw-pill.is-missing {
    border-color: var(--warning);
    background: var(--warning-bg);
}

.raw-pill-label {
    padding: 7px 12px;
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}
.raw-pill.is-missing .raw-pill-label { color: var(--warning); }
.raw-pill-label:hover { text-decoration: underline; }

.raw-pill-x {
    padding: 0 9px;
    border: none;
    border-inline-start: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-muted);
    font-family: var(--font-sans);
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
}
.raw-pill-x:hover { background: var(--danger); color: #fff; }

.raw-add-btn {
    padding: 7px 12px;
    border-radius: 999px;
    border: 1px dashed var(--border-color);
    background: transparent;
    color: var(--text-secondary);
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}
.raw-add-btn:hover {
    border-style: solid;
    border-color: var(--primary-color);
    color: var(--primary-color);
    background: rgba(37, 99, 235, 0.06);
}

.raw-empty { font-size: 13px; color: var(--warning); font-weight: 600; }

.supplier-icon-btn.raw-delete { color: var(--danger); }
.supplier-icon-btn.raw-delete:hover { background: var(--danger); border-color: var(--danger); color: #fff; }

@media (prefers-reduced-motion: reduce) {
    .raw-pill { transition: none; }
}

/* --- Manual Monday refresh + freshness stamp --- */
.forecast-head-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.sync-stamp {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.refresh-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: var(--bg-solid);
    color: var(--text-secondary);
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.refresh-btn:hover:not(:disabled) {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}
.refresh-btn:disabled { opacity: 0.55; cursor: progress; }
.refresh-btn.is-syncing svg { animation: refresh-spin 0.9s linear infinite; }

@keyframes refresh-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .refresh-btn.is-syncing svg { animation: none; }
}

/* --- Two-up forecast charts --- */
.forecast-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}
.forecast-grid .forecast-card { margin-bottom: 0; }
/* A grid item defaults to `min-width: auto`, so a wide child stretches the
   track rather than scrolling inside it. The legend rail is exactly that kind
   of child. */
.forecast-grid > .chart-card { min-width: 0; }
@media (max-width: 900px) {
    .forecast-grid { grid-template-columns: 1fr; }
}

/* --- Inline calculation controls (replaced the drawer) --- */
.calc-controls {
    display: flex;
    align-items: flex-end;
    gap: 18px;
    flex-wrap: wrap;
    padding: 14px 18px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
}
.calc-control { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.calc-control > label {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary);
    white-space: nowrap;
}
.calc-control-input {
    display: flex;
    align-items: center;
    gap: 7px;
}
.calc-control-input input[type="number"] {
    width: 84px;
    min-height: 40px;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--bg-input);
    color: var(--primary-color);
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 800;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.calc-control-input select {
    min-height: 40px;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--bg-input);
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 700;
}
.calc-control-input input:focus,
.calc-control-input select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
.calc-control-input > span {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
}

/* The מחיר ספק cell on a recipe row.
 *
 * This was read-only, with a tooltip sending the manager to מלאי קיים to change
 * it - a round trip to edit a number already on screen. It is now an input, and
 * the "מהמלאי" caption matters more rather than less: it says the price belongs
 * to the stock item, so an edit here reprices every dish that uses it. The
 * caption therefore sits directly under the field, not beside it. */
.price-from-inv {
    display: inline-flex;
    flex-direction: column;
    line-height: 1.25;
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}
.price-from-inv small {
    font-size: 10px;
    font-weight: 600;
    color: var(--success);
}

/* --- Mapping page: save stamp + export actions --- */
.mapping-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.sync-stamp.is-saved { color: var(--success); }

/* --- Recipes page: view toggle + table --- */
.recipes-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.map-dish-cost {
    margin-top: 4px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

/* Segmented-control buttons inside .view-toggle-btns (the container class
   styled only itself; bare <button>s inside rendered as browser defaults). */
.view-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 38px;
    padding: 8px 14px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-secondary);
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s ease, color 0.2s ease;
}
.view-toggle-btn:hover { color: var(--text-primary); }
.view-toggle-btn.active {
    background: var(--bg-solid);
    color: var(--primary-color);
    font-weight: 700;
    box-shadow: var(--shadow-sm);
}
.view-toggle-btn:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px; }

/* --- Inventory controls bar: bigger, clearer --- */
.inv-bar {
    padding: 16px 20px !important;
    border-radius: var(--radius-md) !important;
    gap: 14px;
}
.inv-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip-btn.chip-lg {
    min-height: 44px;
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 700;
}
.inv-tools {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.inv-search {
    min-height: 44px;
    padding: 10px 16px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--bg-input);
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 15px;
    width: 220px;
}
.inv-search:focus, .inv-select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
.inv-select {
    min-height: 44px;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--bg-input);
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 600;
}
.inv-bar .view-toggle-btn { min-height: 44px; font-size: 14px; }
.inv-suppliers-btn {
    max-width: fit-content;
    min-height: 44px;
    padding: 10px 18px !important;
    background: var(--bg-surface);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    font-size: 14px !important;
    font-weight: 700;
}
.inv-suppliers-btn:hover { border-color: var(--primary-color); color: var(--primary-color); }

/* עלות כוללת: prime cost plus the dish's overhead share */
.total-cost-badge {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--warning-bg);
    border: 1px solid var(--warning);
    color: var(--warning);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   System health modal
   ========================================================================== */
.fx-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 16px;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: var(--bg-solid);
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: border-color 0.2s ease, background 0.2s ease;
}
.fx-trigger:hover { border-color: var(--primary-color); background: var(--bg-input); }
.fx-glyph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 7px;
    background: rgba(37, 99, 235, 0.12);
    color: var(--primary-color);
    font-size: 15px;
    font-weight: 800;
    line-height: 1;
}

.health-card { max-width: 940px; }

.health-summary { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.health-pill {
    padding: 7px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    border: 1px solid var(--border-color);
}
.health-pill strong { font-size: 15px; margin-inline-end: 4px; }
.health-pill-ok { background: var(--success-bg); border-color: var(--success); color: var(--success); }
.health-pill-warn { background: var(--warning-bg); border-color: var(--warning); color: var(--warning); }
.health-pill-err { background: var(--danger-bg); border-color: var(--danger); color: var(--danger); }

.health-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--border-color);
}
.health-tab {
    padding: 10px 16px;
    border: none;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--text-secondary);
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}
.health-tab.active { color: var(--primary-color); border-bottom-color: var(--primary-color); }

.health-pane { flex: 1 1 auto; min-height: 0; overflow-y: auto; }

.health-table { font-size: 13px; }
.health-table td, .health-table th { padding: 11px 12px; vertical-align: top; }
.health-page {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    font-size: 11px;
    font-weight: 700;
    color: var(--text-secondary);
    white-space: nowrap;
}
.health-formula {
    display: block;
    font-family: var(--font-sans);
    font-size: 12px;
    line-height: 1.6;
    color: var(--text-secondary);
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 6px 9px;
    direction: rtl;
}
.health-value { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.health-status { white-space: nowrap; }
.health-note {
    margin-top: 3px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    white-space: normal;
    line-height: 1.45;
}

.health-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    margin-inline-end: 5px;
    vertical-align: middle;
}
.health-dot-ok { background: var(--success); box-shadow: 0 0 0 3px var(--success-bg); }
.health-dot-warn { background: var(--warning); box-shadow: 0 0 0 3px var(--warning-bg); }
.health-dot-err { background: var(--danger); box-shadow: 0 0 0 3px var(--danger-bg); }
.health-dot-label { font-size: 12px; font-weight: 700; }

.health-int-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 13px 15px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--bg-input);
    margin-bottom: 8px;
}
.health-int-name { font-size: 14px; font-weight: 700; color: var(--text-primary); }

/* The health table has 5 columns; let it scroll inside its own container
   instead of overflowing the modal and clipping the status column. */
.health-pane .table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.health-table { min-width: 760px; }
.health-table th:nth-child(3), .health-table td:nth-child(3) { min-width: 260px; }
.health-table th:nth-child(4), .health-table td:nth-child(4) { min-width: 110px; }
.health-table th:nth-child(5), .health-table td:nth-child(5) { min-width: 130px; }
.health-formula { white-space: normal; overflow-wrap: anywhere; }

/* ==========================================================================
   Health: dashboard alert, chip, filterable pills, sticky table head
   ========================================================================== */

.health-alert {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    margin-bottom: 18px;
    border-radius: var(--radius-md);
    background: var(--danger-bg);
    border: 1px solid var(--danger);
}
.health-alert-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 30px;
    padding: 0 8px;
    border-radius: 999px;
    background: var(--danger);
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    flex: 0 0 auto;
}
.health-alert-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.health-alert-text strong { font-size: 14px; color: var(--danger); }
.health-alert-text span { font-size: 12px; color: var(--text-secondary); overflow-wrap: anywhere; }
.health-alert-btn {
    flex: 0 0 auto;
    min-height: 40px;
    padding: 9px 16px;
    border-radius: 999px;
    border: none;
    background: var(--danger);
    color: #fff;
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}
.health-alert-btn:hover { filter: brightness(0.93); }

/* Chip lives in the controls box and matches the other controls' rhythm. */
.calc-control-health { min-width: 150px; }
.health-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 8px 14px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--bg-input);
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.2s ease, background 0.2s ease;
}
.health-chip:hover { border-color: var(--primary-color); }
.health-chip.has-error { border-color: var(--danger); color: var(--danger); background: var(--danger-bg); }
.health-chip.has-warn { border-color: var(--warning); color: var(--warning); background: var(--warning-bg); }
.fx-glyph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: rgba(37, 99, 235, 0.12);
    color: var(--primary-color);
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
}
.health-chip.has-error .fx-glyph { background: rgba(220, 38, 38, 0.14); color: var(--danger); }
.health-chip.has-warn .fx-glyph { background: rgba(217, 119, 6, 0.14); color: var(--warning); }

/* Summary pills are buttons that filter the tables. */
.health-pill {
    cursor: pointer;
    font-family: var(--font-sans);
    transition: transform 0.15s ease, filter 0.15s ease;
}
.health-pill:hover:not(:disabled) { filter: brightness(0.96); }
.health-pill:disabled { opacity: 0.45; cursor: default; }
.health-pill.is-active { box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18); }
.health-pill-all { background: var(--bg-input); border-color: var(--border-color); color: var(--text-secondary); }

/* Header row stays visible while scrolling a long table. */
.health-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--bg-solid);
    box-shadow: 0 1px 0 var(--border-color);
}

/* Rows carry their status colour so problems are findable at a glance. */
.health-row-err { background: var(--danger-bg); }
.health-row-warn { background: var(--warning-bg); }

.health-scope, .health-calc, .health-fix {
    margin-top: 4px;
    font-size: 11px;
    line-height: 1.5;
    white-space: normal;
}
.health-scope { color: var(--text-muted); font-weight: 600; }
.health-calc {
    color: var(--text-secondary);
    font-weight: 700;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 4px 7px;
    display: inline-block;
}
.health-fix { color: var(--primary-color); font-weight: 700; }

/* Numbers read left-to-right inside RTL Hebrew. */
.num {
    display: inline-block;
    direction: ltr;
    unicode-bidi: isolate;
    font-variant-numeric: tabular-nums;
}

/* --- Unmapped-ingredient explanation banner --- */
.mapping-warning {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    margin-bottom: 14px;
    border-radius: var(--radius-md);
    background: var(--warning-bg);
    border: 1px solid var(--warning);
}
.mapping-warn-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--warning);
    color: #fff;
    font-weight: 800;
    font-size: 15px;
}
.mapping-warning strong { display: block; font-size: 14px; color: var(--warning); margin-bottom: 3px; }
.mapping-warning span { display: block; font-size: 12px; line-height: 1.6; color: var(--text-secondary); }
.mapping-warn-fix { margin-top: 5px; color: var(--primary-color) !important; font-weight: 700; }

/* --- Activity log --- */
.activity-table td { vertical-align: top; padding-top: 12px; padding-bottom: 12px; }
.activity-level {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}
.activity-level-info { background: var(--bg-input); border: 1px solid var(--border-color); color: var(--text-secondary); }
.activity-level-warn { background: var(--warning-bg); border: 1px solid var(--warning); color: var(--warning); }
.activity-level-error { background: var(--danger-bg); border: 1px solid var(--danger); color: var(--danger); }
.activity-row.activity-error { background: var(--danger-bg); }
.activity-row.activity-warn { background: var(--warning-bg); }
.activity-problem {
    margin-top: 4px;
    font-size: 11px;
    line-height: 1.5;
    color: var(--danger);
    font-weight: 600;
}
.activity-flag {
    margin-top: 4px;
    font-size: 11px;
    font-weight: 700;
    color: var(--warning);
}

/* ==========================================================================
   Big tab strip (history page): browser-tab metaphor
   ========================================================================== */
.tab-strip {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    margin-bottom: 0;
    padding: 0 6px;
    border-bottom: 2px solid var(--border-color);
    flex-wrap: wrap;
}
.big-tab {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 14px 22px;
    border: 2px solid transparent;
    border-bottom: none;
    border-radius: 12px 12px 0 0;
    background: transparent;
    color: var(--text-secondary);
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    position: relative;
    bottom: -2px;
    transition: background 0.2s ease, color 0.2s ease;
}
.big-tab:hover { background: var(--bg-input); color: var(--text-primary); }
/* Active tab visually merges with the panel below, like a browser tab. */
.big-tab.active {
    background: var(--bg-solid);
    border-color: var(--border-color);
    color: var(--primary-color);
    box-shadow: 0 -3px 10px rgba(0, 0, 0, 0.04);
}
.big-tab.active::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 3px;
    background: var(--bg-solid);
}
.big-tab:focus-visible { outline: 2px solid var(--primary-color); outline-offset: -4px; }
.tab-strip-actions { margin-inline-start: auto; padding-bottom: 8px; }

.tab-panel {
    background: var(--bg-solid);
    border: 2px solid var(--border-color);
    border-top: none;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    padding: 22px;
    margin-bottom: 24px;
}

@media (max-width: 700px) {
    .big-tab { padding: 12px 14px; font-size: 13px; }
    .big-tab span { display: inline; }
    .tab-strip-actions { width: 100%; margin: 6px 0 0; padding-bottom: 6px; }
}

/* Drive failure guidance */
.drive-fix-steps {
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    font-size: 13px;
    line-height: 1.6;
}
.drive-fix-steps strong { display: block; margin-bottom: 6px; color: var(--text-primary); }
.drive-fix-steps ol { margin: 0 18px 10px 0; padding: 0; color: var(--text-secondary); }
.drive-fix-steps li { margin-bottom: 4px; }
.drive-fix-steps span { color: var(--text-secondary); }