/* =========================================================================
   "Schlicht & edel" — ruhiges, hochwertiges Monochrom-Theme über Bulma 0.7.2.
   Kein Blau, kein Verlauf. Anthrazit/Schwarz auf Weiß, viel Weißraum.
   ========================================================================= */

:root {
    --ink: #18191d;
    --ink-600: #2b2d33;
    --bg: #f6f6f7;
    --surface: #ffffff;
    --text: #1c1d21;
    --muted: #868a92;
    --border: #ececef;
    --tint: #f1f1f3;              /* helle Chip-/Hover-Fläche */
    --green: #2f7d54; --green-bg: #eaf3ee; --green-fg: #276a48;
    --amber: #9a6a12; --amber-bg: #f6eede; --amber-fg: #7d5510;
    --red: #ff3b30;
    --radius: 16px;
    --radius-sm: 11px;
    --shadow-sm: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .06);
    --shadow-md: 0 6px 18px rgba(16, 24, 40, .08);
    --shadow-lg: 0 14px 36px rgba(16, 24, 40, .12);
}

/* ---- Base ---------------------------------------------------------------- */
html, body {
    background: var(--bg);
    color: var(--text);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.section, .section.has-background-light { background: var(--bg) !important; }
.hero.has-background-light { background: var(--bg) !important; }
.hero.has-background-white { background: var(--surface) !important; }
.title { color: var(--text); font-weight: 700; letter-spacing: -.02em; }
.subtitle { color: var(--muted); }
a { color: var(--ink); }
a:hover { color: var(--ink-600); }

/* ---- Navbar -------------------------------------------------------------- */
.navbar {
    background: var(--surface) !important;
    border-bottom: 1px solid var(--border);
    box-shadow: none !important;
    min-height: 3.75rem;
}
.navbar-item, .navbar-link {
    color: var(--text) !important;
    font-weight: 500;
    border-radius: 8px;
}
.navbar-item:hover, .navbar-item.is-active, .navbar-link:hover {
    background: var(--tint) !important;
    color: var(--ink) !important;
}
.navbar-brand .navbar-item:hover { background: transparent !important; }
.navbar-menu { box-shadow: none; background: var(--surface); }
@media screen and (max-width: 1023px) {
    .navbar-menu.is-active {
        box-shadow: var(--shadow-md);
        border-radius: 0 0 var(--radius) var(--radius);
        padding: .5rem;
    }
    .navbar-menu.is-active .navbar-item { padding: .6rem .75rem; }
}
.navbar-burger { color: var(--ink); }

/* ---- Buttons ------------------------------------------------------------- */
.button {
    border-radius: var(--radius-sm);
    font-weight: 600;
    border: 1px solid var(--border);
    transition: transform .1s ease, box-shadow .15s ease, background-color .15s ease;
}
.button:hover { transform: translateY(-1px); }
.button:active { transform: translateY(0); }

/* Primary actions: elegant black */
.button.is-info, .button.is-link, .button.is-primary {
    background: var(--ink) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: var(--shadow-sm);
}
.button.is-info:hover, .button.is-link:hover, .button.is-primary:hover {
    background: var(--ink-600) !important;
}
.button.is-outlined.is-info {
    background: transparent !important;
    color: var(--ink) !important;
    border-color: var(--ink) !important;
}

/* Status buttons in the invoice list: bright, luminous status colors */
.button.is-small.is-primary {
    background: #22c55e !important; color: #fff !important;
}                                              /* bezahlt = leuchtendes Grün */
.button.is-small.is-warning {
    background: #ffd60a !important; color: #1c1d21 !important;
}                                              /* offen = leuchtendes Gelb */
.button.is-small.is-info.is-fullwidth {
    background: #2563eb !important; color: #fff !important;
}                                              /* auf Rechnung = Blau */

.button.is-warning {
    background: var(--amber) !important; border-color: transparent !important; color: #fff !important;
}
.button.is-danger {
    background: var(--red) !important; border-color: transparent !important; color: #fff !important;
}
.button.is-danger.is-inverted {
    background: transparent !important; color: var(--red) !important; border-color: var(--red) !important;
}
.button.is-floating {
    background: var(--ink) !important; color: #fff !important;
    box-shadow: var(--shadow-lg) !important; border: none !important;
}

/* ---- Form controls ------------------------------------------------------- */
.input, .textarea, .select select {
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    box-shadow: none; color: var(--text);
    transition: border-color .12s ease, box-shadow .12s ease;
}
.input::placeholder, .textarea::placeholder { color: #a2a6ad; }
.input:focus, .textarea:focus, .select select:focus {
    border-color: var(--ink) !important;
    box-shadow: 0 0 0 3px rgba(24, 25, 29, .10) !important;
}
.label { color: #3a3d44; font-weight: 600; }
.help { color: var(--muted); }
.select:not(.is-multiple):not(.is-loading)::after { border-color: var(--ink); }

/* ---- Cards / boxes ------------------------------------------------------- */
.box {
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
    background: var(--surface);
}

/* ---- Tables -------------------------------------------------------------- */
.table { background: transparent; color: var(--text); }
.table td, .table th { border-color: var(--border); vertical-align: middle; padding: .85em 1em; }
.table th {
    color: var(--muted); font-weight: 600; text-transform: uppercase;
    font-size: .72rem; letter-spacing: .04em;
}
.table.is-hoverable tbody tr:hover { background: #fafafb !important; }

/* ---- Tags / status ------------------------------------------------------- */
.tag { border-radius: 999px; font-weight: 600; padding-left: .85em; padding-right: .85em; }
.tag.is-primary { background: var(--green-bg) !important; color: var(--green-fg) !important; }
.tag.is-warning { background: var(--amber-bg) !important; color: var(--amber-fg) !important; }
.tag.is-light { background: var(--tint) !important; color: #55585f !important; }

/* ---- Notifications ------------------------------------------------------- */
.notification { border-radius: var(--radius); }
.notification.is-primary { background: var(--tint); color: var(--ink); }
.notification.is-warning { background: var(--amber-bg); color: var(--amber-fg); }
.notification.is-success, .notification.is-success.is-light {
    background: var(--green-bg); color: var(--green-fg);
}

/* ---- Tabs ---------------------------------------------------------------- */
.tabs.is-boxed li.is-active a {
    background: var(--surface); border-color: var(--border);
    border-bottom-color: transparent; color: var(--ink); font-weight: 600;
}
.tabs a { border-radius: var(--radius-sm) var(--radius-sm) 0 0; color: var(--muted); }
.tabs a:hover { border-bottom-color: var(--ink); color: var(--ink); }

/* ---- Pagination ---------------------------------------------------------- */
.pagination-link, .pagination-previous, .pagination-next {
    border-radius: var(--radius-sm); border-color: var(--border); color: var(--text);
}
.pagination-link.is-current { background: var(--ink); border-color: var(--ink); color: #fff; }

/* ---- Breadcrumb ---------------------------------------------------------- */
.breadcrumb a { color: var(--ink); }
.breadcrumb li.is-active a { color: var(--muted); }

/* ---- Stornierte Rechnungen (klar rot markiert) --------------------------- */
.storno-row,
.table.is-hoverable tbody tr.storno-row:hover { background: #fff2f1 !important; }
.storno-row td, .storno-row td a, .storno-row .is-size-7 { color: #e5342b !important; }
.button.is-small.storno-badge {
    background: #ff3b30 !important; color: #fff !important;
    font-weight: 700; letter-spacing: .04em; text-decoration: none !important;
    border: none !important;
}

/* ---- Bezahlstatus farbig (offen rot / bezahlt gruen) --------------------- */
select#payment-status { font-weight: 700 !important; }
select#payment-status.status-payed { background-color: #e7f8ec !important; color: #1a7f37 !important; }
select#payment-status.status-open  { background-color: #fdecea !important; color: #e5342b !important; }
.select:has(select#payment-status.status-payed)::after { border-color: #1a7f37 !important; }
.select:has(select#payment-status.status-open)::after  { border-color: #e5342b !important; }

/* ---- Favoriten-Buttons: Preis als farbige Pille ------------------------- */
.preset-button {
    display: inline-flex; align-items: center; gap: 8px;
    border-radius: 999px; padding-left: 16px; padding-right: 6px;
    height: auto; min-height: 2.25em;
}
.preset-button .preset-price {
    background: #e7f8ec; color: #1a7f37;
    font-weight: 700; font-variant-numeric: tabular-nums;
    padding: 2px 8px; border-radius: 999px; line-height: 1.4;
    white-space: nowrap;
}

/* ---- Kassenbuch: Einnahme/Ausgabe-Umschaltung -------------------------- */
.cb-type-toggle { display: flex; gap: 10px; }
.cb-type-option {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 14px 10px; border: 2px solid var(--border); border-radius: var(--radius);
    cursor: pointer; font-weight: 700; color: var(--muted);
    background: #fff; transition: all .12s ease; user-select: none;
}
.cb-type-option input { display: none; }
.cb-type-option .cb-sign {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 999px; font-size: 15px; line-height: 1;
    background: #eee; color: #888;
}
.cb-type-option.cb-income.is-active {
    border-color: #1a7f37; background: #e7f8ec; color: #1a7f37;
}
.cb-type-option.cb-income.is-active .cb-sign { background: #1a7f37; color: #fff; }
.cb-type-option.cb-expense.is-active {
    border-color: #e5342b; background: #fdecea; color: #e5342b;
}
.cb-type-option.cb-expense.is-active .cb-sign { background: #e5342b; color: #fff; }
input#value.cb-is-income  { color: #1a7f37; font-weight: 700; }
input#value.cb-is-expense { color: #e5342b; font-weight: 700; }
input#value::-webkit-outer-spin-button,
input#value::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input#value { -moz-appearance: textfield; appearance: textfield; }
.cb-balance {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 12px; padding: 14px 16px; margin-bottom: 18px;
    background: var(--ink, #111); color: #fff; border-radius: var(--radius);
}
.cb-balance-label { font-size: .95rem; opacity: .85; }
.cb-balance-value { font-size: 1.5rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.cb-preview { font-weight: 700; color: #1a7f37; margin-top: 6px; }
.cb-preview.is-negative { color: #e5342b; }

/* ---- Rechnungssuche (Pill-Look) ----------------------------------------- */
.invoice-search { margin-bottom: 1rem; box-shadow: var(--shadow-sm); border-radius: 999px; }
.invoice-search .control.is-expanded { }
.invoice-search .input {
    height: 3.1em; font-size: 1.05rem;
    border: 1px solid var(--border); border-right: none;
    border-radius: 999px 0 0 999px; padding-left: 3.1em; box-shadow: none;
}
.invoice-search .input:focus { border-color: var(--ink); box-shadow: none; }
.invoice-search .icon.is-left { height: 3.1em !important; width: 3.1em !important; color: var(--muted); }
.invoice-search .icon.is-left i { font-size: 1.05rem; }
.invoice-search .button {
    height: 3.1em; border-radius: 0 999px 999px 0 !important;
    padding: 0 1.8em; font-weight: 700;
}

/* ---- Kommunikation: Karten-Raster (mobilfreundlich) --------------------- */
.comm-grid {
    display: grid; gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    margin-top: .5rem;
}
.comm-card { margin: 0; }
.comm-head {
    display: flex; align-items: center; gap: .55rem;
    font-weight: 700; font-size: 1.05rem; margin-bottom: .8rem;
}
.comm-head .icon { color: var(--ink); }
.comm-qr { max-width: 220px; margin: .3rem auto 0; }
.comm-card .button { min-height: 2.9em; }
.comm-card .input { min-height: 2.9em; }

/* ---- Rechnungsliste als Karten-Zeilen (mobilfreundlich) ----------------- */
.inv-list { display: flex; flex-direction: column; gap: .6rem; }
.inv-row {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: .85rem 1rem; background: var(--surface);
    border: 1px solid var(--border); border-left: 4px solid var(--border);
    border-radius: 14px; box-shadow: var(--shadow-sm);
    color: var(--text) !important;
    transition: transform .1s ease, box-shadow .2s ease;
}
.inv-row:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.inv-row--payed  { border-left-color: #1a7f37; }
.inv-row--offen  { border-left-color: #d9a400; }
.inv-row--ueber  { border-left-color: #2563eb; }
.inv-row--storno { border-left-color: #e5342b; }
.inv-main { min-width: 0; flex: 1; }
.inv-name { font-weight: 700; font-size: 1.02rem; line-height: 1.25; word-break: break-word; }
.inv-sub { color: var(--muted); font-size: .8rem; margin-top: .15rem; }
.inv-right { display: flex; flex-direction: column; align-items: flex-end; gap: .4rem; flex: none; }
.inv-amount { font-weight: 800; font-size: 1.02rem; white-space: nowrap; }
.inv-badge {
    font-size: .72rem; font-weight: 700; letter-spacing: .02em;
    padding: .25em .75em; border-radius: 999px; white-space: nowrap;
}
.inv-badge--payed  { background: #e7f8ec; color: #1a7f37; }
.inv-badge--offen  { background: #fff4d6; color: #8a6100; }
.inv-badge--ueber  { background: #e7f0fe; color: #2563eb; }
.inv-badge--storno { background: #fde7e6; color: #e5342b; }
.inv-badge--count  { background: var(--tint, #f1f1f3); color: var(--muted); }
.inv-row.storno-row { background: #fff2f1 !important; }
.inv-row.storno-row:hover { background: #ffeae8 !important; }
.inv-row.storno-row .inv-name,
.inv-row.storno-row .inv-amount { color: #e5342b; }

/* ---- Filter-/Suchleiste (Karte) ----------------------------------------- */
.filterbar {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 18px; padding: 1rem; box-shadow: var(--shadow-sm);
    margin-bottom: 1.1rem;
}
.filterbar .invoice-search { box-shadow: none; margin-bottom: 0; }
.filter-chips { margin-top: .85rem !important; align-items: center; }
.filter-chips .control { margin-bottom: .4rem !important; }
.filter-chips .select:not(.is-multiple):not(.is-loading)::after { right: 1.05em; }
.filter-chips .select select,
.filter-chips .input {
    border-radius: 999px !important; border: 1px solid var(--border) !important;
    height: 2.7em; background: #fff; font-weight: 600; color: var(--text);
    padding-left: 1em; padding-right: 1.1em;
}
.filter-chips .select select { padding-right: 2.4em; }
.filter-chips .button { border-radius: 999px !important; height: 2.7em; font-weight: 700; }
.filter-count { font-size: .82rem; color: var(--muted); font-weight: 600; margin: 0 0 .8rem .2rem; }

/* ---- Filter: beschriftete Datums-Pillen --------------------------------- */
.filter-chips .fc-date {
    display: inline-flex; align-items: center; gap: .5rem;
    height: 2.7em; padding: 0 1.05em; background: #fff;
    border: 1px solid var(--border); border-radius: 999px;
}
.filter-chips .fc-date label { font-size: .78rem; color: var(--muted); font-weight: 700; }
.filter-chips .fc-date input {
    border: none; background: transparent; color: var(--text);
    font-weight: 600; font-size: .9rem; padding: 0; height: auto; min-width: 6.4em;
    box-shadow: none;
}
.filter-chips .fc-date input:focus { outline: none; box-shadow: none; }

/* ---- Zahlung: Dropdown + Speichern nebeneinander (mobil gestapelt) ------ */
.settle-row { display: flex; gap: .6rem; align-items: stretch; }
.settle-row .select { flex: 1; }
.settle-row .select, .settle-row .select select { height: 2.7em; }
.settle-row .settle-save { white-space: nowrap; padding-left: 1.5em; padding-right: 1.5em; }
@media (max-width: 640px) {
    .settle-row { flex-direction: column; }
    .settle-row .settle-save { width: 100%; }
}