880 lines
26 KiB
CSS
880 lines
26 KiB
CSS
/* ============================================================
|
||
Steuerkram – Haupt-Stylesheet
|
||
============================================================ */
|
||
|
||
:root {
|
||
--color-bg: #f4f6f9;
|
||
--color-surface: #ffffff;
|
||
--color-border: #d1d9e0;
|
||
--color-primary: #2563eb;
|
||
--color-primary-h: #1d4ed8;
|
||
--color-danger: #dc2626;
|
||
--color-danger-h: #b91c1c;
|
||
--color-success: #16a34a;
|
||
--color-warning: #d97706;
|
||
--color-text: #1e293b;
|
||
--color-muted: #64748b;
|
||
--color-nav-bg: #1e293b;
|
||
--color-nav-text: #cbd5e1;
|
||
--color-nav-hover: #334155;
|
||
--color-nav-active:#2563eb;
|
||
|
||
--radius: 6px;
|
||
--shadow-sm: 0 1px 3px rgba(0,0,0,.08);
|
||
--shadow: 0 2px 8px rgba(0,0,0,.10);
|
||
--font: 'Segoe UI', system-ui, -apple-system, sans-serif;
|
||
--font-mono: 'Cascadia Code', 'Consolas', monospace;
|
||
--nav-width: 220px;
|
||
}
|
||
|
||
/* ── Reset ─────────────────────────────────────────────────── */
|
||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||
html { font-size: 15px; }
|
||
body { font-family: var(--font); background: var(--color-bg); color: var(--color-text); }
|
||
a { color: var(--color-primary); text-decoration: none; }
|
||
a:hover { text-decoration: underline; }
|
||
img { max-width: 100%; }
|
||
|
||
/* ── Layout ─────────────────────────────────────────────────── */
|
||
.app-layout {
|
||
display: grid;
|
||
grid-template-columns: var(--nav-width) 1fr;
|
||
min-height: 100vh;
|
||
}
|
||
|
||
/* ── Sidebar Navigation ─────────────────────────────────────── */
|
||
.sidebar {
|
||
background: var(--color-nav-bg);
|
||
color: var(--color-nav-text);
|
||
display: flex;
|
||
flex-direction: column;
|
||
position: sticky;
|
||
top: 0;
|
||
height: 100vh;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.sidebar-brand {
|
||
padding: 1.25rem 1rem;
|
||
font-size: 1.1rem;
|
||
font-weight: 700;
|
||
color: #fff;
|
||
border-bottom: 1px solid #334155;
|
||
letter-spacing: .02em;
|
||
}
|
||
|
||
.sidebar-brand span { color: var(--color-nav-active); }
|
||
|
||
.sidebar-section {
|
||
padding: .5rem 0 .25rem;
|
||
}
|
||
|
||
.sidebar-label {
|
||
font-size: .65rem;
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: .08em;
|
||
color: #475569;
|
||
padding: .5rem 1rem .25rem;
|
||
}
|
||
|
||
.sidebar nav a {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: .6rem;
|
||
padding: .55rem 1rem;
|
||
color: var(--color-nav-text);
|
||
font-size: .875rem;
|
||
border-left: 3px solid transparent;
|
||
transition: background .15s, color .15s;
|
||
}
|
||
|
||
.sidebar nav a:hover {
|
||
background: var(--color-nav-hover);
|
||
color: #fff;
|
||
text-decoration: none;
|
||
}
|
||
|
||
.sidebar nav a.active {
|
||
background: rgba(37,99,235,.15);
|
||
color: #93c5fd;
|
||
border-left-color: var(--color-nav-active);
|
||
}
|
||
|
||
.sidebar nav a svg {
|
||
width: 16px; height: 16px; flex-shrink: 0;
|
||
}
|
||
|
||
/* ── Main content ───────────────────────────────────────────── */
|
||
.main-content {
|
||
display: flex;
|
||
flex-direction: column;
|
||
height: 100vh;
|
||
overflow-y: auto;
|
||
overflow-x: hidden;
|
||
}
|
||
|
||
.topbar {
|
||
background: var(--color-surface);
|
||
border-bottom: 1px solid var(--color-border);
|
||
padding: .75rem 1.5rem;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 1rem;
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 10;
|
||
}
|
||
|
||
.topbar-title {
|
||
font-size: 1.1rem;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.page-body {
|
||
padding: 1.5rem;
|
||
flex: 1;
|
||
}
|
||
|
||
/* ── Flash Messages ─────────────────────────────────────────── */
|
||
.flash-list { margin-bottom: 1rem; }
|
||
|
||
.flash {
|
||
padding: .75rem 1rem;
|
||
border-radius: var(--radius);
|
||
margin-bottom: .5rem;
|
||
font-size: .875rem;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: .5rem;
|
||
}
|
||
|
||
.flash-success { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }
|
||
.flash-error { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }
|
||
.flash-warning { background: #fef9c3; color: #854d0e; border: 1px solid #fef08a; }
|
||
.flash-info { background: #dbeafe; color: #1e40af; border: 1px solid #bfdbfe; }
|
||
|
||
/* KI-Vorschlag-Badge auf der Belegdetailseite (beleg-ki.js) */
|
||
.ki-badge-done { justify-content: space-between; align-items: flex-start; gap: 1rem; }
|
||
.ki-badge-details { font-size: .9em; }
|
||
.ki-badge-zeile { font-size: .85em; }
|
||
.ki-badge-hinweis { color: var(--color-muted); font-style: italic; }
|
||
.ki-badge-warn { color: var(--color-warning); font-weight: 600; }
|
||
.ki-badge-btn { flex-shrink: 0; margin-top: .1rem; }
|
||
|
||
/* ── Cards ──────────────────────────────────────────────────── */
|
||
.card {
|
||
background: var(--color-surface);
|
||
border: 1px solid var(--color-border);
|
||
border-radius: var(--radius);
|
||
box-shadow: var(--shadow-sm);
|
||
}
|
||
|
||
.card-header {
|
||
padding: 1rem 1.25rem;
|
||
border-bottom: 1px solid var(--color-border);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 1rem;
|
||
}
|
||
|
||
.card-title { font-size: 1rem; font-weight: 600; }
|
||
|
||
.card-body { padding: 1.25rem; }
|
||
|
||
/* ── Buttons ─────────────────────────────────────────────────── */
|
||
.btn {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: .4rem;
|
||
padding: .45rem .9rem;
|
||
font-size: .875rem;
|
||
font-weight: 500;
|
||
border-radius: var(--radius);
|
||
border: 1px solid transparent;
|
||
cursor: pointer;
|
||
transition: background .15s, border-color .15s, opacity .15s;
|
||
text-decoration: none !important;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.btn:disabled { opacity: .5; cursor: not-allowed; }
|
||
|
||
.btn-primary { background: var(--color-primary); color: #fff; }
|
||
.btn-primary:hover { background: var(--color-primary-h); }
|
||
|
||
.btn-secondary { background: var(--color-surface); color: var(--color-text); border-color: var(--color-border); }
|
||
.btn-secondary:hover { background: var(--color-bg); }
|
||
|
||
.btn-danger { background: var(--color-danger); color: #fff; }
|
||
.btn-danger:hover { background: var(--color-danger-h); }
|
||
|
||
.btn-success { background: var(--color-success); color: #fff; }
|
||
.btn-success:hover { background: #15803d; }
|
||
|
||
.btn-sm { padding: .3rem .65rem; font-size: .8rem; }
|
||
.btn-lg { padding: .65rem 1.25rem; font-size: 1rem; }
|
||
|
||
/* ── Forms ───────────────────────────────────────────────────── */
|
||
.form-group { margin-bottom: 1rem; }
|
||
|
||
.betrag-modus-btn {
|
||
padding: .35rem .7rem;
|
||
font-size: .75rem;
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: .04em;
|
||
border: 1px solid var(--color-border);
|
||
background: var(--color-surface);
|
||
color: var(--color-muted);
|
||
border-radius: var(--radius);
|
||
cursor: pointer;
|
||
transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
|
||
}
|
||
.betrag-modus-btn:hover { background: var(--color-bg); }
|
||
.betrag-modus-btn.active {
|
||
background: var(--color-primary);
|
||
color: #fff;
|
||
border-color: var(--color-primary);
|
||
box-shadow: inset 0 1px 3px rgba(0,0,0,.3);
|
||
}
|
||
|
||
label {
|
||
display: block;
|
||
font-size: .8rem;
|
||
font-weight: 600;
|
||
margin-bottom: .3rem;
|
||
color: var(--color-muted);
|
||
text-transform: uppercase;
|
||
letter-spacing: .04em;
|
||
}
|
||
|
||
input[type="text"],
|
||
input[type="email"],
|
||
input[type="number"],
|
||
input[type="date"],
|
||
input[type="tel"],
|
||
input[type="url"],
|
||
input[type="password"],
|
||
input[type="search"],
|
||
select,
|
||
textarea {
|
||
width: 100%;
|
||
padding: .5rem .75rem;
|
||
border: 1px solid var(--color-border);
|
||
border-radius: var(--radius);
|
||
font-size: .875rem;
|
||
font-family: var(--font);
|
||
background: var(--color-surface);
|
||
color: var(--color-text);
|
||
transition: border-color .15s, box-shadow .15s;
|
||
}
|
||
|
||
input:focus, select:focus, textarea:focus {
|
||
outline: none;
|
||
border-color: var(--color-primary);
|
||
box-shadow: 0 0 0 3px rgba(37,99,235,.12);
|
||
}
|
||
|
||
.input-error { border-color: var(--color-danger) !important; }
|
||
.error-text { font-size: .8rem; color: var(--color-danger); margin-top: .25rem; }
|
||
|
||
textarea { min-height: 80px; resize: vertical; }
|
||
|
||
.form-grid { display: grid; gap: 1rem; }
|
||
.form-grid-2 { grid-template-columns: 1fr 1fr; }
|
||
.form-grid-3 { grid-template-columns: 1fr 1fr 1fr; }
|
||
.form-grid-4 { grid-template-columns: 1fr 1fr 1fr 1fr; }
|
||
|
||
.form-row {
|
||
display: flex;
|
||
gap: .75rem;
|
||
align-items: flex-end;
|
||
}
|
||
|
||
.form-hint { font-size: .78rem; color: var(--color-muted); margin-top: .2rem; }
|
||
|
||
/* ── Dialoge: Label und Feld in einer Zeile statt zweizeilig ───── */
|
||
.modal-inline-form .form-group {
|
||
display: flex;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
gap: .3rem .75rem;
|
||
}
|
||
.modal-inline-form .form-group > label {
|
||
flex: 0 0 auto;
|
||
max-width: 45%;
|
||
margin-bottom: 0;
|
||
}
|
||
.modal-inline-form .form-group > input,
|
||
.modal-inline-form .form-group > select,
|
||
.modal-inline-form .form-group > textarea {
|
||
flex: 1 1 140px;
|
||
width: auto;
|
||
min-width: 0;
|
||
}
|
||
|
||
/* ── Tables ──────────────────────────────────────────────────── */
|
||
.table-wrap { overflow-x: auto; }
|
||
|
||
table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
font-size: .875rem;
|
||
}
|
||
|
||
thead th {
|
||
background: var(--color-bg);
|
||
padding: .6rem 1rem;
|
||
text-align: left;
|
||
font-size: .75rem;
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: .05em;
|
||
color: var(--color-muted);
|
||
border-bottom: 1px solid var(--color-border);
|
||
white-space: nowrap;
|
||
}
|
||
|
||
tbody tr { border-bottom: 1px solid var(--color-border); }
|
||
tbody tr:last-child { border-bottom: none; }
|
||
tbody tr:hover { background: #f8fafc; }
|
||
|
||
td { padding: .65rem 1rem; vertical-align: middle; }
|
||
|
||
.td-right { text-align: right; }
|
||
.td-mono { font-family: var(--font-mono); font-size: .82rem; }
|
||
.td-muted { color: var(--color-muted); font-size: .82rem; }
|
||
|
||
/* ── Badges ──────────────────────────────────────────────────── */
|
||
.badge {
|
||
display: inline-block;
|
||
padding: .15rem .6rem;
|
||
border-radius: 999px;
|
||
font-size: .72rem;
|
||
font-weight: 600;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.badge-green { background: #dcfce7; color: #166534; }
|
||
.badge-red { background: #fee2e2; color: #991b1b; }
|
||
.badge-yellow { background: #fef9c3; color: #854d0e; }
|
||
.badge-blue { background: #dbeafe; color: #1e40af; }
|
||
.badge-gray { background: #f1f5f9; color: #475569; }
|
||
.badge-purple { background: #ede9fe; color: #6d28d9; }
|
||
.badge-orange { background: #ffedd5; color: #9a3412; }
|
||
|
||
.kuerzel-badge {
|
||
display: inline-block;
|
||
padding: .15rem .6rem;
|
||
border-radius: 999px;
|
||
font-size: .72rem;
|
||
font-weight: 600;
|
||
white-space: nowrap;
|
||
flex-shrink: 0;
|
||
vertical-align: middle;
|
||
}
|
||
|
||
/* ── Toolbar / Filter bar ────────────────────────────────────── */
|
||
.toolbar {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: .75rem;
|
||
align-items: center;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.toolbar-left { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
|
||
.toolbar-right { margin-left: auto; display: flex; gap: .5rem; }
|
||
|
||
/* ── Stats / Dashboard Cards ─────────────────────────────────── */
|
||
.stats-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||
gap: 1rem;
|
||
margin-bottom: 1.5rem;
|
||
}
|
||
|
||
.stat-card {
|
||
background: var(--color-surface);
|
||
border: 1px solid var(--color-border);
|
||
border-radius: var(--radius);
|
||
padding: 1.25rem;
|
||
}
|
||
|
||
.stat-label { font-size: .78rem; color: var(--color-muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: .4rem; }
|
||
.stat-value { font-size: 1.6rem; font-weight: 700; }
|
||
.stat-meta { font-size: .78rem; color: var(--color-muted); margin-top: .25rem; }
|
||
|
||
/* ── Beleg Detail (Split-Pane) ───────────────────────────────── */
|
||
.beleg-layout {
|
||
display: flex;
|
||
align-items: start;
|
||
gap: 0;
|
||
}
|
||
|
||
.beleg-preview {
|
||
flex: 0 0 auto;
|
||
width: var(--beleg-preview-width, calc(100% - 520px - 8px));
|
||
min-width: 200px;
|
||
background: var(--color-surface);
|
||
border: 1px solid var(--color-border);
|
||
border-radius: var(--radius);
|
||
overflow: hidden;
|
||
aspect-ratio: unset;
|
||
}
|
||
|
||
.beleg-preview iframe {
|
||
width: 100%;
|
||
min-height: 1165px;
|
||
border: none;
|
||
display: block;
|
||
}
|
||
|
||
.beleg-preview img {
|
||
width: 100%;
|
||
border: none;
|
||
display: block;
|
||
}
|
||
|
||
.img-zoom-controls {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: .4rem;
|
||
padding: .4rem .75rem;
|
||
border-bottom: 1px solid var(--color-border);
|
||
background: var(--color-surface);
|
||
font-size: .82rem;
|
||
color: var(--color-muted);
|
||
user-select: none;
|
||
}
|
||
|
||
.img-zoom-wrap {
|
||
overflow: auto;
|
||
max-height: calc(100vh - 220px);
|
||
cursor: zoom-in;
|
||
}
|
||
|
||
.beleg-layout-right {
|
||
flex: 1 1 0;
|
||
min-width: 320px;
|
||
margin-left: 1.5rem;
|
||
}
|
||
|
||
.split-handle {
|
||
flex: 0 0 8px;
|
||
width: 8px;
|
||
align-self: stretch;
|
||
cursor: col-resize;
|
||
background: transparent;
|
||
position: relative;
|
||
margin: 0 2px;
|
||
z-index: 10;
|
||
}
|
||
|
||
.split-handle::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
bottom: 0;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
width: 4px;
|
||
background: var(--color-border);
|
||
border-radius: 2px;
|
||
transition: background .15s;
|
||
}
|
||
|
||
.split-handle:hover::before,
|
||
.split-handle.dragging::before {
|
||
background: var(--color-primary, #2563eb);
|
||
width: 4px;
|
||
}
|
||
|
||
/* ── Invoice preview (DIN 5008) ──────────────────────────────── */
|
||
.invoice-preview thead th {
|
||
text-transform: none;
|
||
letter-spacing: normal;
|
||
font-size: inherit;
|
||
font-weight: normal;
|
||
background: revert;
|
||
padding: revert;
|
||
white-space: revert;
|
||
color: inherit;
|
||
border-bottom: none;
|
||
}
|
||
|
||
.invoice-preview {
|
||
display: flex;
|
||
flex-direction: column;
|
||
background: #fff;
|
||
padding: 2cm 2cm 20px;
|
||
max-width: 21cm;
|
||
min-height: 29.7cm;
|
||
margin: 0 auto;
|
||
box-shadow: var(--shadow);
|
||
font-size: 11pt;
|
||
line-height: 1.4;
|
||
color: #000;
|
||
}
|
||
|
||
.invoice-page-body {
|
||
/* natürliche Höhe, kein flex-stretch */
|
||
}
|
||
|
||
.invoice-footer-bar {
|
||
margin-top: auto; /* immer am unteren Rand der A4-Seite */
|
||
}
|
||
|
||
#invoice-pages {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 1cm;
|
||
}
|
||
|
||
.invoice-form-table th,
|
||
.invoice-form-table td { padding-left: 5px; padding-right: 5px; vertical-align: top; }
|
||
.invoice-form-table th:first-child,
|
||
.invoice-form-table td:first-child { padding-left: 1rem; }
|
||
#invoice-pos-table td { vertical-align: top; }
|
||
|
||
.line-bez-input {
|
||
min-height: unset;
|
||
resize: none;
|
||
overflow: hidden;
|
||
line-height: 1.4;
|
||
padding-top: 2px;
|
||
padding-bottom: 2px;
|
||
}
|
||
|
||
.add-line-opt {
|
||
display: block;
|
||
width: 100%;
|
||
padding: .35rem .75rem;
|
||
text-align: left;
|
||
background: transparent;
|
||
border: none;
|
||
cursor: pointer;
|
||
white-space: nowrap;
|
||
}
|
||
.add-line-opt:hover { background: #f0f0f0; }
|
||
|
||
/*
|
||
* Adressbereich: DIN 5008-Proportionen (50% = 85mm bei vollem A4-Preview).
|
||
* Breakpoint: nav (220px) + page-body-padding (45px) + A4-max-width (794px) = 1059px.
|
||
* Darunter stapeln sich die Spalten vertikal.
|
||
*/
|
||
.invoice-address {
|
||
display: grid;
|
||
grid-template-columns: 50% 1fr;
|
||
gap: 1rem;
|
||
}
|
||
|
||
.invoice-address-block { margin-top: 1cm; margin-bottom: 1.5rem; }
|
||
|
||
.invoice-sender-line {
|
||
font-size: 6pt;
|
||
color: #666;
|
||
border-bottom: 1px solid #ccc;
|
||
padding-bottom: 2px;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.invoice-recipient-block { line-height: 1.5; font-size: 10pt; }
|
||
|
||
.invoice-title-block { text-align: right; font-size: 17pt; }
|
||
.invoice-title-ref { font-size: .65rem; margin-top: .3rem; font-weight: normal; }
|
||
|
||
.invoice-logo-wrap { margin-bottom: 1.5rem; }
|
||
.invoice-logo-wrap--left { text-align: left; margin-left: var(--logo-mside); margin-top: var(--logo-mtop); }
|
||
.invoice-logo-wrap--right { text-align: right; margin-right: var(--logo-mside); margin-top: var(--logo-mtop); }
|
||
.invoice-logo-wrap--center { text-align: center; }
|
||
.invoice-logo-wrap img { max-width: var(--logo-maxw); max-height: var(--logo-maxh); }
|
||
|
||
@media (max-width: 1059px) {
|
||
.invoice-address {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
.invoice-address > div:last-child {
|
||
justify-content: flex-start !important;
|
||
border-top: 1px solid #ddd;
|
||
padding-top: 0.75rem;
|
||
font-size: .85rem;
|
||
}
|
||
}
|
||
|
||
/* ── Modals ──────────────────────────────────────────────────── */
|
||
.modal-overlay {
|
||
display: none;
|
||
position: fixed;
|
||
inset: 0;
|
||
background: rgba(0,0,0,.45);
|
||
z-index: 1000;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.modal-overlay.open { display: flex; }
|
||
|
||
/* Modale mit größerem Inhalt (z.B. Buchungsformular): oben ausgerichtet, scrollbar */
|
||
.modal-overlay--scroll { align-items: flex-start; padding: 2rem 1rem; overflow-y: auto; }
|
||
|
||
/* Modale, die über einem anderen Modal liegen (z.B. TAN-Abfrage über Abruf-Log) */
|
||
.modal-overlay--stacked { z-index: 1100; }
|
||
|
||
.modal {
|
||
background: var(--color-surface);
|
||
border-radius: var(--radius);
|
||
box-shadow: var(--shadow);
|
||
max-width: 500px;
|
||
width: 95%;
|
||
padding: 1.5rem;
|
||
}
|
||
|
||
.modal-title { font-size: 1rem; font-weight: 600; margin-bottom: 1rem; }
|
||
.modal-actions { display: flex; gap: .75rem; justify-content: flex-end; margin-top: 1.25rem; }
|
||
|
||
/* Kompakte Dialog-Karte (Bank-Verbindungsdialoge, TAN-Eingabe, Abruf-Log) */
|
||
.modal-card {
|
||
background: var(--color-surface);
|
||
border-radius: var(--radius);
|
||
box-shadow: 0 8px 32px rgba(0,0,0,.15);
|
||
width: 100%;
|
||
max-width: 480px;
|
||
padding: 1.5rem;
|
||
}
|
||
|
||
.modal-card--lg { max-width: 680px; }
|
||
|
||
/* Dialog-Karte mit fester Breite statt max-width (Rechnungs-Modale) */
|
||
.modal-card-invoice {
|
||
background: #fff;
|
||
border-radius: 8px;
|
||
box-shadow: 0 8px 32px rgba(0,0,0,.2);
|
||
}
|
||
.modal-card-invoice--sm { width: 420px; max-width: 95vw; padding: 1.5rem; }
|
||
.modal-card-invoice--lg { width: 100%; max-width: 720px; }
|
||
.modal-form-title { margin: 0 0 1rem; }
|
||
|
||
.modal-section { padding: 1rem 1.25rem; }
|
||
.modal-section-border { border-bottom: 1px solid #e5e7eb; }
|
||
|
||
.modal-card-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 1.25rem;
|
||
}
|
||
|
||
.modal-card h2 { margin: 0; font-size: 1.125rem; }
|
||
|
||
.modal-card-close {
|
||
background: none;
|
||
border: none;
|
||
font-size: 1.25rem;
|
||
cursor: pointer;
|
||
color: var(--color-muted);
|
||
}
|
||
|
||
.modal-card-close--lg { font-size: 1.5rem; color: #6b7280; }
|
||
|
||
/* ── Badges mit Laufzeitfarbe ────────────────────────────────── */
|
||
.badge-color {
|
||
background: var(--badge-bg, var(--color-primary));
|
||
color: var(--badge-fg, #fff);
|
||
}
|
||
|
||
/* ── Häufige Layout-Muster ───────────────────────────────────── */
|
||
.row-between { display: flex; justify-content: space-between; align-items: center; }
|
||
.row-end { display: flex; justify-content: flex-end; gap: .5rem; }
|
||
.row-wrap { display: flex; flex-wrap: wrap; gap: .5rem; }
|
||
.col { display: flex; flex-direction: column; gap: .75rem; }
|
||
.text-danger { color: var(--color-danger); }
|
||
.text-faint { color: #9ca3af; }
|
||
|
||
.icon-btn {
|
||
background: none;
|
||
border: none;
|
||
cursor: pointer;
|
||
color: var(--icon-color, var(--color-muted));
|
||
padding: .2rem;
|
||
line-height: 1;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.badge-lg { font-size: .7rem; padding: .3rem .8rem; }
|
||
|
||
.alert {
|
||
margin-bottom: .75rem;
|
||
padding: .6rem 1rem;
|
||
font-size: .8rem;
|
||
border-left: 3px solid;
|
||
}
|
||
.alert-warning { background: #fff3cd; border-left-color: #f59e0b; }
|
||
.alert-info { background: #e0f2fe; border-left-color: #0284c7; }
|
||
.xml-hinweis-list { margin: .2rem 0 0 1.2rem; }
|
||
|
||
/* ── Rechnungsvorschau: Tabellen (DIN 5008) ─────────────────────── */
|
||
.invoice-meta-table {
|
||
width: 100%;
|
||
table-layout: fixed;
|
||
border-collapse: collapse;
|
||
margin-top: 2cm;
|
||
margin-bottom: 1.5rem;
|
||
font-size: .7rem;
|
||
}
|
||
.invoice-meta-table th,
|
||
.invoice-meta-table td { width: 20%; padding: .4rem .5rem; text-align: left; }
|
||
.invoice-meta-table th { font-weight: bold; }
|
||
.invoice-meta-table th:last-child,
|
||
.invoice-meta-table td:last-child { text-align: right; }
|
||
|
||
#invoice-pos-table {
|
||
width: 100%;
|
||
table-layout: fixed;
|
||
border-collapse: collapse;
|
||
margin-bottom: 1.5rem;
|
||
font-size: .7rem;
|
||
}
|
||
#invoice-pos-table thead tr { background: #f0f0f0; }
|
||
#invoice-pos-table th { padding: .5rem; text-align: left; }
|
||
#invoice-pos-table td { padding: .4rem .5rem; }
|
||
#invoice-pos-table tbody tr { border-bottom: 1px solid #eee; }
|
||
#invoice-pos-table th:nth-child(1) { width: 6%; }
|
||
#invoice-pos-table th:nth-child(3) { width: 11%; text-align: right; }
|
||
#invoice-pos-table th:nth-child(4) { width: 10%; }
|
||
#invoice-pos-table th:nth-child(5) { width: 8%; text-align: right; }
|
||
#invoice-pos-table th:nth-child(6) { width: 15%; text-align: right; }
|
||
#invoice-pos-table th:nth-child(7) { width: 16%; text-align: right; }
|
||
#invoice-pos-table td:nth-child(3),
|
||
#invoice-pos-table td:nth-child(5),
|
||
#invoice-pos-table td:nth-child(6),
|
||
#invoice-pos-table td:nth-child(7) { text-align: right; }
|
||
#invoice-pos-table .row-heading td { font-weight: 700; }
|
||
#invoice-pos-table .col-total { font-weight: 600; }
|
||
|
||
.invoice-summary-table { width: auto; }
|
||
.invoice-summary-table td { padding: .3rem 0; }
|
||
.invoice-summary-table td:last-child { text-align: right; width: 7.5em; }
|
||
.invoice-summary-table .row-total { font-weight: 700; font-size: .82rem; }
|
||
.invoice-summary-table .row-total td { padding: .5rem 0; }
|
||
|
||
.booking-table { width: 100%; font-size: .75rem; border-collapse: collapse; }
|
||
.booking-table thead tr { background: #f0f0f0; }
|
||
.booking-table th { padding: .4rem .5rem; text-align: left; }
|
||
.booking-table td { padding: .35rem .5rem; }
|
||
.booking-table tbody tr { border-bottom: 1px solid #eee; }
|
||
.booking-table tbody tr.is-storno { opacity: .5; background: #fff5f5; }
|
||
.booking-table tfoot tr:first-child { border-top: 2px solid #e5e7eb; }
|
||
.booking-table .text-mono { font-family: var(--font-mono); }
|
||
.booking-table .num-right { text-align: right; }
|
||
.booking-table .cell-sub { font-size: .7rem; }
|
||
.booking-table .cell-storno-tag { font-size: .65rem; }
|
||
.booking-table .cell-empty { padding: 1rem; }
|
||
|
||
.invoice-summary-wrap { display: flex; justify-content: flex-end; margin-bottom: 1.5rem; padding-right: .5rem; }
|
||
.invoice-payment-hint {
|
||
background: #f0f4ff;
|
||
border-left: 3px solid #2563eb;
|
||
padding: .75rem 1rem;
|
||
margin-bottom: 2rem;
|
||
font-size: .7rem;
|
||
}
|
||
|
||
.invoice-footer-grid {
|
||
border-top: 1px solid #ccc;
|
||
padding-top: .75rem;
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr 1fr auto;
|
||
gap: 1rem;
|
||
font-size: .58rem;
|
||
color: #555;
|
||
}
|
||
|
||
.booking-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem .75rem; margin-bottom: .75rem; }
|
||
.booking-form-field { display: flex; align-items: center; gap: .4rem; }
|
||
.booking-form-field label { font-size: .75rem; font-weight: 600; white-space: nowrap; margin: 0; }
|
||
.booking-form-title { font-size: .8rem; font-weight: 600; margin-bottom: .75rem; }
|
||
|
||
.log-console {
|
||
background: #0f172a;
|
||
color: #e2e8f0;
|
||
font-family: var(--font-mono);
|
||
font-size: .8rem;
|
||
padding: 1rem;
|
||
border-radius: var(--radius);
|
||
height: 340px;
|
||
overflow-y: auto;
|
||
white-space: pre-wrap;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
/* ── Pagination ──────────────────────────────────────────────── */
|
||
.pagination {
|
||
display: flex;
|
||
gap: .25rem;
|
||
justify-content: center;
|
||
margin-top: 1.25rem;
|
||
}
|
||
|
||
.pagination a, .pagination span {
|
||
padding: .35rem .7rem;
|
||
border: 1px solid var(--color-border);
|
||
border-radius: var(--radius);
|
||
font-size: .82rem;
|
||
color: var(--color-text);
|
||
}
|
||
|
||
.pagination a:hover { background: var(--color-bg); text-decoration: none; }
|
||
.pagination .active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
|
||
|
||
/* ── Utilities ───────────────────────────────────────────────── */
|
||
.m-0 { margin: 0; }
|
||
.text-muted { color: var(--color-muted); }
|
||
.text-right { text-align: right; }
|
||
.text-center { text-align: center; }
|
||
.text-sm { font-size: .82rem; }
|
||
.text-lg { font-size: 1.1rem; }
|
||
.font-bold { font-weight: 700; }
|
||
.font-mono { font-family: var(--font-mono); }
|
||
.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; }
|
||
.mb-3 { margin-bottom: 1.5rem; }
|
||
.d-flex { display: flex; }
|
||
.gap-1 { gap: .5rem; }
|
||
.gap-2 { gap: 1rem; }
|
||
.align-center { align-items: center; }
|
||
.justify-between { justify-content: space-between; }
|
||
.w-full { width: 100%; }
|
||
.min-w-0 { min-width: 0; }
|
||
.select-filter { width: auto; min-width: 11rem; }
|
||
.autosize-textarea { height: 2.4em; resize: none; overflow: hidden; }
|
||
.beleg-row { cursor: pointer; }
|
||
.beleg-row--static { cursor: default; }
|
||
.row-clickable { cursor: pointer; }
|
||
.btn-round-icon {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: .36rem;
|
||
border-radius: 50%;
|
||
width: 1.8rem;
|
||
height: 1.8rem;
|
||
}
|
||
.bl-supplier-cell { cursor: text; min-width: 80px; }
|
||
.mt-xs { margin-top: .2em; }
|
||
.hidden { display: none; }
|
||
.nowrap { white-space: nowrap; }
|
||
|
||
/* ── Print ───────────────────────────────────────────────────── */
|
||
@media print {
|
||
.sidebar, .topbar, .btn, .toolbar, .pagination { display: none !important; }
|
||
.main-content { grid-column: 1 / -1; }
|
||
.page-body { padding: 0; }
|
||
}
|