/* Sticky-totals bar — fixed at the bottom of the viewport while
   scrolling Planned/Actual/Rolling cash flow tabs. */
.sticky-totals-bar {
    position: fixed;
    bottom: 0;
    /* left and width are set inline by the directive so the bar
       aligns horizontally with the natural totals block (which is
       inside the main-content area, not the full viewport). */
    background: #ffffff;
    border-top: 1px solid #d1d5db;
    box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.08);
    z-index: 100;
    padding: 0 0 6px 0;
    max-height: 40vh;
    overflow-x: hidden;
    overflow-y: auto;
}

.sticky-totals-bar.is-hidden {
    display: none;
}

/* The bar inherits the .business-cash-flow-container layout so the
   cloned rows align with the natural rows above. The container in the
   live page is itself padded by Bootstrap; replicate enough of that
   so the columns line up. */
.sticky-totals-bar .business-cash-flow-container {
    padding-left: 15px;
    padding-right: 15px;
}

/* Natural .cash-flow-totals + .cash-flow-section-header carry margin/padding
   from app.css that would show as white strips at the top of the cloned bar.
   Zero them on the cloned content so the first row sits flush against the
   bar's top border. */
.sticky-totals-bar .cash-flow-totals,
.sticky-totals-bar .cash-flow-section-header {
    margin-top: 0;
    padding-top: 0;
}

/* Hide the pin icon inside the sticky bar — the bar is a read-only
   mirror; pin/unpin happens on the natural rows above. */
.sticky-totals-bar .cash-flow-pin-icon {
    display: none;
}

/* --- Pin icon styling --------------------------------------------- */

.cash-flow-pin-icon {
    margin-left: 8px;
    opacity: 0.3;
    cursor: pointer;
    font-size: 0.85em;
    transition: opacity 120ms ease, color 120ms ease;
    transform: rotate(45deg); /* hollow look for unpinned */
}

.cash-flow-pin-icon:hover {
    opacity: 0.7;
}

.cash-flow-pin-icon.pinned {
    opacity: 1;
    color: #2563eb;
    transform: none; /* upright when pinned */
}

/* --- Mobile: hide the bar entirely below the sm breakpoint -------- */

@media (max-width: 767px) {
    .sticky-totals-bar {
        display: none !important;
    }
}