/* ======================================================================
   Two-tier stat grid
   Same nine tiles, same icons, same tone colours. Compressed by putting
   the icon beside the number instead of above it, which removes a whole
   line of height per tile, and by demoting six of the nine to a smaller
   second tier. Three lead tiles come first regardless of markup order.

   Opt-in via .stats-two-tier on the grid, so the tiles on every other
   page keep the original presentation until this is judged on the
   dashboard first.
   ====================================================================== */
.stats-two-tier { gap: 9px; }

.stats-two-tier .stat-tile {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    /* Declared explicitly because `grid-row: 1 / -1` on the icon counts
       explicit track lines only. With implicit rows the span resolves to a
       single row and the icon lands back above the value. */
    grid-template-rows: auto auto auto auto;
    align-items: center;
    column-gap: 11px;
    row-gap: 0;
    gap: 0 11px;
    padding: 10px 12px;
}
/* The 3px tone bar repeated nine times was most of the colour noise. The
   tone still reads from the icon tile and the value. */
.stats-two-tier .stat-tile.st-tone-primary,
.stats-two-tier .stat-tile.st-tone-ok,
.stats-two-tier .stat-tile.st-tone-warn,
.stats-two-tier .stat-tile.st-tone-danger,
.stats-two-tier .stat-tile.st-tone-accent {
    border-top: 1px solid var(--border-color);
}

/* `display: contents` lifts the icon and the label out of .st-head so both
   can be placed on the tile's own grid. Without it the icon cannot sit
   beside the value, since it is nested a level deeper. */
.stats-two-tier .st-head { display: contents; }
.stats-two-tier .st-icon-tile { grid-column: 1; grid-row: 1 / -1; }
.stats-two-tier .st-label,
.stats-two-tier .st-value,
.stats-two-tier .st-footer,
.stats-two-tier .sim-diff { grid-column: 2; }
.stats-two-tier .st-label  { grid-row: 1; }
.stats-two-tier .st-value  { grid-row: 2; }
.stats-two-tier .sim-diff  { grid-row: 3; }
.stats-two-tier .st-footer { grid-row: 4; }

.stats-two-tier .st-label { font-size: 11px; line-height: 1.25; }
.stats-two-tier .st-value { margin: 1px 0 0; }
.stats-two-tier .st-footer { margin-top: 1px; }

/* The pill chrome is dropped, the wording is kept. "ללא טיפים" and
   "לפני תקורות" are the difference between two figures that otherwise
   look interchangeable, so losing them to save height is a bad trade. */
.stats-two-tier .st-sub-pill {
    background: none;
    padding: 0;
    border-radius: 0;
    font-size: 10.5px;
    font-weight: 500;
    color: var(--text-secondary, #4b5563);
    /* Wrapping beats an ellipsis here. These strings are the caveat on the
       number above them, so a clipped one is worse than a taller tile. */
    white-space: normal;
    line-height: 1.3;
}
/* The value already states the percentage. */
.stats-two-tier .st-bar-container { display: none; }
/* Formula note.
   The shared .calc-bubble is 260px of near-black positioned inside the tile,
   and .stat-tile clips its overflow, so on a tile this size the note was cut
   off at the edge and unreadable. Let it escape the tile, size it to its text,
   and dress it as a light note rather than a tooltip. */
.stats-two-tier .stat-tile { overflow: visible; }
.stats-two-tier .stat-tile:hover,
.stats-two-tier .stat-tile:focus-within { z-index: 30; }

/* The trigger stops being the positioning context so the note can be measured
   against the tile. Left as-is, the note's containing block is an 18px icon and
   `inset-inline: 0` collapses it to 18px wide. The icon takes over the absolute
   placement the trigger used to do. */
.stats-two-tier .calc-tooltip { position: static !important; }
.stats-two-tier .calc-icon {
    position: absolute;
    top: 7px;
    left: 9px;
    width: 18px;
    height: 18px;
    border-radius: 6px;
    box-shadow: none;
    z-index: 2;
}
.stats-two-tier .calc-icon svg { width: 10px; height: 10px; }

.stats-two-tier .calc-bubble {
    /* Spans the tile rather than sizing to its text. A fixed 250px note runs
       past the edge tiles, and .main-content sets overflow-x: hidden, so the
       overflow is cut rather than scrolled. Matching the tile makes the note
       impossible to clip at any column count or width. */
    width: auto;
    max-width: none;
    left: 10px;
    right: 10px;
    top: 30px;
    display: flex;
    align-items: flex-start;
    gap: 7px;
    padding: 8px 10px;
    border-radius: 10px;
    background: var(--bg-solid);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.14);
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.45;
    text-align: right;
}
/* Calculator glyph, repeated inside the note so it reads as a formula rather
   than as a generic tooltip. A background image cannot inherit currentColor,
   so this is the one place the primary blue is written out. */
.stats-two-tier .calc-bubble::before {
    content: "";
    flex: none;
    width: 13px;
    height: 13px;
    margin-top: 1px;
    background-color: #2563eb;
    -webkit-mask: var(--calc-glyph) center / contain no-repeat;
    mask: var(--calc-glyph) center / contain no-repeat;
}
.stats-two-tier .calc-bubble {
    --calc-glyph: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'><rect x='4' y='2' width='16' height='20' rx='2'/><line x1='8' y1='6' x2='16' y2='6'/><line x1='8' y1='11' x2='8' y2='11'/><line x1='12' y1='11' x2='12' y2='11'/><line x1='16' y1='11' x2='16' y2='11'/><line x1='8' y1='15' x2='8' y2='15'/><line x1='12' y1='15' x2='12' y2='15'/><line x1='16' y1='15' x2='16' y2='19'/><line x1='8' y1='19' x2='12' y2='19'/></svg>");
}
.stats-two-tier .calc-bubble::after {
    border-color: transparent transparent var(--border-color) transparent;
    left: 10px;
}

/* Tier one. Selected by id so the order survives markup edits. */
/* Lead row follows the money in order: what came in, what was left before
   overheads, what was left after. All three are the same green tone. */
.stats-two-tier .stat-tile:has(#stat-real-revenue) { order: -3; }
.stats-two-tier .stat-tile:has(#stat-total-profit) { order: -2; }
.stats-two-tier .stat-tile:has(#stat-net-profit)   { order: -1; }

.stats-two-tier .stat-tile:is(:has(#stat-real-revenue), :has(#stat-total-profit), :has(#stat-net-profit)) {
    padding: 12px 14px;
}
.stats-two-tier .stat-tile:is(:has(#stat-real-revenue), :has(#stat-total-profit), :has(#stat-net-profit)) .st-label {
    font-size: 12px;
}
.stats-two-tier .stat-tile:is(:has(#stat-real-revenue), :has(#stat-total-profit), :has(#stat-net-profit)) .st-value {
    font-size: clamp(22px, 1.9vw, 26px);
}

/* Tier two: everything else, one step down. */
.stats-two-tier .stat-tile:not(:has(#stat-real-revenue), :has(#stat-total-profit), :has(#stat-net-profit)) {
    padding: 8px 11px;
}
.stats-two-tier .stat-tile:not(:has(#stat-real-revenue), :has(#stat-total-profit), :has(#stat-net-profit)) .st-label {
    font-size: 10.5px;
}
.stats-two-tier .stat-tile:not(:has(#stat-real-revenue), :has(#stat-total-profit), :has(#stat-net-profit)) .st-sub-pill {
    font-size: 10px;
}
.stats-two-tier .stat-tile:not(:has(#stat-real-revenue), :has(#stat-total-profit), :has(#stat-net-profit)) .st-icon-tile {
    width: 28px;
    height: 28px;
    border-radius: 8px;
}
.stats-two-tier .stat-tile:not(:has(#stat-real-revenue), :has(#stat-total-profit), :has(#stat-net-profit)) .st-icon-tile svg {
    width: 14px;
    height: 14px;
}
.stats-two-tier .stat-tile:not(:has(#stat-real-revenue), :has(#stat-total-profit), :has(#stat-net-profit)) .st-value {
    font-size: clamp(16px, 1.35vw, 19px);
}

@media (max-width: 900px) {
    .stats-two-tier { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 430px) {
    .stats-two-tier { grid-template-columns: 1fr !important; }
}

/* ==========================================================================
   AI cost notice

   Sits beside any button that spends money, so nobody discovers the price
   after the fact. The figure comes from what previous runs actually cost.
   ========================================================================== */

.ai-cost-notice {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    flex-wrap: wrap;
    margin: 10px 0;
    padding: 10px 13px;
    border-radius: var(--radius-md);
    border: 1px solid var(--warning);
    background: var(--warning-bg);
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--text-primary);
}
.ai-cost-notice .ui-icon { color: var(--warning); margin-top: 1px; }
.ai-cost-notice b { direction: ltr; unicode-bidi: isolate; }
.ai-cost-basis {
    flex-basis: 100%;
    font-size: 11px;
    color: var(--text-muted);
}

/* Delete control on the recipes table lens. Muted until the row is hovered, so
   a destructive action is reachable without advertising itself on every row. */
.map-dish-head { display: flex; align-items: center; gap: 8px; }
.map-dish-del {
    background: none;
    border: none;
    padding: 2px;
    cursor: pointer;
    color: var(--text-muted);
    opacity: 0;
    transition: opacity 0.15s, color 0.15s;
}
tr:hover .map-dish-del { opacity: 1; }
.map-dish-del:hover { color: var(--danger); }
.map-dish-del:focus-visible { opacity: 1; outline: 2px solid var(--danger); border-radius: 4px; }

/* ==========================================================================
   New-dish draft: inline ingredient lines
   ========================================================================== */

.dish-draft-lines {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
}
.dish-draft-lines-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}
.draft-lines-empty {
    font-size: 12px;
    line-height: 1.55;
    color: var(--text-muted);
    background: var(--bg-main);
    border-radius: var(--radius-md);
    padding: 10px 12px;
}
/* Scrolls inside itself rather than pushing the draft card wider. */
.draft-lines-wrap { overflow-x: auto; }
.draft-lines { width: 100%; min-width: 460px; border-collapse: collapse; font-size: 12.5px; }
.draft-lines th {
    text-align: start;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    padding: 4px 6px;
    border-bottom: 1px solid var(--border-color);
    white-space: nowrap;
}
.draft-lines td { padding: 5px 6px; border-bottom: 1px solid var(--border-color); }
.draft-lines input {
    width: 100%;
    min-width: 62px;
    padding: 6px 8px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-input);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 12.5px;
    text-align: center;
}
.draft-line-name {
    display: inline-block;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
    font-weight: 700;
}
.draft-line-warn {
    display: inline-block;
    margin-inline-start: 6px;
    font-size: 10px;
    font-weight: 700;
    color: var(--warning);
}
.draft-unit { color: var(--text-muted); font-size: 11px; white-space: nowrap; }
.draft-line-cost { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 700; }
.draft-total {
    margin-top: 10px;
    font-size: 12.5px;
    color: var(--text-secondary);
}
.draft-total b { color: var(--text-primary); font-variant-numeric: tabular-nums; }

/* Inline ingredient search in the new-dish dialog. Replaces a button that
   opened the picker as a second modal over this one. */
.draft-ing-search { position: relative; margin-bottom: 10px; }
.draft-ing-search input {
    width: 100%;
    min-height: 42px;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-input);
    font-family: inherit;
    font-size: 13.5px;
}
.draft-ing-search input:focus {
    outline: none;
    border-color: var(--primary-color);
}
.draft-ing-results {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 6px;
    max-height: 260px;
    overflow-y: auto;
}
.draft-ing-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--border-color);
    border-radius: 9px;
    background: var(--bg-solid);
    font-family: inherit;
    font-size: 13px;
    text-align: start;
    cursor: pointer;
}
.draft-ing-row:hover,
.draft-ing-row.is-active {
    border-color: var(--primary-color);
    background: var(--bg-input);
}
.draft-ing-name { color: var(--text-primary); }
.draft-ing-meta { font-size: 11.5px; color: var(--text-muted); white-space: nowrap; }
.draft-ing-nostock { color: var(--warning); }
.draft-ing-empty {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 12px;
    border: 1px dashed var(--border-color);
    border-radius: 9px;
    font-size: 12.5px;
    color: var(--text-muted);
}

/* Editable dish name in the table lens, matching the card lens. Looks like text
   until focused, so the row stays readable as a list rather than as a form. */
.map-dish-name {
    font-weight: 700;
    font-size: 14px;
    color: var(--text-primary);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 3px 6px;
    width: 100%;
    max-width: 260px;
    font-family: inherit;
}
.map-dish-name:hover { border-color: var(--border-color); background: var(--bg-main); }
.map-dish-name:focus {
    outline: none;
    border-color: var(--primary-color);
    background: var(--bg-solid);
}

/* Ezra Custom Dropdown Component */
.ezra-dropdown {
    position: relative;
    display: inline-block;
    width: 100%;
    min-width: 140px;
    direction: rtl;
    font-family: var(--font-sans);
    text-align: right;
}
.ezra-dropdown-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 42px;
    padding: 9px 14px;
    background: var(--bg-input, var(--bg-surface));
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
    user-select: none;
}
.ezra-dropdown-btn:hover {
    border-color: var(--primary-color);
}
.ezra-dropdown.is-open .ezra-dropdown-btn,
.ezra-dropdown-btn:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
.ezra-dropdown-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ezra-dropdown-arrow {
    flex-shrink: 0;
    margin-right: 8px;
    color: var(--text-muted);
    transition: transform 0.2s;
}
.ezra-dropdown.is-open .ezra-dropdown-arrow {
    transform: rotate(180deg);
}
.ezra-dropdown-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    left: 0;
    z-index: 1050;
    background: var(--bg-surface, #ffffff);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    max-height: 280px;
    display: flex;
    flex-direction: column;
}
.ezra-dropdown-search-wrap {
    padding: 8px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-main);
}
.ezra-dropdown-search {
    width: 100%;
    padding: 7px 10px;
    background: var(--bg-input);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 13px;
    font-family: inherit;
    direction: rtl;
}
.ezra-dropdown-search:focus {
    outline: none;
    border-color: var(--primary-color);
}
.ezra-dropdown-options {
    overflow-y: auto;
    max-height: 220px;
    padding: 4px;
}
.ezra-dropdown-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 12px;
    border-radius: 8px;
    font-size: 13.5px;
    color: var(--text-primary);
    cursor: pointer;
    transition: background 0.15s;
}
.ezra-dropdown-item:hover,
.ezra-dropdown-item.focused {
    background: var(--bg-hover, rgba(37, 99, 235, 0.08));
    color: var(--primary-color);
}
.ezra-dropdown-item.selected {
    font-weight: 700;
    color: var(--primary-color);
    background: rgba(37, 99, 235, 0.12);
}
.ezra-dropdown-check {
    color: var(--primary-color);
    flex-shrink: 0;
}
.ezra-dropdown-empty {
    padding: 12px;
    text-align: center;
    font-size: 13px;
    color: var(--text-muted);
}

/* Option B Leaderboard Layout */
.option-b-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px;
}
.option-b-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}
.option-b-tabs {
    display: flex;
    gap: 6px;
    background: var(--bg-main);
    padding: 4px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
}
.option-b-tab {
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    background: transparent;
    border: none;
    border-radius: 7px;
    cursor: pointer;
    transition: all 0.2s;
}
.option-b-tab.active {
    background: var(--bg-surface);
    color: var(--primary-color);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}
.option-b-body {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 20px;
    min-height: 320px;
}
@media (max-width: 900px) {
    .option-b-body {
        grid-template-columns: 1fr;
    }
}
.option-b-list-wrap {
    overflow-y: auto;
    max-height: 380px;
}
.option-b-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.option-b-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s;
}
.option-b-item:hover,
.option-b-item.active {
    border-color: var(--primary-color);
    background: var(--bg-hover, rgba(37, 99, 235, 0.05));
}
.option-b-rank {
    font-size: 13px;
    font-weight: 800;
    color: var(--text-muted);
    width: 24px;
}
.option-b-dish-info {
    flex: 1;
    min-width: 0;
}
.option-b-dish-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.option-b-val {
    font-size: 14px;
    font-weight: 800;
    color: var(--primary-color);
    text-align: left;
    white-space: nowrap;
}
.option-b-subval {
    font-size: 11.5px;
    color: var(--text-muted);
    text-align: left;
}
.missing-cost-tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
}

/* Standalone Responsive Analytics & Leaderboards Grid */
.leaderboards-container {
    width: 100%;
    margin-bottom: 32px;
    min-width: 0;
}
.leaderboards-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}
.leaderboards-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    width: 100%;
    min-width: 0;
}
@media (max-width: 1024px) {
    .leaderboards-grid {
        grid-template-columns: 1fr;
    }
}
.leaderboard-card {
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: 20px;
    gap: 16px;
}
.leaderboard-card-head {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}
.leaderboard-card-head h5 {
    font-size: 17px;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0;
}
.leaderboard-badge {
    align-self: flex-start;
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 11.5px;
    font-weight: 800;
}
.badge-profit { background: rgba(16, 185, 129, 0.12); color: var(--success); }
.badge-volume { background: rgba(59, 130, 246, 0.12); color: var(--primary-color); }
.badge-fast { background: rgba(245, 158, 11, 0.12); color: #d97706; }
.badge-slow { background: rgba(239, 68, 68, 0.12); color: var(--danger); }

/* Dish Item Layout & Itemized Cost Tags */
.dish-item-wrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 14px;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    transition: background 0.15s, border-color 0.15s;
}
.dish-item-wrap:hover {
    border-color: var(--primary-color);
    background: var(--bg-hover, rgba(37, 99, 235, 0.04));
}
.dish-item-top {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.dish-item-main {
    flex: 1;
    min-width: 0;
}
.dish-item-name {
    font-size: 14.5px;
    font-weight: 800;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dish-item-meta {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 1px;
}
.dish-item-val {
    font-size: 14.5px;
    font-weight: 800;
    color: var(--primary-color);
    text-align: left;
    white-space: nowrap;
}
.dish-numbers-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin-top: 4px;
    font-size: 11px;
}
.num-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 6px;
    border-radius: 5px;
    font-weight: 600;
    white-space: nowrap;
}
.chip-profit { background: rgba(16, 185, 129, 0.08); color: var(--success); }
.chip-profit strong { color: var(--success); }
.chip-food { background: rgba(234, 88, 12, 0.08); color: #ea580c; }
.chip-food strong { color: #ea580c; }
.chip-labor { background: rgba(79, 70, 229, 0.08); color: #4f46e5; }
.chip-labor strong { color: #4f46e5; }
.chip-overhead { background: rgba(71, 85, 105, 0.08); color: #475569; }
.chip-overhead strong { color: #475569; }

/* auto-fit rather than a fixed two, because the dashboard now holds three
 * cards and a fixed pair leaves the third alone on its own row at half width.
 * With two cards this still resolves to two columns, so the inventory grid is
 * unchanged. */
.charts-standalone-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 24px;
    width: 100%;
    margin-bottom: 32px;
    min-width: 0;
}
.charts-standalone-grid .chart-card {
    min-width: 0;
    border-top: 3px solid var(--primary);
}
.charts-standalone-grid .chart-card h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0 0 16px 0;
}
.charts-standalone-grid .chart-card h4 .ui-icon {
    color: var(--primary);
    flex-shrink: 0;
}

/* Cost Bar Hover Micro-animations & Floating Tooltips */
.cost-bar-wrap {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
}
.cost-bar {
    position: relative;
    display: block;
    width: 100%;
    min-width: 0;
    height: auto !important;
    background: transparent !important;
    overflow: visible !important;
}
.cost-bar-track {
    display: flex;
    width: 100%;
    height: 32px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--border-color);
    position: relative;
}
.cost-bar .seg {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-width: 0;
    position: relative;
    transition: transform 0.2s, filter 0.2s, box-shadow 0.2s;
    cursor: pointer;
    overflow: hidden;
    border-left: 2px solid var(--bg-main);
    box-sizing: border-box;
}
.cost-bar .seg:last-child {
    border-left: none;
}
.cost-bar .seg .seg-text {
    display: block;
    font-size: 12px;
    font-weight: 800;
    color: #fff;
    white-space: nowrap;
    line-height: 1;
    margin: 0;
    padding: 0;
    text-shadow: 0 1px 2px rgba(0,0,0,0.4);
    pointer-events: none;
}
.cost-bar .seg:hover {
    transform: translateY(-2px);
    filter: brightness(1.15);
    z-index: 10;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    border-radius: 4px;
}
.cost-bar-tooltip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: var(--bg-surface, #1e293b);
    color: var(--text-primary, #ffffff);
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border-color);
    z-index: 50;
    text-align: center;
    direction: rtl;
}
.cost-bar .seg:hover .cost-bar-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* Legend row beneath the bar - clean inline readable items */
.bar-legend-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 20px;
    margin-top: 10px;
    direction: rtl;
}
.bar-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-secondary, #475569);
    white-space: nowrap;
    padding: 3px 8px;
    border-radius: 6px;
    border: 1px solid transparent;
    transition: all 0.2s ease;
    cursor: pointer;
}
.bar-legend-item .legend-label {
    margin-left: 2px;
}
.bar-legend-item .legend-val {
    font-weight: 800;
    color: var(--text-primary);
}
.bar-legend-item .legend-pct {
    color: var(--text-muted);
}

/* Bi-directional hover highlighting between bar segment and legend item */
.cost-bar-wrap:has(.seg-food:hover) .legend-food,
.cost-bar-wrap:has(.legend-food:hover) .legend-food {
    background: rgba(234, 88, 12, 0.12);
    border-color: rgba(234, 88, 12, 0.4);
    transform: translateY(-1px);
}
.cost-bar-wrap:has(.seg-labor:hover) .legend-labor,
.cost-bar-wrap:has(.legend-labor:hover) .legend-labor {
    background: rgba(79, 70, 229, 0.12);
    border-color: rgba(79, 70, 229, 0.4);
    transform: translateY(-1px);
}
.cost-bar-wrap:has(.seg-overhead:hover) .legend-overhead,
.cost-bar-wrap:has(.legend-overhead:hover) .legend-overhead {
    background: rgba(100, 116, 139, 0.12);
    border-color: rgba(100, 116, 139, 0.4);
    transform: translateY(-1px);
}
.cost-bar-wrap:has(.seg-profit:hover) .legend-profit,
.cost-bar-wrap:has(.legend-profit:hover) .legend-profit {
    background: rgba(16, 185, 129, 0.12);
    border-color: rgba(16, 185, 129, 0.4);
    transform: translateY(-1px);
}

.cost-bar-wrap:has(.legend-food:hover) .seg-food,
.cost-bar-wrap:has(.legend-labor:hover) .seg-labor,
.cost-bar-wrap:has(.legend-overhead:hover) .seg-overhead,
.cost-bar-wrap:has(.legend-profit:hover) .seg-profit {
    filter: brightness(1.2);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    z-index: 10;
}

.cost-bar-wrap:has(.seg:hover) .bar-legend-item:not(:hover),
.cost-bar-wrap:has(.bar-legend-item:hover) .bar-legend-item:not(:hover) {
    opacity: 0.45;
}
.cost-bar-wrap:has(.seg-food:hover) .legend-food,
.cost-bar-wrap:has(.seg-labor:hover) .legend-labor,
.cost-bar-wrap:has(.seg-overhead:hover) .legend-overhead,
.cost-bar-wrap:has(.seg-profit:hover) .legend-profit {
    opacity: 1 !important;
}
.bar-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}
.dot-food { background: #ea580c; }
.dot-labor { background: #4f46e5; }
.dot-overhead { background: #64748b; }
.dot-profit { background: #10b981; }

/* Detail Panel Breakdown Styling */
.detail-anchor-box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 14px;
    background: var(--bg-main);
    border-radius: 10px;
    border: 1px solid var(--border-color);
    margin-top: 6px;
}
.detail-anchor-val {
    font-size: 13.5px;
    color: var(--text-muted);
}
.detail-anchor-val strong {
    font-size: 16px;
    color: var(--text-primary);
}
.detail-sales-summary {
    font-size: 13px;
    color: var(--text-muted);
}
.detail-sales-summary strong {
    color: var(--primary-color);
}
.detail-unpriced-box {
    padding: 18px;
    text-align: center;
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 10px;
}
.detail-unpriced-box p {
    margin: 8px 0 0 0;
    font-size: 13px;
    color: var(--text-muted);
}
.detail-breakdown-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.detail-breakdown-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-muted);
    margin-bottom: 2px;
}
.detail-total-cost-row {
    border-top: 1px solid var(--border-color);
    margin-top: 4px;
    padding-top: 10px;
    font-weight: 700;
}
.detail-profit-row {
    background: rgba(16, 185, 129, 0.1) !important;
    color: var(--success) !important;
    font-weight: 800;
}
.detail-bar-wrap {
    margin-top: 6px;
}
.detail-bar-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 6px;
}