/* ============================================================
   ELKOM Rechnungsverwaltung – Stylesheet
   Palette: Dunkelblau #0d1b2a, Akzent #1565c0, Hellgrau #f4f6fa
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --c-navy:    #0d1b2a;
    --c-blue:    #1565c0;
    --c-blue-l:  #1976d2;
    --c-blue-xl: #e3f0ff;
    --c-bg:      #f4f6fa;
    --c-white:   #ffffff;
    --c-border:  #dce2ed;
    --c-text:    #1a2535;
    --c-muted:   #6b7a99;
    --c-success: #2e7d32;
    --c-warn:    #e65100;
    --c-danger:  #c62828;
    --c-green-bg:#e8f5e9;
    --c-warn-bg: #fff3e0;
    --c-red-bg:  #ffebee;
    --radius:    6px;
    --shadow:    0 1px 4px rgba(13,27,42,.10), 0 4px 16px rgba(13,27,42,.07);
}

html { font-size: 15px; }
body {
    font-family: 'IBM Plex Sans', sans-serif;
    background: var(--c-bg);
    color: var(--c-text);
    min-height: 100vh;
}

/* ── Topbar ─────────────────────────────────────────────── */
.topbar {
    background: var(--c-navy);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2rem;
    height: 56px;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.topbar-brand {
    display: flex;
    align-items: center;
    gap: .75rem;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-decoration: none;
    color: #fff;
}
.topbar-brand span { color: #90caf9; font-weight: 400; font-size: .85rem; margin-left:.3rem; }
.topbar-nav { display: flex; gap: .25rem; }
.topbar-nav a {
    color: #b0bec5;
    text-decoration: none;
    padding: .4rem .85rem;
    border-radius: var(--radius);
    font-size: .88rem;
    font-weight: 500;
    transition: background .15s, color .15s;
}
.topbar-nav a:hover, .topbar-nav a.active {
    background: rgba(255,255,255,.1);
    color: #fff;
}

/* ── Layout ─────────────────────────────────────────────── */
.page { max-width: 1100px; margin: 0 auto; padding: 2rem 1.5rem; }
.page-sm { max-width: 820px; margin: 0 auto; padding: 2rem 1.5rem; }

/* ── Page Header ─────────────────────────────────────────── */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.75rem;
}
.page-header h1 {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--c-navy);
}
.page-header h1 small {
    font-size: .75rem;
    font-weight: 400;
    color: var(--c-muted);
    margin-left: .5rem;
}

/* ── Cards ───────────────────────────────────────────────── */
.card {
    background: var(--c-white);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    margin-bottom: 1.5rem;
}
.card-header {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--c-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.card-header h2 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--c-navy);
}
.card-body { padding: 1.5rem; }

/* ── Stats Row ───────────────────────────────────────────── */
.stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.75rem;
}
.stat-card {
    background: var(--c-white);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    padding: 1.1rem 1.25rem;
    box-shadow: var(--shadow);
}
.stat-card .label { font-size: .8rem; color: var(--c-muted); font-weight: 500; text-transform: uppercase; letter-spacing: .05em; }
.stat-card .value { font-size: 1.65rem; font-weight: 700; color: var(--c-navy); margin-top: .2rem; font-family: 'IBM Plex Mono', monospace; }
.stat-card.blue  { border-top: 3px solid var(--c-blue); }
.stat-card.green { border-top: 3px solid var(--c-success); }
.stat-card.warn  { border-top: 3px solid var(--c-warn); }
.stat-card.grey  { border-top: 3px solid var(--c-muted); }

/* ── Filter Tabs ─────────────────────────────────────────── */
.filter-tabs {
    display: flex;
    gap: .5rem;
    margin-bottom: 1.25rem;
}
.filter-tabs a {
    padding: .4rem 1rem;
    border-radius: 20px;
    font-size: .84rem;
    font-weight: 500;
    text-decoration: none;
    color: var(--c-muted);
    background: var(--c-white);
    border: 1px solid var(--c-border);
    transition: all .15s;
}
.filter-tabs a:hover { border-color: var(--c-blue); color: var(--c-blue); }
.filter-tabs a.active { background: var(--c-blue); color: #fff; border-color: var(--c-blue); }

/* ── Table ───────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
table thead tr { border-bottom: 2px solid var(--c-border); }
table th {
    text-align: left;
    padding: .7rem 1rem;
    font-size: .78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--c-muted);
}
table td {
    padding: .8rem 1rem;
    border-bottom: 1px solid var(--c-border);
    font-size: .9rem;
    vertical-align: middle;
}
table tbody tr:last-child td { border-bottom: none; }
table tbody tr:hover { background: #f7f9fc; }
.num { font-family: 'IBM Plex Mono', monospace; font-size: .88rem; }
.td-actions { display: flex; gap: .4rem; }
table td .amount { font-weight: 600; font-family: 'IBM Plex Mono', monospace; }

/* ── Badges ──────────────────────────────────────────────── */
.badge {
    display: inline-block;
    padding: .2rem .65rem;
    border-radius: 20px;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .02em;
}
.badge-offen    { background: var(--c-warn-bg); color: var(--c-warn); }
.badge-bezahlt  { background: var(--c-green-bg); color: var(--c-success); }
.badge-storniert{ background: var(--c-red-bg); color: var(--c-danger); }
.badge-wieder   { background: var(--c-blue-xl); color: var(--c-blue); }
.badge-einmalig { background: #f3f4f8; color: var(--c-muted); }

/* ── Buttons ─────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .55rem 1.1rem;
    border-radius: var(--radius);
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    border: 1px solid transparent;
    transition: all .15s;
    font-family: inherit;
    white-space: nowrap;
}
.btn-primary { background: var(--c-blue); color: #fff; border-color: var(--c-blue); }
.btn-primary:hover { background: #1251a3; border-color: #1251a3; }
.btn-secondary { background: #fff; color: var(--c-text); border-color: var(--c-border); }
.btn-secondary:hover { border-color: var(--c-blue); color: var(--c-blue); background: var(--c-blue-xl); }
.btn-success { background: var(--c-success); color: #fff; border-color: var(--c-success); }
.btn-success:hover { background: #1b5e20; }
.btn-danger  { background: #fff; color: var(--c-danger); border-color: #ef9a9a; }
.btn-danger:hover  { background: var(--c-red-bg); border-color: var(--c-danger); }
.btn-sm { padding: .3rem .7rem; font-size: .8rem; }
.btn-warn { background: var(--c-warn); color: #fff; border-color: var(--c-warn); }
.btn-warn:hover { background: #bf360c; }

/* ── Forms ───────────────────────────────────────────────── */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; }
.form-group { display: flex; flex-direction: column; gap: .35rem; }
.form-group.full { grid-column: 1 / -1; }
label { font-size: .82rem; font-weight: 600; color: var(--c-muted); text-transform: uppercase; letter-spacing: .04em; }
input[type=text], input[type=date], input[type=number], input[type=email],
select, textarea {
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    padding: .55rem .8rem;
    font-size: .9rem;
    font-family: inherit;
    color: var(--c-text);
    background: var(--c-white);
    outline: none;
    transition: border-color .15s;
    width: 100%;
}
input:focus, select:focus, textarea:focus { border-color: var(--c-blue); box-shadow: 0 0 0 3px rgba(21,101,192,.15); }
textarea { resize: vertical; min-height: 80px; }
.form-hint { font-size: .78rem; color: var(--c-muted); margin-top: .2rem; }

/* ── Positions Table ─────────────────────────────────────── */
.pos-table { width: 100%; border-collapse: collapse; margin-bottom: 1rem; }
.pos-table th {
    padding: .5rem .6rem;
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--c-muted);
    border-bottom: 2px solid var(--c-border);
    text-align: left;
}
.pos-table td { padding: .4rem .4rem; border-bottom: 1px solid #edf0f7; vertical-align: middle; }
.pos-table tr.pos-row:last-child td { border-bottom: none; }
.pos-table input { font-size: .88rem; }
.pos-table .col-nr { width: 40px; }
.pos-table .col-desc { }
.pos-table .col-menge { width: 80px; }
.pos-table .col-einheit { width: 90px; }
.pos-table .col-ep { width: 110px; }
.pos-table .col-mwst { width: 80px; }
.pos-table .col-ges { width: 110px; text-align: right; font-family: 'IBM Plex Mono', monospace; font-size: .88rem; color: var(--c-navy); }
.pos-table .col-del { width: 36px; text-align: center; }
.btn-del-pos {
    background: none;
    border: none;
    color: #aaa;
    cursor: pointer;
    font-size: 1.1rem;
    padding: 0 .25rem;
    border-radius: 4px;
    transition: color .15s;
}
.btn-del-pos:hover { color: var(--c-danger); }
.nr-cell { font-size: .8rem; color: var(--c-muted); text-align: center; padding-top: .5rem; }

/* ── Summen Box ──────────────────────────────────────────── */
.summen-box {
    margin-left: auto;
    width: 300px;
    margin-top: .5rem;
}
.summen-box table { font-size: .9rem; }
.summen-box td { padding: .3rem .5rem; border: none; }
.summen-box tr.total td {
    font-weight: 700;
    font-size: 1rem;
    border-top: 2px solid var(--c-navy);
    padding-top: .5rem;
    color: var(--c-navy);
}
.summen-box tr.total td:last-child { font-family: 'IBM Plex Mono', monospace; }
.summen-box td:last-child { text-align: right; font-family: 'IBM Plex Mono', monospace; }

/* ── Alerts ──────────────────────────────────────────────── */
.alert {
    padding: .75rem 1rem;
    border-radius: var(--radius);
    font-size: .88rem;
    margin-bottom: 1rem;
}
.alert-success { background: var(--c-green-bg); color: var(--c-success); border: 1px solid #a5d6a7; }
.alert-error   { background: var(--c-red-bg);   color: var(--c-danger);  border: 1px solid #ef9a9a; }
.alert-info    { background: var(--c-blue-xl);  color: var(--c-blue);    border: 1px solid #90caf9; }

/* ── Print / Invoice View ────────────────────────────────── */
.invoice-paper {
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    padding: 3rem 3.5rem;
    box-shadow: var(--shadow);
    max-width: 820px;
    margin: 0 auto 2rem;
    position: relative;
}
.inv-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 2.5rem; }
.inv-company-name { font-size: 1.5rem; font-weight: 800; color: var(--c-navy); letter-spacing: -.01em; }
.inv-company-sub  { font-size: .8rem; color: var(--c-muted); margin-top: .1rem; }
.inv-company-contact { font-size: .78rem; color: var(--c-muted); margin-top: .5rem; line-height: 1.6; }
.inv-right { text-align: right; }
.inv-title { font-size: 1.8rem; font-weight: 800; color: var(--c-blue); letter-spacing: -.02em; }
.inv-nr    { font-size: .9rem; color: var(--c-muted); margin-top: .2rem; }

.inv-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-bottom: 2.5rem; }
.inv-meta-block h3 { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--c-muted); margin-bottom: .5rem; }
.inv-meta-block p  { font-size: .88rem; line-height: 1.65; color: var(--c-text); }
.inv-meta-block .kd-name { font-weight: 700; font-size: .95rem; }

.inv-dates { display: flex; gap: 2rem; margin-bottom: 2.5rem; padding: .9rem 1.2rem; background: var(--c-bg); border-radius: var(--radius); }
.inv-dates div { display: flex; flex-direction: column; gap: .15rem; }
.inv-dates .dl { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--c-muted); }
.inv-dates .dv { font-size: .9rem; font-weight: 600; color: var(--c-navy); }

.inv-table { width: 100%; border-collapse: collapse; margin-bottom: 1.5rem; }
.inv-table th { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--c-muted); border-bottom: 1.5px solid var(--c-border); padding: .5rem .6rem; }
.inv-table td { padding: .7rem .6rem; border-bottom: 1px solid #f0f2f7; font-size: .88rem; }
.inv-table th:not(:first-child), .inv-table td:not(:first-child) { text-align: right; }
.inv-table td:first-child { font-weight: 500; }
.inv-table .mono { font-family: 'IBM Plex Mono', monospace; }

.inv-summen { display: flex; justify-content: flex-end; margin-bottom: 2rem; }
.inv-summen table { border-collapse: collapse; min-width: 260px; }
.inv-summen td { padding: .3rem .5rem; font-size: .88rem; }
.inv-summen td:last-child { text-align: right; font-family: 'IBM Plex Mono', monospace; min-width: 100px; }
.inv-summen tr.total-row { border-top: 2px solid var(--c-navy); }
.inv-summen tr.total-row td { font-weight: 800; font-size: 1.05rem; padding-top: .6rem; color: var(--c-navy); }

.inv-footer { border-top: 1px solid var(--c-border); padding-top: 1.25rem; display: flex; justify-content: space-between; gap: 2rem; }
.inv-footer .fblock { font-size: .75rem; color: var(--c-muted); line-height: 1.7; }
.inv-footer .fblock strong { color: var(--c-text); font-weight: 600; display: block; margin-bottom: .2rem; }
.inv-notizen { margin-bottom: 1.5rem; padding: .75rem 1rem; background: #fafbfe; border-left: 3px solid var(--c-blue); font-size: .85rem; color: var(--c-text); }

/* ── Wiederkehrend-Tag ───────────────────────────────────── */
.wieder-tag { display: inline-flex; align-items: center; gap: .35rem; background: var(--c-blue-xl); color: var(--c-blue); border-radius: 4px; padding: .2rem .6rem; font-size: .8rem; font-weight: 600; }

/* ── Misc ────────────────────────────────────────────────── */
.text-muted  { color: var(--c-muted); font-size: .85rem; }
.flex-end    { display: flex; justify-content: flex-end; gap: .75rem; }
.flex-gap    { display: flex; gap: .75rem; align-items: center; }
.mt-1 { margin-top: .5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mb-1 { margin-bottom: .5rem; }
.mb-2 { margin-bottom: 1rem; }
.divider { border: none; border-top: 1px solid var(--c-border); margin: 1.5rem 0; }
.empty-state { text-align: center; padding: 3rem; color: var(--c-muted); }
.empty-state .icon { font-size: 2.5rem; margin-bottom: .75rem; }

/* ── Print Styles ────────────────────────────────────────── */
@media print {
    .topbar, .no-print { display: none !important; }
    body { background: white; }
    .invoice-paper { border: none; box-shadow: none; padding: 0; max-width: 100%; }
    .page-sm { padding: 0; max-width: 100%; }
    .inv-footer { page-break-inside: avoid; }
}

@media (max-width: 700px) {
    .stats-row { grid-template-columns: 1fr 1fr; }
    .form-grid, .form-grid-3 { grid-template-columns: 1fr; }
    .topbar { padding: 0 1rem; }
    .page, .page-sm { padding: 1rem; }
    .invoice-paper { padding: 1.5rem; }
}