/* ============================================================
   MoneyMap — Main Stylesheet (styles.css)
   Entry point. Imports are declared in index.html.
   This file contains application-level overrides and any
   styles that don't fit neatly into layout or components.
   ============================================================ */

/* ----------------------------------------------------------
   "See breakdown" button
   Pushed to the right of the actions row via margin-left: auto.
   Hidden on desktop where visualization is already beside expenses.
   Uses !important to override .btn { display: inline-flex } from
   components.css which loads before this file.
---------------------------------------------------------- */
.btn-see-breakdown {
    margin-left: auto;
    font-size: var(--font-size-xs);
    color: var(--color-text-subtle);
    border-color: transparent;
}

.btn-see-breakdown:hover:not(:disabled) {
    color: var(--color-primary);
    border-color: transparent;
    background-color: transparent;
}

@media (min-width: 1024px) {
    .btn-see-breakdown {
        display: none !important;
    }
}

/* ----------------------------------------------------------
   Expense list scrollbar (desktop — visible and on-theme)
---------------------------------------------------------- */
.expense-list-wrapper::-webkit-scrollbar {
    width: 12px;
}

.expense-list-wrapper::-webkit-scrollbar-track {
    background: #0f1115;
}

.expense-list-wrapper::-webkit-scrollbar-thumb {
    background: #4b5563;
}

.expense-list-wrapper::-webkit-scrollbar-thumb:hover {
    background: #6b7280;
}

/* Firefox */
.expense-list-wrapper {
    scrollbar-width: auto;
    scrollbar-color: #4b5563 #0f1115;
}

/* ----------------------------------------------------------
   Expense list empty state visibility
   Controlled via JS by toggling the `hidden` attribute
   but we keep the default state clear here.
---------------------------------------------------------- */
#expense-list-empty {
    padding: var(--space-10) var(--space-6);
}

/* Hide the empty state when the list has items */
#expense-list:not(:empty) + #expense-list-empty {
    display: none;
}

/* ----------------------------------------------------------
   Expense list wrapper
---------------------------------------------------------- */
.expense-list-wrapper {
    position: relative;
}

/* ----------------------------------------------------------
   Expense form — editing state banner
---------------------------------------------------------- */
#expense-form.is-editing .expense-form-wrapper {
    border-color: var(--color-primary);
}

/* ----------------------------------------------------------
   Metric remaining — responsive font size
---------------------------------------------------------- */
@media (max-width: 380px) {
    .metric-value {
        font-size: var(--font-size-xl);
    }
}

/* ----------------------------------------------------------
   Visualization section
---------------------------------------------------------- */
.viz-content {
    /* shown/hidden via JS `hidden` attribute */
}

/* Metrics grid sits above the chart — add breathing room below */
#metrics-grid {
    margin-bottom: var(--space-6);
}

/* Plain-text empty state for the chart area */
.viz-empty-text {
    padding: var(--space-6) 0 var(--space-4);
    text-align: center;
}

.viz-empty-text p {
    font-size: var(--font-size-sm);
    color: var(--color-text-subtle);
    margin: 0;
}

/* ----------------------------------------------------------
   Header actions on mobile — keep reset button accessible
---------------------------------------------------------- */
@media (max-width: 400px) {
    .site-tagline {
        display: none;
    }
}

/* ----------------------------------------------------------
   Donut chart segments — JS sets stroke-dasharray, but
   we define the base visual properties here.
---------------------------------------------------------- */
.donut-segment {
    fill: none;
    stroke-width: 36;
    transition: stroke-dashoffset var(--transition-slow),
                opacity var(--transition-fast);
    cursor: default;
}

.donut-segment:hover {
    opacity: 0.85;
    stroke-width: 38;
}

/* Background ring */
.donut-bg {
    fill: none;
    stroke: var(--color-surface-alt);
    stroke-width: 36;
}

/* ----------------------------------------------------------
   Expense item — flash animation on add
---------------------------------------------------------- */
@keyframes expense-added {
    0%   { background-color: var(--color-primary-muted); }
    100% { background-color: var(--color-surface-alt); }
}

.expense-item.just-added {
    animation: expense-added 0.8s ease forwards;
}

/* ----------------------------------------------------------
   Smooth metric value update
---------------------------------------------------------- */
.metric-value {
    transition: color var(--transition-base);
}

/* ----------------------------------------------------------
   Print styles — minimal, in case someone prints
---------------------------------------------------------- */
@media print {
    .site-header,
    .expense-form-wrapper,
    .expense-item-actions,
    .header-actions,
    .site-footer {
        display: none;
    }

    body {
        background: white;
        color: black;
    }

    .section {
        border: 1px solid #ccc;
        page-break-inside: avoid;
    }
}