/* ============================================================
   Finanzplan-App — "Founders Studio" Theme
   Geladen von Dash automatisch aus dem assets/-Ordner
   ============================================================ */

:root {
    --fp-navy:        #1c2133;
    --fp-navy-hover:  #252d44;
    --fp-green:       #2d6a4f;
    --fp-green-light: #40916c;
    --fp-amber:       #e9a820;
    --fp-amber-light: #f4c55a;
    --fp-bg:          #fafaf8;
    --fp-border:      #e8e6e1;
    --fp-text:        #1a1e2e;
    --fp-muted:       #6b7280;
    --fp-radius:      6px;
    --fp-transition:  180ms ease;
}

/* ── Tabs (dcc.Tab rendert als Bootstrap nav-tabs) ──────── */

.tab-content {
    background: var(--fp-bg);
}

/* ── Dark Sidebar Column ─────────────────────────────────── */

.fp-sidebar-col {
    background-color: var(--fp-navy) !important;
    padding: 1.25rem 0 1.5rem !important;
    min-height: 520px;
}

/* ── Nav-Liste in der Sidebar ───────────────────────────── */

.fp-nav-list {
    border-radius: 0 !important;
}

.fp-nav-list .list-group-item {
    background-color: transparent !important;
    border: none !important;
    border-left: 3px solid transparent !important;
    color: #c8cdd8 !important;
    cursor: pointer;
    padding: 0.65rem 1.1rem !important;
    font-size: 0.84rem;
    transition: all var(--fp-transition);
    border-radius: 0 !important;
}

.fp-nav-list .list-group-item:hover {
    background-color: #252d44 !important;
    color: #f0f2f7 !important;
}

.fp-nav-list .list-group-item.active {
    background-color: rgba(233, 168, 32, 0.14) !important;
    border-left: 3px solid var(--fp-amber) !important;
    color: #f0f2f7 !important;
    font-weight: 800 !important;
}

/* Nummerierung in der Sidebar */
.fp-nav-list.list-group-numbered > .list-group-item::before {
    color: var(--fp-amber);
    font-weight: 700;
    min-width: 1.4em;
}

/* ── Restliche ListGroup-Items (außerhalb der Sidebar) ───── */

.list-group-item {
    border-color: var(--fp-border) !important;
    color: var(--fp-text);
    cursor: pointer;
    transition: all var(--fp-transition);
    font-size: 0.88rem;
}

.list-group-item:hover {
    background-color: #f0ede8 !important;
    color: var(--fp-green) !important;
}

.list-group-numbered > .list-group-item::before {
    color: var(--fp-amber);
    font-weight: 700;
}

/* ── Buttons ────────────────────────────────────────────── */

.btn-primary {
    background-color: var(--fp-green) !important;
    border-color: var(--fp-green) !important;
    color: #fff !important;
}

.btn-primary:hover, .btn-primary:focus {
    background-color: var(--fp-green-light) !important;
    border-color: var(--fp-green-light) !important;
}

.btn-success {
    background-color: var(--fp-green) !important;
    border-color: var(--fp-green) !important;
}

.btn-success:hover {
    background-color: var(--fp-green-light) !important;
    border-color: var(--fp-green-light) !important;
}

.btn-warning {
    background-color: var(--fp-amber) !important;
    border-color: var(--fp-amber) !important;
    color: var(--fp-text) !important;
    font-weight: 600 !important;
}

.btn-warning:hover {
    background-color: var(--fp-amber-light) !important;
    border-color: var(--fp-amber-light) !important;
}

.btn-danger {
    background-color: #dc2626 !important;
    border-color: #dc2626 !important;
}

/* ── Accordion (Eingabeformulare) ───────────────────────── */

.accordion-button {
    color: var(--fp-text) !important;
    font-weight: 600 !important;
    background-color: #f4f2ed !important;
}

.accordion-button:not(.collapsed) {
    background-color: var(--fp-navy) !important;
    color: #fff !important;
    box-shadow: none !important;
}

.accordion-button:not(.collapsed)::after {
    filter: brightness(0) invert(1);
}

.accordion-item {
    border-color: var(--fp-border) !important;
}

.accordion-body {
    background-color: #fff;
}

/* ── Form Inputs ────────────────────────────────────────── */

input[type="text"],
input[type="number"],
input[type="email"],
input[type="date"],
select,
textarea {
    border: 1.5px solid var(--fp-border) !important;
    border-radius: var(--fp-radius) !important;
    color: var(--fp-text) !important;
    transition: border-color var(--fp-transition), box-shadow var(--fp-transition) !important;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--fp-green) !important;
    box-shadow: 0 0 0 3px rgba(45, 106, 79, 0.15) !important;
    outline: none !important;
}

/* ── DatePicker ─────────────────────────────────────────── */

.DateInput_input {
    border-bottom: 2px solid var(--fp-border) !important;
}

.DateInput_input:focus {
    border-bottom-color: var(--fp-green) !important;
}

.CalendarDay__selected {
    background: var(--fp-green) !important;
    border-color: var(--fp-green) !important;
}

/* ── Switch / Checkbox ──────────────────────────────────── */

.form-check-input:checked {
    background-color: var(--fp-green) !important;
    border-color: var(--fp-green) !important;
}

/* ── Cards ──────────────────────────────────────────────── */

.card {
    border-color: var(--fp-border) !important;
    border-radius: var(--fp-radius) !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
}

.card-header {
    background-color: var(--fp-navy) !important;
    color: #fff !important;
    border-bottom-color: var(--fp-navy) !important;
    font-weight: 600 !important;
}

/* ── Dropdown (dcc.Dropdown) ────────────────────────────── */

.Select-control {
    border: 1.5px solid var(--fp-border) !important;
    border-radius: var(--fp-radius) !important;
}

.Select.is-focused .Select-control {
    border-color: var(--fp-green) !important;
    box-shadow: 0 0 0 3px rgba(45, 106, 79, 0.15) !important;
}

.Select-option.is-selected {
    background-color: var(--fp-green) !important;
}

.Select-option.is-focused {
    background-color: rgba(45, 106, 79, 0.1) !important;
}

/* ── Disclaimer-Bereich ─────────────────────────────────── */

#intro_disclaimer p {
    color: var(--fp-muted);
    font-size: 0.9rem;
    line-height: 1.65;
}

/* ── Radio Items ────────────────────────────────────────── */

.form-check-label {
    color: var(--fp-text);
    font-size: 0.9rem;
}

/* ── App Shell Padding ──────────────────────────────────── */

.fp-app-shell {
    padding: 2rem;
}

/* ── KPI-Card (Dashboard) ───────────────────────────────── */

.fp-kpi-card {
    text-align: center;
    border-radius: 30px;
    background-color: var(--fp-navy);
    color: #fff;
    padding: 50px 20px 20px 20px;
    margin: 6em 0 5em 0;
}

/* ── Große Dashboard-Charts ─────────────────────────────── */

.fp-graph-tall {
    height: 450px !important;
}

/* ── Löschen-Button in mehrspaltigen Zeilen (Investitionen/Kosten) ── */

.fp-inv-delete-btn {
    position: absolute;
    right: 0;
    margin-right: 1rem;
    margin-top: 1.5rem;
}

.fp-cost-delete-btn {
    position: absolute;
    right: 0;
    bottom: 0;
}

/* ============================================================
   Mobile Anpassungen
   ============================================================ */

@media (max-width: 767.98px) {

    .fp-app-shell {
        padding: 1rem;
    }

    /* Sidebar wird zur horizontal scrollbaren Pill-Leiste */
    .fp-sidebar-col {
        min-height: auto !important;
        padding: 0.5rem 0.75rem !important;
    }

    .fp-nav-list {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 0.25rem;
    }

    .fp-nav-list .list-group-item {
        flex: 0 0 auto;
        white-space: nowrap;
        border-left: none !important;
        border-bottom: 3px solid transparent !important;
        font-size: 0.78rem;
        padding: 0.5rem 0.75rem !important;
    }

    .fp-nav-list .list-group-item.active {
        border-left: none !important;
        border-bottom: 3px solid var(--fp-amber) !important;
    }

    .fp-nav-list.list-group-numbered > .list-group-item::before {
        min-width: 1.1em;
    }

    /* Dashboard KPI-Card/Charts brauchen weniger Abstand auf Mobile */
    .fp-kpi-card {
        padding: 1.25rem 1rem;
        margin: 1rem 0;
    }

    .fp-graph-tall {
        height: 300px !important;
    }

    /* Löschen-Button in Investitionen/laufenden Kosten: nicht überlappen beim Stapeln */
    .fp-inv-delete-btn,
    .fp-cost-delete-btn {
        position: static;
        margin: 0.5rem 0 0 0;
        width: 100%;
    }

    /* "w-25"-Buttons (Weiter/Speichern/+Hinzufügen) sind auf schmalen Viewports
       zu schmal und brechen mehrzeilig um - auf volle Breite stellen */
    .btn.w-25 {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}