/* ======================================================================
   Zinsrechner – zinsrechner.css
   ====================================================================== */

/* ---- Wrapper ---- */
.zr-wrap {
    max-width: 820px;
    position: relative;
}

/* ---- Globale Einstellungen ---- */
.zr-global {
    background: #f5f7f9;
    border: 1px solid #dde2e8;
    border-radius: 6px;
    padding: 0.9rem 1rem;
    margin-bottom: 1.4rem;
}

/* .zr-global__grid → Tailwind: grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-2 sm:gap-4 */

/* .zr-field/.zr-input/.zr-select → .bp-field/.bp-input/.bp-select (tailwind.input.css) */

/* Breiten-Varianten bleiben seitenspezifisch */
.bp-input.zr-betrag,
.bp-input.zr-zins-wert {
    width: 7.5rem;
}

.bp-input.zr-text {
    width: 12rem;
}

.bp-input.zr-datum {
    width: 8rem;
}

/* ---- Tabs ---- */
.zr-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    border-bottom: 2px solid #dde2e8;
    margin-bottom: 0;
}

.zr-tab {
    padding: 0.35rem 0.6rem;
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: 5px 5px 0 0;
    background: #f0f2f5;
    color: #555;
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    margin-bottom: -2px;
    transition: background 0.15s, color 0.15s;
}

@media (min-width: 640px) {
    .zr-tab {
        padding: 0.55rem 1.1rem;
        font-size: 0.88rem;
    }
}

.zr-tab:hover {
    background: #e3e8ef;
    color: #222;
}

.zr-tab--active {
    background: #fff;
    color: #1a1a1a;
    border-color: #dde2e8;
    border-bottom-color: #fff;
    font-weight: 700;
}

/* ---- Tab-Panels ---- */
.zr-panel {
    border: 1px solid #dde2e8;
    border-top: none;
    border-radius: 0 0 6px 6px;
    padding: 1rem;
    background: #fff;
    overflow-x: auto;
}

.zr-panel--hidden {
    display: none;
}

/* ---- Eingabe-Tabelle ---- */
.zr-input-table {
    border-collapse: collapse;
    width: 100%;
    font-size: 0.88rem;
}

.zr-input-table th {
    text-align: left;
    font-weight: 600;
    color: #555;
    padding: 0.3rem 0.4rem;
    border-bottom: 2px solid #dde2e8;
    white-space: nowrap;
}

.zr-input-table td {
    padding: 0.25rem 0.4rem;
    vertical-align: middle;
    border-bottom: 1px solid #f0f2f5;
}

.zr-input-table tr:last-child td {
    border-bottom: none;
}

.zr-nr {
    color: #999;
    font-size: 0.8rem;
    text-align: right;
    white-space: nowrap;
}

.zr-th-ezb {
    white-space: nowrap;
    cursor: help;
    text-decoration: underline dotted;
}

.zr-td-center {
    text-align: center;
}

/* ---- Clear-Button in Zeilen ---- */
.zr-clear-btn {
    background: none;
    border: none;
    color: #ccc;
    font-size: 0;
    line-height: 1;
    cursor: pointer;
    padding: 0.2rem 0.3rem;
    border-radius: 3px;
    transition: color 0.15s;
    vertical-align: middle;
}

.zr-clear-btn:hover {
    color: #e05252;
    background: #fdf0f0;
}

/* ---- EZB-Hinweis ---- */
.zr-ezb-hint {
    margin-top: 0.7rem;
    font-size: 0.8rem;
    color: #777;
}

/* ---- Aktions-Buttons ---- */
.zr-actions {
    display: flex;
    gap: 0.8rem;
    margin-top: 1.2rem;
    margin-bottom: 1.4rem;
}

/* .zr-btn → .bp-btn (tailwind.input.css) */

/* ---- Fehlerbox ---- */
.zr-error {
    background: #fdf0f0;
    border: 1px solid #e77;
    border-radius: 5px;
    padding: 0.7rem 1rem;
    color: #b71c1c;
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.zr-warn {
    background: #fffde7;
    border: 1px solid #f9a825;
    border-radius: 5px;
    padding: 0.7rem 1rem;
    color: #7a5800;
    font-size: 0.9rem;
    margin-bottom: 1rem;
    white-space: pre-line;
}
.zr-warn::before {
    content: '⚠\00a0';
}

/* ---- Ergebnis-Bereich ---- */
.zr-result {
    border: 1px solid #c8e6c9;
    border-radius: 6px;
    background: #fff;
    overflow: hidden;
}

.zr-result h2 {
    background: #e8f5e9;
    margin: 0;
    padding: 0.7rem 1rem;
    font-size: 1rem;
    font-weight: 700;
    color: #1b5e20;
    border-bottom: 1px solid #c8e6c9;
}

.zr-result__summary {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 0.7rem 1rem;
    background: #f1f8f1;
    border-bottom: 1px solid #dcedc8;
    font-size: 0.9rem;
}

.zr-summary-item {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.zr-summary-item__label {
    font-size: 0.75rem;
    color: #666;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.zr-summary-item__value {
    font-size: 1.05rem;
    font-weight: 700;
    color: #1b5e20;
}

.zr-result__table-wrap {
    overflow-x: auto;
    padding: 0.5rem 0;
}

/* ---- Ergebnis-Tabelle ---- */
.zr-result-table {
    border-collapse: collapse;
    width: 100%;
    font-size: 0.87rem;
    min-width: 480px;
}

.zr-result-table th {
    text-align: left;
    font-weight: 600;
    color: #444;
    padding: 0.35rem 0.7rem;
    background: #f5f7f9;
    border-bottom: 2px solid #dde2e8;
    white-space: nowrap;
}

.zr-result-table th.zr-num,
.zr-result-table td.zr-num {
    text-align: right;
}

.zr-result-table td {
    padding: 0.28rem 0.7rem;
    border-bottom: 1px solid #f0f2f5;
    vertical-align: middle;
    white-space: nowrap;
}

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

.zr-result-table tbody tr:hover {
    background: #f5f9ff;
}

/* Farbige Event-Typen */
.zr-ev--zahlung td:first-child { border-left: 3px solid #4caf50; }
.zr-ev--zinseszins td:first-child { border-left: 3px solid #1976d2; }
.zr-ev--zinsabschluss td:first-child { border-left: 3px solid #e65100; }
.zr-ev--zinssatz td:first-child { border-left: 3px solid #7b1fa2; }
.zr-ev--abschluss td:first-child { border-left: 3px solid #e65100; }

/* Footer-Zeile */
.zr-result-table tfoot tr td {
    font-weight: 700;
    background: #f5f7f9;
    border-top: 2px solid #dde2e8;
    border-bottom: none;
    padding: 0.4rem 0.7rem;
}

/* Negative Beträge */
.zr-minus {
    color: #c62828;
}

/* ---- Ergebnis-Header (Titel + PDF-Button) ---- */
.zr-result__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #e8f5e9;
    padding: 0.7rem 1rem;
    border-bottom: 1px solid #c8e6c9;
    gap: 0.8rem;
}

.zr-result__header h2 {
    background: none;
    padding: 0;
    margin: 0;
    border: none;
    font-size: 1rem;
    font-weight: 700;
    color: #1b5e20;
}

.zr-btn--pdf {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.38rem 0.9rem;
    background: #1565c0;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s;
    flex-shrink: 0;
}

.zr-btn--pdf:hover {
    background: #0d47a1;
}

.zr-btn--pdf svg {
    flex-shrink: 0;
}

/* ---- PDF-Modal ---- */

.zr-modal__download {
    color: #fff;
    font-size: 0.85rem;
    text-decoration: none;
    padding: 0.2rem 0.7rem;
    border: 1px solid rgba(255,255,255,0.7);
    border-radius: 3px;
    white-space: nowrap;
    background: rgba(255,255,255,0.15);
    transition: background 0.15s;
}

.zr-modal__download:hover {
    background: rgba(255,255,255,0.3);
    color: #fff;
}

.zr-modal__iframe {
    flex: 1;
    width: 100%;
    border: none;
    background: #525659;
}
/* Media Queries → mobile-first migriert (siehe oben) */

/* Hilfe-Stile liegen jetzt einheitlich in modal.css (.bp-help-content) */