.ci-header-title { font-size: 1.25rem; font-weight: 700; }
    .ci-header-sub { margin-top: .25rem; opacity: .85; }
    .ci-meta { margin-top: .25rem; opacity: .85; }
    .ci-page { min-height: 0; padding-bottom: .25rem; }
    .ci-card { border: 1px solid rgba(0,0,0,.12); border-radius: 10px; padding: 14px; background: #fff; }

    /* Make sales + notes panels same height */
    .ci-panel { height: 100%; }
    .ci-panel-inner { height: 100%; display: flex; flex-direction: column; }

    /* ===== Responsive layout (Sales + Notes) =====
       Wrap automatically as soon as there isn't enough room for both columns. */
    .ci-two-col {
        display: flex;
        gap: 14px;
        align-items: stretch;
        flex-wrap: wrap;            /* KEY: stacks as soon as it can't fit */
        justify-content: flex-start;
        width: fit-content;         /* don't stretch to fill the page */
        max-width: 100%;
    }
    .ci-sales-col {
        flex: 0 0 auto;
        width: 700px;               /* KEY: keep the sales panel from stretching */
        max-width: 100%;
        min-width: 320px;
    }
    .ci-notes-col {
        flex: 0 0 520px;
        width: 520px;               /* fixed notes width; wraps under when needed */
        max-width: 100%;
        min-width: 320px;
    }

    /* Notes */
    .ci-note-header { font-weight: 700; margin-bottom: 8px; display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; }
    .ci-note-meta { opacity:.85; font-size:.92rem; }
    .ci-note-box {
        flex: 1 1 auto;
        min-height: 0; /* allow flex child to shrink properly */
        border-radius: 8px;
        border: 1px solid rgba(0,0,0,.12);
        padding: 12px;
        background: #fafafa;
        white-space: pre-wrap;
        overflow: auto;
    }

    /* Chart */
    .ci-chart { border: 1px solid rgba(0,0,0,.10); border-radius: 10px; padding: 12px; background: #fff; }
    .ci-chart-title { font-weight:700; margin-bottom: 10px; }

    .ci-chart-outer { display:flex; width:100%; flex: 1 1 auto; justify-content: flex-start; }
    .ci-chart-frame {
        display:flex;
        align-items:flex-start;
        gap: 10px;
        padding: 10px 12px;
        border-radius: 10px;
        background: rgba(0,0,0,.03);
        width: 100%;
        max-width: 100%;            /* KEY: match the 800px sales column, left-justified */
        margin: 0;                  /* KEY: remove centering */
        overflow-x: auto;
        overflow-y: hidden;
        flex: 1 1 auto;
    }

    /* Give more vertical room */
    .ci-yaxis {
        width: 72px;
        height: 340px;                 /* must match .ci-plot-inner height */
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-end;
        padding: 8px 8px 52px 0;        /* bottom pad ~= x labels height */
        box-sizing: border-box;
        flex: 0 0 auto;
    }
    .ci-ylabel { font-size: .78rem; opacity: .8; line-height: 1; white-space: nowrap; }

    .ci-plot { flex: 1 1 auto; min-width: 340px; }
    .ci-plot-inner {
        position: relative;
        height: 340px;
        padding: 8px 6px 0 6px;
        box-sizing: border-box;
        width: 100%;
    }

    .ci-bars-area {
        position: relative;
        height: 285px;                 /* bars area (above baseline) */
        display: flex;
        align-items: flex-end;
        justify-content: space-around;
        width: 100%;
        padding: 0 10px;
        box-sizing: border-box;
        /* IMPORTANT: baseline is now the bottom gridline (bottom:0) so remove border-bottom */
        border-bottom: none;
    }

    .ci-xlabels {
        display: flex;
        align-items: flex-start;
        justify-content: space-around;
        padding: 10px 10px 0;
        width: 100%;
        box-sizing: border-box;
    }

    /* Gridlines now live inside .ci-bars-area and are positioned by BOTTOM */
    .ci-gridline {
        position: absolute;
        left: 0;
        right: 0;
        height: 1px;
        background: rgba(0,0,0,.10);
        pointer-events: none;
    }

    .ci-bar-col { display: flex; flex-direction: column; align-items: center; min-width: 84px; flex: 0 0 auto; }

    /* Thicker bars */
    .ci-bar {
        width: 72px;
        display: flex;
        flex-direction: column-reverse;
        border-radius: 10px;
        overflow: hidden;
        background: rgba(0,0,0,.06);
        box-shadow: inset 0 0 0 1px rgba(0,0,0,.10);
        position: relative;
    }

    .ci-seg { width: 100%; }

    .ci-xcol { min-width: 84px; display:flex; flex-direction:column; align-items:center; gap:4px; flex: 0 0 auto; }
    .ci-year { font-size: .9rem; opacity: .9; white-space: nowrap; }
    .ci-total { font-size: .8rem; opacity: .8; white-space: nowrap; }

    .ci-legend { display:flex; flex-wrap:wrap; gap:10px 14px; margin-top: 12px; justify-content: center; }
    .ci-legend-item { display:flex; align-items:center; gap:6px; font-size: .85rem; opacity: .9; }
    .ci-swatch { width: 12px; height: 12px; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }

    .c-repair { background: #2d7dff; }
    .c-comp   { background: #2ecc71; }
    .c-units  { background: #f1c40f; }
    .c-fluid  { background: #ff8c1a; }
    .c-other  { background: #ff2d55; }

    /* Nice hover tooltip */
    .ci-tip {
        position: fixed;
        z-index: 9999;
        pointer-events: none;
        background: rgba(20,20,20,.95);
        color: #fff;
        padding: 8px 10px;
        border-radius: 10px;
        font-size: .85rem;
        line-height: 1.2;
        box-shadow: 0 8px 22px rgba(0,0,0,.25);
        max-width: 260px;
        transform: translate(12px, 12px);
        white-space: nowrap;
    }
    .ci-tip .t-h { font-weight: 700; margin-bottom: 4px; }
    .ci-tip .t-r { display:flex; gap:8px; justify-content:space-between; }
    .ci-tip .t-k { opacity: .85; }
    .ci-tip .t-v { font-variant-numeric: tabular-nums; }
    .ci-tip .t-t { margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(255,255,255,.15); font-weight:700; display:flex; justify-content:space-between; gap:8px; }

    .ci-notes-nav { display:flex; align-items:center; justify-content:center; gap:10px; margin-top: 10px; }
    .ci-notes-nav .ci-pager { min-width: 64px; text-align:center; opacity: .85; font-size: .9rem; }
    .ci-actions { display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.25rem; padding-bottom: .25rem; }

    @media (max-width: 767.98px) {
        .ci-header-block {
            padding-left: .45rem;
            padding-right: .45rem;
            margin-top: .2rem;
            margin-bottom: .85rem !important;
        }

        .ci-header-title { font-size: 1.08rem; line-height: 1.18; }
        .ci-header-sub, .ci-meta {
            margin-top: .25rem;
            font-size: .92rem;
            line-height: 1.28;
        }

        .ci-two-col {
            width: 100%;
            gap: 12px;
        }

        .ci-sales-col,
        .ci-notes-col {
            width: 100%;
            min-width: 0;
            flex: 1 1 100%;
        }

        .ci-card { padding: 12px; }
        .ci-chart { padding: 10px; }
        .ci-chart-frame {
            padding: 10px;
            gap: 6px;
            overflow-x: hidden;
        }

        .ci-yaxis { width: 54px; }
        .ci-plot { min-width: 0; }

        .ci-year { font-size: .82rem; }
        .ci-total { font-size: .74rem; }

        .ci-legend {
            margin-top: 8px;
            gap: 6px 10px;
            justify-content: flex-start;
        }

        .ci-note-header { margin-bottom: 6px; }
        .ci-note-meta { font-size: .8rem; }
        .ci-note-box {
            padding: 10px;
            min-height: 120px;
            max-height: min(42vh, 220px);
        }

        .ci-actions {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 10px;
            margin-top: .35rem;
            margin-bottom: calc(env(safe-area-inset-bottom, 0px) + .25rem);
        }

        .ci-page {
            padding-bottom: calc(env(safe-area-inset-bottom, 0px) + .5rem);
        }

        .ci-actions .dxbl-btn,
        .ci-actions .btn {
            width: 100%;
            min-height: 44px;
            padding: .4rem .45rem;
            font-size: .72rem;
            line-height: 1.15;
            white-space: normal;
        }
    }