/* SplitNow – ergänzt Bootstrap 5.3 (mobile first) */

:root {
    --sn-farbe: #0d9488;
    --sn-farbe-dunkel: #0f766e;
    --sn-plus: #15803d;
    --sn-minus: #b91c1c;
    --bs-primary: var(--sn-farbe);
    --bs-primary-rgb: 13, 148, 136;
    --bs-link-color: var(--sn-farbe-dunkel);
    --bs-link-color-rgb: 15, 118, 110;
    --bs-body-bg: #f4f6f8;
}

body {
    background: var(--bs-body-bg);
    -webkit-tap-highlight-color: transparent;
}

.btn-primary {
    --bs-btn-bg: var(--sn-farbe);
    --bs-btn-border-color: var(--sn-farbe);
    --bs-btn-hover-bg: var(--sn-farbe-dunkel);
    --bs-btn-hover-border-color: var(--sn-farbe-dunkel);
    --bs-btn-active-bg: var(--sn-farbe-dunkel);
    --bs-btn-active-border-color: var(--sn-farbe-dunkel);
    --bs-btn-disabled-bg: var(--sn-farbe);
    --bs-btn-disabled-border-color: var(--sn-farbe);
}

.btn-outline-primary {
    --bs-btn-color: var(--sn-farbe-dunkel);
    --bs-btn-border-color: var(--sn-farbe);
    --bs-btn-hover-bg: var(--sn-farbe);
    --bs-btn-hover-border-color: var(--sn-farbe);
    --bs-btn-active-bg: var(--sn-farbe);
    --bs-btn-active-border-color: var(--sn-farbe);
}

.form-control:focus, .form-check-input:focus {
    border-color: var(--sn-farbe);
    box-shadow: 0 0 0 .2rem rgba(13, 148, 136, .25);
}

.form-check-input:checked {
    background-color: var(--sn-farbe);
    border-color: var(--sn-farbe);
}

/* Startseite */
.start { max-width: 34rem; }

.logo {
    width: 4rem;
    height: 4rem;
    margin: 0 auto;
    border-radius: 1.25rem;
    background: linear-gradient(135deg, #14b8a6, #0f766e);
    color: #fff;
    font-size: 2rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.person-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .3rem .4rem .3rem .75rem;
    border-radius: 2rem;
    background: rgba(13, 148, 136, .12);
    color: var(--sn-farbe-dunkel);
    font-weight: 500;
}

.person-chip button {
    border: 0;
    background: transparent;
    color: inherit;
    line-height: 1;
    padding: .1rem .35rem;
    font-size: 1.1rem;
}

/* Gruppenansicht */
.kopf {
    background: linear-gradient(135deg, #14b8a6, #0f766e);
    color: #fff;
    padding-top: env(safe-area-inset-top);
}

.inhalt {
    max-width: 40rem;
    padding-bottom: calc(8rem + env(safe-area-inset-bottom)) !important;
}

.kopf .container, .tabs .container { max-width: 40rem; }

.sync {
    width: .55rem;
    height: .55rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, .6);
    transition: background .3s;
}

.sync.ok { background: #86efac; }
.sync.fehler { background: #fca5a5; }

.tabs {
    background: #fff;
    border-top: 1px solid rgba(0, 0, 0, .08);
    padding-bottom: env(safe-area-inset-bottom);
}

.tab {
    flex: 1;
    border: 0;
    background: transparent;
    padding: .5rem 0 .55rem;
    font-size: .75rem;
    color: #6b7280;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .1rem;
}

.tab span { font-size: 1.25rem; line-height: 1.2; }
.tab.active { color: var(--sn-farbe-dunkel); font-weight: 600; }

.fab {
    position: fixed;
    right: max(1rem, calc(50vw - 20rem + 1rem));
    bottom: calc(4.75rem + env(safe-area-inset-bottom));
    width: 3.75rem;
    height: 3.75rem;
    border-radius: 50%;
    font-size: 2rem;
    line-height: 1;
    padding: 0;
    z-index: 1030;
}

.ausgabe { display: flex; gap: .75rem; align-items: center; }
.ausgabe .betrag { font-weight: 600; white-space: nowrap; }
.ausgabe .text-truncate { min-width: 0; }

.avatar {
    flex: none;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    background: rgba(13, 148, 136, .14);
    color: var(--sn-farbe-dunkel);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.plus { color: var(--sn-plus); }
.minus { color: var(--sn-minus); }

.saldo-zeile { margin-bottom: .9rem; }
.saldo-zeile:last-child { margin-bottom: 0; }

.balken {
    position: relative;
    height: .5rem;
    border-radius: .25rem;
    background: #e5e7eb;
    overflow: hidden;
}

.balken > div { position: absolute; top: 0; bottom: 0; }
.balken .p { left: 50%; background: var(--sn-plus); }
.balken .m { right: 50%; background: var(--sn-minus); }

.ausgleich-zeile { display: flex; align-items: center; gap: .5rem; }
.ausgleich-zeile .pfeil { color: #9ca3af; }

/* Erfassen */
.chips { display: flex; flex-wrap: wrap; gap: .4rem; }

.chips .btn {
    border-radius: 2rem;
    padding: .35rem .9rem;
}

.anteil-zeile { display: flex; align-items: center; gap: .75rem; }
.anteil-zeile .form-check-input { width: 1.4rem; height: 1.4rem; margin: 0; flex: none; }
.anteil-zeile .name { flex: 1; min-width: 0; }
.anteil-zeile input.form-control { width: 7rem; text-align: right; }

.leer {
    text-align: center;
    padding: 2.5rem 1rem;
    color: #6b7280;
}

/* QR-Code */
.qr { display: block; padding: 0; border: 0; background: #fff; }
.qr svg { display: block; width: 100%; height: 100%; }
.qr-klein { width: 13rem; height: 13rem; margin-left: auto; margin-right: auto; border-radius: .5rem; cursor: zoom-in; }
.qr-gross { width: min(85vw, 75vh); height: min(85vw, 75vh); }

.toast.erfolg { background: #ecfdf5; color: #065f46; }
.toast.fehler { background: #fef2f2; color: #991b1b; }