/* ================================================================
   Finanzen – gemeinsame Styles
   Baut auf den CSS-Variablen aus general_settings.css auf.
================================================================ */

/* ── Seiten-Wrapper ─────────────────────────────────────────── */
.fin-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1rem 4rem;
}

.fin-page h1 {
    margin-bottom: 1.75rem;
}

.fin-page .fin-subtitle {
    text-align: center;
    color: var(--secondary-text-color);
    font-size: 0.85em;
    margin-bottom: 2rem;
}

/* ── Alerts ─────────────────────────────────────────────────── */
.fin-alert {
    padding: .75rem 1.25rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    font-size: .9em;
}
.fin-alert.success { background: rgba(7,163,90,.25); border: 1px solid var(--main-brand-color); }
.fin-alert.error   { background: rgba(200,0,0,.2);   border: 1px solid #c00; }
.fin-alert.warning { background: rgba(220,140,0,.2); border: 1px solid #dc8c00; }

/* ── Toolbar / Aktionsleiste ────────────────────────────────── */
.fin-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1.5rem;
    align-items: center;
}

/* ── Buttons ────────────────────────────────────────────────── */
.btn, .fin-btn {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .45rem 1rem;
    border-radius: 6px;
    border: none;
    font-family: inherit;
    font-size: .85em;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background .2s, opacity .2s;
    white-space: nowrap;
    background: var(--main-brand-color);
    color: #fff;
}
.btn:hover, .fin-btn:hover {
    background: var(--light-secondary-color);
    color: #fff;
    text-decoration: none;
}

.fin-btn-ghost {
    background: transparent;
    border: 1px solid rgba(255,255,255,.25);
    color: var(--text-color);
}
.fin-btn-ghost:hover {
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.5);
}

.fin-btn-danger {
    background: #c00;
}
.fin-btn-danger:hover { background: #a00; }

.fin-btn-sm {
    padding: .25rem .65rem;
    font-size: .78em;
}

/* ── Konto-Filter-Tabs ──────────────────────────────────────── */
.fin-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid rgba(255,255,255,.1);
    padding-bottom: .75rem;
}
.fin-tab {
    padding: .4rem .9rem;
    border-radius: 6px 6px 0 0;
    border: 1px solid transparent;
    color: var(--secondary-text-color);
    text-decoration: none;
    font-size: .85em;
    transition: all .2s;
}
.fin-tab:hover {
    color: var(--text-color);
    background: rgba(255,255,255,.07);
    text-decoration: none;
}
.fin-tab.active {
    color: var(--main-brand-color);
    border-color: rgba(255,255,255,.15);
    border-bottom-color: var(--primary-color);
    background: rgba(7,163,90,.1);
    font-weight: 700;
}

/* ── Tabellen ───────────────────────────────────────────────── */
.fin-table-wrap {
    overflow-x: auto;
    border-radius: 12px;
    border: var(--glass-border);
    box-shadow: var(--glass-shadow);
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    width: 100%;
}

.fin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .88em;
}

.fin-table thead tr {
    background: rgba(255,255,255,.06);
    border-bottom: 1px solid rgba(255,255,255,.12);
}

.fin-table th {
    padding: .7rem 1rem;
    text-align: left;
    font-weight: 600;
    color: var(--secondary-text-color);
    font-size: .82em;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.fin-table td {
    padding: .7rem 1rem;
    border-bottom: 1px solid rgba(255,255,255,.05);
    vertical-align: middle;
}

.fin-table tbody tr:last-child td {
    border-bottom: none;
}

.fin-table tbody tr:hover {
    background: rgba(255,255,255,.04);
}

.fin-table tbody tr.overdue {
    background: rgba(180,0,0,.12);
}
.fin-table tbody tr.overdue:hover {
    background: rgba(180,0,0,.2);
}

.fin-table .text-right { text-align: right; }
.fin-table .text-mono  { font-variant-numeric: tabular-nums; }

/* Leer-Zeile */
.fin-table .empty-row td {
    text-align: center;
    color: var(--secondary-text-color);
    padding: 2rem;
    font-style: italic;
}

/* ── Badges / Status-Pills ──────────────────────────────────── */
.badge {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .2rem .6rem;
    border-radius: 20px;
    font-size: .75em;
    font-weight: 700;
    white-space: nowrap;
}
.badge-paid     { background: rgba(7,163,90,.2);  color: #4ade80; border: 1px solid rgba(7,163,90,.4); }
.badge-open     { background: rgba(220,140,0,.2); color: #fbbf24; border: 1px solid rgba(220,140,0,.4); }
.badge-partial  { background: rgba(220,140,0,.2); color: #fbbf24; border: 1px solid rgba(220,140,0,.4); }
.badge-overdue  { background: rgba(200,0,0,.25);  color: #f87171; border: 1px solid rgba(200,0,0,.5); }
.badge-overpaid { background: rgba(99,102,241,.2); color: #a5b4fc; border: 1px solid rgba(99,102,241,.4); }
.badge-matched  { background: rgba(7,163,90,.15); color: #4ade80; border: 1px solid rgba(7,163,90,.3); }
.badge-unmatched{ background: rgba(255,255,255,.06); color: var(--secondary-text-color); border: 1px solid rgba(255,255,255,.12); }

/* ── Beträge ────────────────────────────────────────────────── */
.amount { font-variant-numeric: tabular-nums; font-weight: 600; }
.amount-pos     { color: #4ade80; }
.amount-neg     { color: #f87171; }
.amount-warn    { color: #facc15; }
.amount-neutral { color: var(--secondary-text-color); }

/* ── Karten / Info-Panels ───────────────────────────────────── */
.fin-card {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: var(--glass-border);
    box-shadow: var(--glass-shadow);
    border-radius: var(--glass-radius);
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
}

.fin-card h3 {
    font-size: 1rem;
    text-align: left;
    color: var(--secondary-text-color);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: .75rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

/* ── Positions-Tabelle (Rechnungsdetail) ────────────────────── */
.fin-positions {
    width: 100%;
    border-collapse: collapse;
    font-size: .9em;
}
.fin-positions td {
    padding: .45rem 0;
    border-bottom: 1px solid rgba(255,255,255,.05);
    vertical-align: top;
}
.fin-positions td:last-child {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    padding-left: 1rem;
}
.fin-positions tr:last-child td { border-bottom: none; }
.fin-positions .total-row td {
    padding-top: .7rem;
    border-top: 2px solid rgba(255,255,255,.2);
    font-weight: 700;
    font-size: 1.05em;
    border-bottom: none;
}
.fin-positions .muted { color: var(--secondary-text-color); font-size: .88em; }

/* ── Zahlungsstatus-Box ─────────────────────────────────────── */
.fin-payment-status {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-radius: 10px;
    margin-bottom: 1rem;
    border: 1px solid;
}
.fin-payment-status.paid     { background: rgba(7,163,90,.1);  border-color: rgba(7,163,90,.3);  }
.fin-payment-status.partial  { background: rgba(220,140,0,.1); border-color: rgba(220,140,0,.3); }
.fin-payment-status.unpaid   { background: rgba(200,0,0,.1);   border-color: rgba(200,0,0,.3);   }
.fin-payment-status.overpaid { background: rgba(220,140,0,.1); border-color: rgba(220,140,0,.3); }

.fin-payment-status .status-icon {
    font-size: 1.8rem;
    line-height: 1;
}
.fin-payment-status .status-body { flex: 1; }
.fin-payment-status .status-title {
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: .2rem;
}
.fin-payment-status .status-meta {
    font-size: .85em;
    color: var(--secondary-text-color);
}

/* ── Stat-Kacheln ───────────────────────────────────────────── */
.fin-stats {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}
.fin-stat {
    flex: 1;
    min-width: 140px;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: var(--glass-border);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    border-radius: 12px;
    padding: 1rem 1.25rem;
}
.fin-stat .stat-label {
    font-size: .75em;
    color: var(--secondary-text-color);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: .25rem;
}
.fin-stat .stat-value {
    font-size: 1.5em;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* ── Formular-Styles ────────────────────────────────────────── */
.fin-form .form-group {
    margin-bottom: 1rem;
}
.fin-form label {
    display: block;
    font-size: .85em;
    color: var(--secondary-text-color);
    margin-bottom: .3rem;
    font-weight: 600;
}
.fin-form input[type="text"],
.fin-form input[type="email"],
.fin-form input[type="tel"],
.fin-form input[type="date"],
.fin-form input[type="number"],
.fin-form select,
.fin-form textarea {
    box-sizing: border-box;
    width: 100%;
    max-width: 420px;
    padding: .55rem .8rem;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 6px;
    color: var(--text-color);
    font-family: inherit;
    font-size: .9em;
    transition: border-color .2s;
}
.fin-form input:focus,
.fin-form select:focus,
.fin-form textarea:focus {
    outline: none;
    border-color: var(--main-brand-color);
}
.fin-form small {
    display: block;
    margin-top: .25rem;
    color: var(--secondary-text-color);
    font-size: .78em;
}
.fin-form .form-actions {
    margin-top: 1.5rem;
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
}

/* ── Allgemeine Links ───────────────────────────────────────── */
.fin-page a {
    color: var(--main-brand-color);
    text-decoration: none;
    transition: color .15s;
}
.fin-page a:hover {
    color: var(--text-color);
    text-decoration: none;
}
.fin-page a:visited {
    color: var(--main-brand-color);
}

/* Buttons im fin-page dürfen nicht die Link-Farbe erben */
.fin-page .btn,
.fin-page .fin-btn {
    color: #fff;
}
.fin-page .btn:hover,
.fin-page .fin-btn:hover,
.fin-page .btn:visited,
.fin-page .fin-btn:visited {
    color: #fff;
}

/* ── Aktions-Links in Tabellen ──────────────────────────────── */
.fin-actions {
    display: flex;
    gap: .4rem;
    align-items: center;
    flex-wrap: wrap;
}
.fin-actions a, .fin-actions button {
    color: var(--main-brand-color);
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: .82em;
    padding: 0;
    white-space: nowrap;
    transition: color .15s;
}
.fin-actions a:hover, .fin-actions button:hover { color: #fff; }
.fin-actions .sep { color: rgba(255,255,255,.2); }

/* ── Zweispaltiges Grid (stacked auf Mobile) ────────────────── */
.fin-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

/* ── Info-Tabelle innerhalb einer fin-card ──────────────────── */
.fin-info-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .88em;
}
.fin-info-table td {
    padding: .3rem 0;
    border-bottom: 1px solid rgba(255,255,255,.04);
    vertical-align: top;
}
.fin-info-table tr:last-child td { border-bottom: none; }
.fin-info-table td:first-child {
    color: var(--secondary-text-color);
    width: 45%;
}
.fin-info-table td:last-child { text-align: right; }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 768px) {
    .col-mobile-hide { display: none; }
    .fin-page { padding: 1rem .5rem 3rem; }
    .fin-stats { flex-direction: column; }
    .fin-stat { min-width: unset; }
    .fin-table th, .fin-table td { padding: .35rem .4rem; font-size: .8em; }
    .fin-toolbar { gap: .4rem; display: grid; grid-template-columns: 1fr 1fr; }
    .fin-toolbar .btn,
    .fin-toolbar .fin-btn { white-space: normal; word-break: break-word; justify-content: center; text-align: center; }
    .fin-grid-2 { grid-template-columns: 1fr; }
    .fin-actions { flex-direction: column; align-items: flex-start; gap: .2rem; }
    .fin-actions .sep { display: none; }
    .fin-form input[type="text"],
    .fin-form input[type="email"],
    .fin-form input[type="tel"],
    .fin-form input[type="date"],
    .fin-form input[type="number"],
    .fin-form select,
    .fin-form textarea { max-width: 100%; }
}

/* ── Abteilungs-Filter ──────────────────────────────────────── */
.fin-abteilung-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
    margin-bottom: 1rem;
}
.fin-filter-label {
    font-size: .8em;
    color: var(--secondary-text-color);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-right: .25rem;
}
.fin-filter-btn {
    padding: .3rem .75rem;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,.15);
    color: var(--secondary-text-color);
    text-decoration: none;
    font-size: .8em;
    font-weight: 600;
    transition: all .15s;
}
.fin-filter-btn:hover {
    background: rgba(255,255,255,.08);
    color: var(--text-color);
    text-decoration: none;
}
.fin-filter-btn.active {
    background: rgba(7,163,90,.15);
    border-color: var(--main-brand-color);
    color: var(--main-brand-color);
}

/* ── Checkbox-Spalte ────────────────────────────────────────── */
.col-checkbox {
    width: 2.5rem;
    text-align: center;
}
.fin-table .col-checkbox input[type="checkbox"] {
    cursor: pointer;
    accent-color: var(--main-brand-color);
    width: 1rem;
    height: 1rem;
}

/* ── Stapeldruck-Leiste ─────────────────────────────────────── */
.fin-bulk-bar {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
    padding: .75rem 1rem;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: var(--glass-border);
    border-radius: 10px;
}
.fin-bulk-count {
    font-size: .85em;
    color: var(--secondary-text-color);
}
.btn:disabled {
    opacity: .45;
    cursor: not-allowed;
}