/* =========================================================
   BudgetOne – Single-Budget Dashboard Styles
   ========================================================= */

/* ── Gadget header branding icon ──────────────────────── */
.bc-gadget-icon {
    height: 26px;
    width: 26px;
    flex-shrink: 0;
}

/* ── Gadget card: rounded corners, brand border ───────── */
[class^="gadget-"] > .card {
    border-radius: 12px;
    border-color: #0A2530;
    overflow: visible;
}

/* ── Gadget card headers: dark with brand colours ─────── */
[class^="gadget-"] .card-header {
    background: #060F14;
    border-bottom-color: #0A2530;
    color: rgba(255, 255, 255, 0.9);
    border-radius: 11px 11px 0 0;
    overflow: hidden;
}

[class^="gadget-"] .card-header .fw-semibold {
    color: rgba(255, 255, 255, 0.9);
}

[class^="gadget-"] .card-header .form-check-label {
    color: rgba(255, 255, 255, 0.75);
}

/* Outline buttons in dark headers */
[class^="gadget-"] .card-header .btn-outline-secondary {
    border-color: rgba(255, 255, 255, 0.35);
    color: rgba(255, 255, 255, 0.75);
}
[class^="gadget-"] .card-header .btn-outline-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.9);
    border-color: rgba(255, 255, 255, 0.6);
}

/* ── Budget item form input widths ────────────────────── */
.bif-count-input     { width: 80px; }
.bif-cadence-select  { width: 140px; }
.bif-day-of-month    { width: 70px; }
.bif-week-of-month   { width: 90px; }
.bif-nth-day         { width: 110px; }
.bif-new-tag-name    { max-width: 180px; }
.bif-new-tag-parent  { max-width: 160px; }

/* ── Budget details page ──────────────────────────────── */
.budget-description  { white-space: normal; overflow: visible; }
.modal-item-form     { max-width: 560px; }

/* ── Item history panel ───────────────────────────────── */
.history-gap-row       { background: #fffbea; }
.history-current-period { background: #f8f9ff; }
.history-label         { min-width: 80px; }
.history-date-input    { max-width: 150px; }
.icon-collapsed        { transform: rotate(-90deg); }

/* ── Consistent panel headers ─────────────────────────── */
.dashboard-top-row .card-header,
.dashboard-bottom-row .card-header {
    font-size: 0.9rem;
}

.dashboard-top-row .card-header .fw-semibold,
.dashboard-bottom-row .card-header .fw-semibold {
    font-size: 0.9rem;
}

/* ── Forecast totals panel ─────────────────────────────── */
.forecast-card {
    border-left-width: 4px !important;
    border-left-style: solid !important;
    transition: box-shadow 0.15s ease;
}

.forecast-card:hover {
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1) !important;
}

.forecast-card.income  { border-left-color: #198754 !important; }
.forecast-card.expense { border-left-color: #dc3545 !important; }
.forecast-card.transfer-out { border-left-color: #0dcaf0 !important; }
.forecast-card.transfer-in  { border-left-color: #6f42c1 !important; }

/* ── Surplus / Deficit emphasis card ───────────────────── */
[data-role="surplusDeficitCard"] {
    border-width: 2px !important;
    border-style: solid !important;
    transition: border-color 0.3s ease, background-color 0.3s ease;
}

[data-role="surplusDeficitCard"].surplus {
    border-color: #6a9e7c !important;
    background-color: #f2f8f4 !important;
}

[data-role="surplusDeficitCard"].surplus .overview-sd-amount {
    color: #2e6b47 !important;
}

[data-role="surplusDeficitCard"].deficit {
    border-color: #b87878 !important;
    background-color: #f8f2f2 !important;
}

[data-role="surplusDeficitCard"].deficit .overview-sd-amount {
    color: #8a3838 !important;
}

[data-role="surplusDeficitCard"].tight {
    border-color: #c4a835 !important;
    background-color: #f8f5ea !important;
}

[data-role="surplusDeficitCard"].tight .overview-sd-amount {
    color: #7a6018 !important;
}

.overview-sd-amount {
    font-size: 1.1rem;
    letter-spacing: 0.3px;
}

/* ── Chart ─────────────────────────────────────────────── */
#chartContainer {
    min-height: 0;
    padding: 0.25rem !important;
}

/* ── Transactions grid – row colour coding ─────────────── */
.e-grid .row-income td {
    background-color: #d1e7dd !important;
}

.e-grid .row-expense td {
    background-color: #fff3cd !important;
}

/* ── Category breakdown panel ──────────────────────────── */
.category-item {
    border-left: 4px solid transparent;
    cursor: pointer;
    transition: background-color 0.12s ease, box-shadow 0.12s ease;
}

.category-item:hover {
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08);
    background-color: rgba(0,0,0,0.03) !important;
}

.category-item.income {
    border-left-color: #198754;
    background-color: #f0fff4;
}

.category-item.expense {
    border-left-color: #fd7e14;
    background-color: #fff8f0;
}

.category-item.transfer {
    border-left-color: #0dcaf0;
    background-color: #f0fdff;
}

.category-item .category-total {
    font-weight: 600;
    font-size: 0.95rem;
}

.category-item .category-count {
    font-size: 0.78rem;
    color: #6c757d;
}

/* Active (filtered) category gets a stronger highlight */
.category-item.active-filter {
    box-shadow: 0 0 0 2px #0d6efd inset;
}

/* ── Compact overview panel ──────────────────────────────
   Squeeze the Overview card so it only takes the height it
   needs, then the chart card matches via h-100.            */
.dashboard-top-row .overview-card .card-body {
    padding: 0.4rem 0.75rem !important;
}

.dashboard-top-row .forecast-card .card-body {
    padding: 0.15rem 0.5rem !important;
}

.dashboard-top-row #forecastTotals {
    gap: 0.15rem !important;
}

.dashboard-top-row #surplusDeficitCard .card-body {
    padding: 0.25rem !important;
}

.dashboard-top-row .overview-sd-amount {
    font-size: 1rem;
}

.dashboard-top-row .mb-3 {
    margin-bottom: 0.25rem !important;
}

.dashboard-top-row .overview-card .card-header {
    padding: 0.25rem 0.75rem !important;
}

/* ── Sticky categories column ────────────────────────────
   Categories panel sticks in place while user scrolls
   past the transactions grid.                              */
.dashboard-bottom-row .col-lg-4 {
    position: sticky;
    top: 1rem;
    align-self: flex-start;
    z-index: 90;
}

/* ── Budget carousel ─────────────────────────────────────
   Coverflow: front card full size/opacity, flanking cards
   scaled down (82%), rotated on Y axis, 65% opacity.     */

/* Shared surplus/deficit text colours used across cards */
.bc-sd-surplus { color: #2e6b47; }
.bc-sd-deficit { color: #8a3838; }

/* No-JS fallback accent dot */
.bc-accent-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    vertical-align: middle;
}

/* Custom carousel shell */
.bc-carousel {
    /* column: [row: btn + viewport + btn] then dots */
}

.bc-carousel-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.bc-carousel-viewport {
    flex: 1;
    min-width: 0;
    overflow-x: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.bc-carousel-viewport::-webkit-scrollbar { display: none; }

.bc-carousel-track {
    display: flex;
}

.bc-carousel-slide {
    flex-shrink: 0;
    padding: 0.5rem 0.3rem;
    box-sizing: border-box;
    transition: opacity 0.38s ease, transform 0.38s ease;
    transform-origin: center center;
}

.bc-carousel-slide:not(.bc-carousel-slide--active) {
    opacity: 0.55;
    transform: scale(0.88);
}

.bc-carousel-slide--active {
    opacity: 1;
    transform: scale(1);
}

/* Nav arrow buttons — in flow, not absolute */
.bc-carousel-btn {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: rgba(26, 26, 46, 0.70);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
    transition: background 0.15s ease;
    padding: 0;
}

.bc-carousel-btn:hover:not(:disabled) { background: rgba(26, 26, 46, 0.90); }
.bc-carousel-btn:disabled { opacity: 0.28; cursor: default; }

/* Dot indicators */
.bc-carousel-dots {
    margin-top: 0.55rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
}

.bc-carousel-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #c5c9d0;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: background 0.22s ease, width 0.22s ease, border-radius 0.22s ease;
    flex-shrink: 0;
}

.bc-carousel-dot--active {
    background: #1a1a2e;
    width: 18px;
    border-radius: 4px;
}

/* Budget card */
.bc-budget-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.09);
    border: 1px solid rgba(0, 0, 0, 0.06);
    cursor: pointer;
    max-width: 420px;
    margin: 0 auto;
    user-select: none;
    position: relative;
    transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.bc-budget-card--archived {
    opacity: 0.6;
}
.bc-budget-card--archived .bc-budget-card__accent-bar {
    background: #9ca3af !important;
}
.bc-budget-card__archived-stamp {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 2;
}
.bc-budget-card__archived-stamp span {
    font-family: 'Syne', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(6, 15, 20, 0.18);
    border: 2.5px solid rgba(6, 15, 20, 0.14);
    padding: 5px 20px;
    border-radius: 4px;
    transform: rotate(-22deg);
}

.bc-carousel-slide--active .bc-budget-card:hover {
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.14);
    transform: translateY(-2px);
}

.bc-budget-card__accent-bar {
    height: 5px;
    background: var(--bc-accent, #4A6FA5);
}

.bc-budget-card__body {
    padding: 1rem 1.25rem 1.1rem;
}

.bc-budget-card__header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
}

.bc-budget-card__icon {
    font-size: 1.35rem;
    color: var(--bc-accent, #4A6FA5);
    flex-shrink: 0;
}

.bc-budget-card__name {
    font-size: 1.05rem;
    font-weight: 600;
    color: #1a1a2e;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

.bc-budget-card__share-icon {
    font-size: 0.8rem;
    flex-shrink: 0;
    color: #5CE8C0;
    cursor: default;
    opacity: 0.85;
}

.bc-budget-card__share-icon--received {
    color: #7c6fcd;
}

.bc-budget-card__period {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #8a9099;
    margin-bottom: 0.55rem;
}

.bc-budget-card__sd {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.bc-budget-card__sd-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #8a9099;
    font-weight: 500;
}

.bc-budget-card__sd-amount {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* In carousel: card fills the slide so peeking cards show actual content */
.bc-carousel-slide .bc-budget-card {
    max-width: none;
    margin: 0;
}

/* Single-budget (no carousel chrome): constrain width */
.bc-budget-carousel-container > .bc-budget-card {
    max-width: 380px;
}

/* Hover: darken border to signal clickability */
.bc-budget-card:hover {
    border-color: rgba(0, 0, 0, 0.18) !important;
}

/* Footer row: "Open budget" hint + right chevron */
.bc-budget-card__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.45rem 1.25rem 0.6rem;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.bc-budget-card__open-hint {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #8a9099;
    font-weight: 500;
}

.bc-budget-card__chevron {
    font-size: 0.7rem;
    color: #8a9099;
    transition: transform 0.18s ease, color 0.18s ease;
}

.bc-carousel-slide--active .bc-budget-card:hover .bc-budget-card__chevron,
.bc-budget-carousel-container > .bc-budget-card:hover .bc-budget-card__chevron {
    transform: translateX(3px);
    color: var(--bc-accent, #4A6FA5);
}

/* ── Empty state (no budgets) ────────────────────────────── */
.bc-empty-state__icon {
    font-size: 2.8rem;
    color: #c5c9d0;
}

.bc-empty-state__heading {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1a1a2e;
}

.bc-empty-state__subtext {
    font-size: 0.9rem;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
}

/* Icon + colour pickers in modals */
.bc-icon-picker,
.bc-colour-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.bc-icon-option,
.bc-colour-option {
    appearance: none;
    display: none;
}

.bc-icon-option + label,
.bc-colour-option + label {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: 8px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.bc-icon-option + label {
    width: 42px;
    height: 42px;
    font-size: 1.15rem;
    color: #495057;
    background: #f8f9fa;
}

.bc-icon-option + label:hover {
    border-color: #adb5bd;
}

.bc-icon-option:checked + label {
    border-color: #5CE8C0;
    background: #f0fdf9;
    color: #2A7D6E;
    box-shadow: 0 0 0 3px rgba(92,232,192,0.25);
}

.bc-colour-option + label {
    width: 32px;
    height: 32px;
    border-radius: 50%;
}

.bc-colour-option + label:hover {
    box-shadow: 0 0 0 3px rgba(0,0,0,0.18);
}

.bc-colour-option:checked + label {
    border-color: rgba(0,0,0,0.35);
    box-shadow: 0 0 0 3px rgba(0,0,0,0.25);
}

/* ── Responsive ────────────────────────────────────────── */
@media (max-width: 991.98px) {
    #chartContainer {
        min-height: 220px;
    }

    .category-item {
        padding: 0.5rem 0.75rem !important;
    }

    /* Disable sticky on mobile — stacking layout */
    .dashboard-top-row,
    .dashboard-bottom-row .col-lg-4 {
        position: static;
    }
}

@media (max-width: 767.98px) {
    .overview-sd-amount {
        font-size: 1.1rem;
    }
}