/* ============================================================================
   Item history popup — the long-press card.

   Press and hold any item anywhere in the app and this answers the two
   questions actually asked over a counter: what did we charge for this last
   time, and who did we get it from and at what. Two rows, and a way through
   to the whole record.

   Styled here rather than in each page's own <style> block because the
   gesture is app-wide: the POS cart, the inventory table, transactions,
   supplier accounts and the returns list are four separate documents with
   four separate stylesheets, and a card that looks different on each of them
   would read as four different features. See item-history.js.

   Colours are the app's own: teal #0d9488 is the identity colour, amber
   #f59e0b the "look here" accent, and the dark theme keys off body.theme-dark
   exactly as the rest of the app does.
   ========================================================================= */

.ih-overlay {
    position: fixed;
    inset: 0;
    z-index: 2147483000;   /* above Bootstrap modals (1055) and the AI dock */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(8, 24, 22, .45);
    backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 160ms ease;
}
.ih-overlay.is-open { opacity: 1; pointer-events: auto; }

.ih-card {
    width: 100%;
    max-width: 420px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 18px 48px rgba(8, 24, 22, .28);
    /* Scales in from slightly small, so the card reads as having come from
       the thing that was pressed rather than having always been there. */
    transform: scale(.94);
    transition: transform 160ms cubic-bezier(.2, .9, .3, 1.1);
    font-size: .88rem;
    color: #0c1f1c;
}
.ih-overlay.is-open .ih-card { transform: scale(1); }

@media (prefers-reduced-motion: reduce) {
    .ih-overlay, .ih-card { transition: none; }
    .ih-overlay.is-open .ih-card, .ih-card { transform: none; }
}

.ih-head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 16px 10px;
    border-bottom: 1px solid #e6f1ee;
}
.ih-title { flex: 1; min-width: 0; }
.ih-name {
    font-weight: 800;
    font-size: .98rem;
    line-height: 1.25;
    word-break: break-word;
}
.ih-sub {
    margin-top: 2px;
    font-size: .72rem;
    color: #6b8f88;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.ih-close {
    flex: none;
    width: 28px; height: 28px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; border-radius: 8px;
    background: transparent; color: #6b8f88;
    cursor: pointer;
}
.ih-close:hover { background: #eef6f4; color: #0c1f1c; }

.ih-body { padding: 12px 16px 4px; }

/* One row per question. The label is the question, the figure is the answer,
   and everything else is the detail that makes the answer trustworthy. */
.ih-row {
    display: flex;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid #e6f1ee;
    border-radius: 12px;
    margin-bottom: 10px;
    background: #f8fcfb;
}
.ih-row-icon {
    flex: none;
    width: 30px; height: 30px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 9px;
    background: rgba(13, 148, 136, .12);
    color: #0d9488;
}
.ih-row.ih-supply .ih-row-icon { background: rgba(245, 158, 11, .14); color: #b45309; }
.ih-row-main { flex: 1; min-width: 0; }
.ih-row-label {
    font-size: .66rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: .05em; color: #6b8f88;
}
.ih-row-price {
    font-weight: 900; font-size: 1.05rem; line-height: 1.2;
    /* 'en-US' numerals everywhere money is shown, same as the rest of the
       app: these are read against printed labels and receipts. */
    font-variant-numeric: tabular-nums;
}
.ih-row-price .ih-cur { font-size: .66em; font-weight: 700; color: #6b8f88; margin-inline-start: 3px; }
.ih-row-meta { margin-top: 3px; font-size: .74rem; color: #55736e; line-height: 1.45; }
.ih-row-meta .ih-dot { opacity: .45; margin: 0 5px; }
.ih-row-when { margin-top: 2px; font-size: .72rem; color: #8aa8a2; }
.ih-row-empty { font-size: .8rem; color: #9ab3ae; font-style: italic; }
.ih-badge {
    display: inline-block; margin-inline-start: 6px;
    padding: 1px 6px; border-radius: 999px;
    font-size: .62rem; font-weight: 800; text-transform: uppercase;
    background: rgba(245, 158, 11, .18); color: #b45309;
}

.ih-foot {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 16px 14px;
}
.ih-more {
    flex: 1;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    background: linear-gradient(135deg, #0d9488, #0f766e);
    color: #fff; border: 0; border-radius: 10px;
    padding: 9px 14px; font-size: .84rem; font-weight: 800;
    cursor: pointer;
}
.ih-more:hover { background: linear-gradient(135deg, #0b7a70, #0d5f58); }
.ih-more:disabled { opacity: .5; cursor: not-allowed; }

.ih-state { padding: 22px 16px; text-align: center; color: #6b8f88; font-size: .84rem; }
.ih-state.is-err { color: #b91c1c; }

/* ── Sales by month, to the right of the two rows ───────────────────────── */
/* The card widens only when it has the chart to show; the two rows keep
   their own width on the left and the chart takes the right. Below 760px the
   chart drops under the rows instead of squeezing both. */
.ih-card.has-trend { max-width: 860px; }
.ih-split { display: grid; grid-template-columns: 1fr; gap: 0 12px; }
@media (min-width: 760px) {
    .ih-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: start; }
}
.ih-trend {
    padding: 10px 12px 10px;
    border: 1px solid #e6f1ee;
    border-radius: 12px;
    margin-bottom: 10px;
    background: #f8fcfb;
}
.ih-trend-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ih-trend-range { font-size: .68rem; color: #8aa8a2; }
.ih-trend-stats { display: flex; gap: 18px; margin-top: 4px; }
.ih-stat b {
    display: block; font-weight: 900; font-size: 1.05rem; line-height: 1.2;
    font-variant-numeric: tabular-nums;
}
.ih-stat span { font-size: .7rem; color: #6b8f88; }
.ih-trend-empty { margin-top: 10px; }

.ih-bars {
    position: relative;
    display: flex; align-items: stretch; gap: 2px;
    height: 150px; margin-top: 10px;
}
.ih-bar-col {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; align-items: center;
    border-radius: 6px; outline: none; cursor: default;
}
.ih-bar-col:hover, .ih-bar-col:focus-visible { background: rgba(13, 148, 136, .06); }
.ih-bar-val {
    height: 16px; font-size: .7rem; font-weight: 800; color: #0c1f1c;
    font-variant-numeric: tabular-nums;
}
/* The baseline is the track's bottom edge; bars grow up from it with only
   their top corners rounded, so every bar reads against the same floor. */
.ih-bar-track {
    flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center;
    border-bottom: 1px solid #cde4df;
}
.ih-bar {
    display: block; width: 62%; max-width: 30px;
    background: #0d9488; border-radius: 4px 4px 0 0;
    transition: height 260ms cubic-bezier(.2, .9, .3, 1);
}
/* The month still running is a part-month: lighter, so it is not read as
   a fall against the full months beside it. */
.ih-bar-col.is-current .ih-bar { background: #5eead4; }
.ih-bar-m { margin-top: 4px; font-size: .68rem; font-weight: 700; color: #55736e; }
.ih-bar-tx { font-size: .68rem; color: #8aa8a2; font-variant-numeric: tabular-nums; }
.ih-tip {
    position: absolute; top: calc(100% + 6px); transform: translateX(-50%);
    z-index: 2; pointer-events: none;
    min-width: 130px; padding: 7px 9px;
    background: #0c1f1c; color: #e2efed; border-radius: 8px;
    box-shadow: 0 6px 18px rgba(8, 24, 22, .28);
    font-size: .72rem; line-height: 1.45; white-space: nowrap;
}
.ih-tip[hidden] { display: none; }
.ih-tip-title { font-weight: 800; }
.ih-trend-key {
    display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px;
    font-size: .68rem; color: #8aa8a2;
}
.ih-trend-key span { display: inline-flex; align-items: center; gap: 5px; }
.ih-key-bar { display: inline-block; width: 9px; height: 9px; border-radius: 2px; background: #0d9488; }
@media (prefers-reduced-motion: reduce) { .ih-bar { transition: none; } }

/* The press itself, so a hold reads as doing something before the card
   arrives rather than as the app having frozen. */
.ih-pressing {
    animation: ihPressPulse 520ms ease forwards;
}
@keyframes ihPressPulse {
    from { box-shadow: inset 0 0 0 0 rgba(13, 148, 136, 0); }
    to   { box-shadow: inset 0 0 0 2px rgba(13, 148, 136, .45); }
}
@media (prefers-reduced-motion: reduce) {
    .ih-pressing { animation: none; box-shadow: inset 0 0 0 2px rgba(13, 148, 136, .45); }
}

/* ── Dark theme ─────────────────────────────────────────────────────────── */
body.theme-dark .ih-card { background: #13201d; color: #e2efed; }
body.theme-dark .ih-head { border-bottom-color: rgba(45, 212, 191, .18); }
body.theme-dark .ih-sub,
body.theme-dark .ih-row-label { color: #9db8b2; }
body.theme-dark .ih-close { color: #9db8b2; }
body.theme-dark .ih-close:hover { background: rgba(45, 212, 191, .12); color: #e2efed; }
body.theme-dark .ih-row { background: #0f1c1a; border-color: rgba(45, 212, 191, .18); }
body.theme-dark .ih-row-icon { background: rgba(45, 212, 191, .16); color: #2dd4bf; }
body.theme-dark .ih-row.ih-supply .ih-row-icon { background: rgba(251, 191, 36, .16); color: #fbbf24; }
body.theme-dark .ih-row-meta { color: #9db8b2; }
body.theme-dark .ih-row-when { color: #7d9a94; }
body.theme-dark .ih-row-price .ih-cur { color: #9db8b2; }
body.theme-dark .ih-badge { background: rgba(251, 191, 36, .18); color: #fbbf24; }
body.theme-dark .ih-state { color: #9db8b2; }
body.theme-dark .ih-trend { background: #0f1c1a; border-color: rgba(45, 212, 191, .18); }
body.theme-dark .ih-trend-range,
body.theme-dark .ih-bar-tx,
body.theme-dark .ih-trend-key { color: #7d9a94; }
body.theme-dark .ih-stat span,
body.theme-dark .ih-bar-m { color: #9db8b2; }
body.theme-dark .ih-bar-val { color: #e2efed; }
body.theme-dark .ih-bar-track { border-bottom-color: rgba(45, 212, 191, .22); }
body.theme-dark .ih-bar,
body.theme-dark .ih-key-bar { background: #2dd4bf; }
body.theme-dark .ih-bar-col.is-current .ih-bar { background: #115e59; }
body.theme-dark .ih-bar-col:hover,
body.theme-dark .ih-bar-col:focus-visible { background: rgba(45, 212, 191, .08); }
body.theme-dark .ih-tip { background: #e2efed; color: #0c1f1c; }

/* ── The inventory row's history panel ──────────────────────────────────── */
/* Where "More" lands: the item's own row in the inventory table, with the
   whole record under it. Lazy-loaded, because rendering this for every row
   of every page would be forty joins per product for a panel almost nobody
   opens. */
.ih-panel { margin-top: 14px; }
.ih-panel-head {
    display: flex; align-items: center; gap: 8px;
    width: 100%;
    background: transparent;
    border: 1px solid #cde4df; border-radius: 10px;
    padding: 8px 12px;
    font-size: .8rem; font-weight: 800; color: #0f766e;
    cursor: pointer;
}
.ih-panel-head:hover { background: #eef6f4; }
.ih-panel-head .ih-panel-chevron { transition: transform 180ms ease; margin-inline-start: auto; }
.ih-panel-head[aria-expanded="true"] .ih-panel-chevron { transform: rotate(180deg); }
.ih-panel-body { padding-top: 10px; }
.ih-panel-body[hidden] { display: none; }
.ih-hist-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 900px) { .ih-hist-grid { grid-template-columns: 1fr; } }
.ih-hist-col h6 {
    font-size: .7rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: .05em; color: #6b8f88; margin-bottom: 6px;
}
.ih-hist-note { font-size: .7rem; color: #9ab3ae; margin-top: 6px; }
/* The row is highlighted when "More" lands on it, so someone arriving from
   another tab can see which of fifty rows was the one they pressed. */
.ih-target-row > td { animation: ihTargetFlash 2.4s ease; }
@keyframes ihTargetFlash {
    0%, 60% { background-color: rgba(245, 158, 11, .22); }
    100%    { background-color: transparent; }
}
@media (prefers-reduced-motion: reduce) {
    .ih-target-row > td { animation: none; background-color: rgba(245, 158, 11, .14); }
}
body.theme-dark .ih-panel-head { border-color: rgba(45, 212, 191, .22); color: #2dd4bf; }
body.theme-dark .ih-panel-head:hover { background: rgba(45, 212, 191, .1); }
body.theme-dark .ih-hist-col h6 { color: #9db8b2; }