/* =========================================================================
   Vertragswesen – App-Stylesheet (theme-frei, eigenständig)
   Refined / utilitarian: ruhig, professionell, vertrauenswürdig.
   Bewusst native Schrift-Stack (Constraint: keine externen Dienste).
   ========================================================================= */

:root {
    --vp-bg:        #f4f5f7;
    --vp-surface:   #ffffff;
    --vp-ink:       #1f2733;
    --vp-ink-soft:  #475467;
    --vp-muted:     #7a8699;
    --vp-border:    #e3e7ee;
    --vp-border-2:  #d4dae4;
    --vp-primary:   #1e3a5f;   /* tiefes Schiefer-Blau */
    --vp-primary-2: #2c5282;
    --vp-accent:    #b7791f;   /* gedämpftes Bernstein */
    --vp-ok:        #1a7f37;
    --vp-ok-bg:     #e7f4ec;
    --vp-err:       #b32d2e;
    --vp-err-bg:    #fbeaea;
    --vp-warn:      #92600a;
    --vp-warn-bg:   #fdf4e3;
    --vp-info-bg:   #eaf0f7;
    --vp-radius:    10px;
    --vp-radius-sm: 7px;
    --vp-shadow:    0 1px 2px rgba(16,24,40,.06), 0 8px 24px rgba(16,24,40,.06);
    --vp-shadow-sm: 0 1px 2px rgba(16,24,40,.08);
    --vp-font:      -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --vp-sidebar-w: 248px;
}

* { box-sizing: border-box; }

html, body.vp-app {
    margin: 0;
    padding: 0;
    background: var(--vp-bg);
    color: var(--vp-ink);
    font-family: var(--vp-font);
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

.vp-root { min-height: 100vh; }

a { color: var(--vp-primary-2); text-decoration: none; }
a:hover { text-decoration: underline; }

code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    background: #eef1f5;
    border: 1px solid var(--vp-border);
    border-radius: 5px;
    padding: 1px 6px;
    font-size: .88em;
}

/* ---- Buttons ---------------------------------------------------------- */
.vp-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px;
    border-radius: var(--vp-radius-sm);
    border: 1px solid var(--vp-border-2);
    background: var(--vp-surface);
    color: var(--vp-ink);
    font: inherit;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: background .15s, border-color .15s, box-shadow .15s, transform .05s;
    text-decoration: none;
    line-height: 1.1;
}
.vp-btn:hover { border-color: var(--vp-muted); text-decoration: none; }
.vp-btn:active { transform: translateY(1px); }
.vp-btn .dashicons { font-size: 17px; width: 17px; height: 17px; }

.vp-btn--primary {
    background: var(--vp-primary);
    border-color: var(--vp-primary);
    color: #fff;
    box-shadow: var(--vp-shadow-sm);
}
.vp-btn--primary:hover { background: var(--vp-primary-2); border-color: var(--vp-primary-2); }
.vp-btn--ghost { background: transparent; border-color: transparent; color: var(--vp-ink-soft); }
.vp-btn--ghost:hover { background: rgba(30,58,95,.06); border-color: transparent; }
.vp-btn--block { width: 100%; justify-content: center; padding: 11px 16px; }

/* ---- Login / Setup ---------------------------------------------------- */
.vp-auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background:
        radial-gradient(1100px 520px at 88% -8%, rgba(44,82,130,.10), transparent 60%),
        radial-gradient(900px 480px at 6% 108%, rgba(183,121,31,.08), transparent 55%),
        var(--vp-bg);
}
.vp-auth-card {
    width: 100%;
    max-width: 392px;
    background: var(--vp-surface);
    border: 1px solid var(--vp-border);
    border-radius: var(--vp-radius);
    box-shadow: var(--vp-shadow);
    padding: 32px 30px 30px;
}
.vp-auth-card--wide { max-width: 600px; }

.vp-auth-brand { text-align: center; margin-bottom: 18px; }
.vp-auth-brand__logo {
    width: 60px; height: 60px;
    margin: 0 auto 12px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid var(--vp-border);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.vp-auth-brand__logo img { width: 100%; height: 100%; object-fit: contain; }
.vp-auth-brand h1 { margin: 0; font-size: 21px; letter-spacing: -.01em; }
.vp-auth-brand p { margin: 4px 0 0; color: var(--vp-muted); font-size: 13px; }

/* ---- Forms ------------------------------------------------------------ */
.vp-form label { display: block; margin-bottom: 14px; }
.vp-form label > span { display: block; font-size: 13px; font-weight: 600; color: var(--vp-ink-soft); margin-bottom: 6px; }
.vp-form input[type=text],
.vp-form input[type=email],
.vp-form input[type=password],
.vp-form input[type=number],
.vp-form select,
.vp-form textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--vp-border-2);
    border-radius: var(--vp-radius-sm);
    font: inherit;
    font-size: 15px;
    background: #fff;
    color: var(--vp-ink);
    transition: border-color .15s, box-shadow .15s;
}
.vp-form input:focus,
.vp-form select:focus,
.vp-form textarea:focus {
    outline: none;
    border-color: var(--vp-primary-2);
    box-shadow: 0 0 0 3px rgba(44,82,130,.14);
}
.vp-auth-form { margin-top: 4px; }
.vp-auth-form .vp-btn--block { margin-top: 6px; }

/* ---- Layout ----------------------------------------------------------- */
.vp-layout { display: flex; min-height: 100vh; }

.vp-sidebar {
    width: var(--vp-sidebar-w);
    flex: 0 0 var(--vp-sidebar-w);
    background: var(--vp-primary);
    color: #cdd7e4;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
}
.vp-sidebar__brand {
    display: flex; align-items: center; gap: 11px;
    padding: 18px 18px 16px;
    border-bottom: 1px solid rgba(255,255,255,.10);
}
.vp-sidebar__logo {
    width: 38px; height: 38px; border-radius: 9px;
    background: #fff; overflow: hidden; flex: 0 0 38px;
    display: flex; align-items: center; justify-content: center;
}
.vp-sidebar__logo img { width: 100%; height: 100%; object-fit: contain; }
.vp-sidebar__product { display: flex; flex-direction: column; line-height: 1.25; }
.vp-sidebar__product strong { color: #fff; font-size: 15px; }
.vp-sidebar__product span { font-size: 11.5px; color: #9fb0c6; }

.vp-sidebar__nav { padding: 12px 10px; display: flex; flex-direction: column; gap: 2px; flex: 1; overflow-y: auto; }
.vp-nav-item {
    display: flex; align-items: center; gap: 11px;
    padding: 10px 12px;
    border-radius: 8px;
    color: #c4d0df;
    font-weight: 600; font-size: 14px;
    transition: background .14s, color .14s;
}
.vp-nav-item:hover { background: rgba(255,255,255,.08); color: #fff; text-decoration: none; }
.vp-nav-item.is-active { background: rgba(255,255,255,.14); color: #fff; box-shadow: inset 3px 0 0 var(--vp-accent); }
.vp-nav-item .dashicons { font-size: 19px; width: 19px; height: 19px; }
.vp-sidebar__footer { padding: 12px 18px; border-top: 1px solid rgba(255,255,255,.10); color: #8497ae; font-size: 11px; }
.vp-sidebar__ds { display: block; margin-top: 8px; line-height: 1.45; opacity: .85; }
.vp-sidebar__ds a { color: #aec7e6; text-decoration: none; font-weight: 600; }
.vp-sidebar__ds a:hover { text-decoration: underline; }

.vp-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.vp-topbar {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 0 26px;
    height: 62px;
    background: var(--vp-surface);
    border-bottom: 1px solid var(--vp-border);
    position: sticky; top: 0; z-index: 5;
}
.vp-topbar__title { font-weight: 700; color: var(--vp-ink); letter-spacing: -.01em; }
.vp-topbar__user { display: flex; align-items: center; gap: 12px; }
.vp-user-chip {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 12px; border: 1px solid var(--vp-border); border-radius: 999px; background: #fbfcfe;
}
.vp-user-chip .dashicons { color: var(--vp-muted); font-size: 18px; width: 18px; height: 18px; }
.vp-user-chip small { color: var(--vp-muted); font-size: 12px; }
.vp-logout-form { margin: 0; }

.vp-content { padding: 26px; max-width: 1180px; width: 100%; }

/* ---- Cards / Grid ----------------------------------------------------- */
.vp-page-head { margin-bottom: 20px; }
.vp-page-head h1 { margin: 0 0 4px; font-size: 23px; letter-spacing: -.015em; }
.vp-muted { color: var(--vp-muted); margin: 0; }

.vp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }

.vp-card {
    background: var(--vp-surface);
    border: 1px solid var(--vp-border);
    border-radius: var(--vp-radius);
    box-shadow: var(--vp-shadow-sm);
    padding: 20px 22px;
}
.vp-card h3 { margin: 0 0 12px; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.vp-card h3 .dashicons { color: var(--vp-accent); font-size: 18px; width: 18px; height: 18px; }

/* ---- Checklist -------------------------------------------------------- */
.vp-checklist { list-style: none; margin: 0; padding: 0; }
.vp-checklist li { position: relative; padding: 6px 0 6px 26px; font-size: 14px; }
.vp-checklist li::before { position: absolute; left: 0; top: 6px; font-family: dashicons; font-size: 17px; }
.vp-checklist li.is-ok { color: var(--vp-ink); }
.vp-checklist li.is-ok::before { content: "\f147"; color: var(--vp-ok); }
.vp-checklist li.is-bad { color: var(--vp-err); }
.vp-checklist li.is-bad::before { content: "\f158"; color: var(--vp-err); }

/* ---- Badges / Chips --------------------------------------------------- */
.vp-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 4px; }
.vp-badge {
    display: inline-flex; align-items: center;
    padding: 3px 10px; border-radius: 999px;
    font-size: 12px; font-weight: 600;
    background: #eef1f5; color: var(--vp-ink-soft); border: 1px solid var(--vp-border);
}
.vp-badge--neutral { background: #eef1f5; }
.vp-badge--ok      { background: var(--vp-ok-bg);  color: var(--vp-ok);   border-color: #c5e6d0; }
.vp-badge--warn    { background: var(--vp-warn-bg); color: var(--vp-warn); border-color: #f0dcb0; }
.vp-badge--error   { background: var(--vp-err-bg); color: var(--vp-err);  border-color: #f0c4c4; }

/* ---- Flash / Notice --------------------------------------------------- */
.vp-flash {
    border-radius: var(--vp-radius-sm);
    padding: 11px 15px;
    margin-bottom: 16px;
    font-size: 14px;
    border: 1px solid transparent;
}
.vp-flash--success { background: var(--vp-ok-bg);  color: #14622b; border-color: #c5e6d0; }
.vp-flash--error   { background: var(--vp-err-bg); color: #8a2322; border-color: #f0c4c4; }
.vp-flash--info    { background: var(--vp-info-bg); color: #234e7d; border-color: #cddcef; }
.vp-flash--warn    { background: var(--vp-warn-bg); color: var(--vp-warn); border-color: #f0dcb0; }

.vp-notice { text-align: left; border-radius: var(--vp-radius-sm); padding: 14px 16px; font-size: 14px; }
.vp-notice--warn { background: var(--vp-warn-bg); border: 1px solid #f0dcb0; color: #5c3d06; }
.vp-notice p { margin: 0 0 8px; }
.vp-notice p:last-child { margin-bottom: 0; }

/* ---- Responsive ------------------------------------------------------- */
@media (max-width: 880px) {
    .vp-layout { flex-direction: column; }
    .vp-sidebar { width: 100%; flex: none; height: auto; position: static; }
    .vp-sidebar__nav { flex-direction: row; flex-wrap: wrap; overflow: visible; }
    .vp-nav-item.is-active { box-shadow: inset 0 -3px 0 var(--vp-accent); }
    .vp-content { padding: 18px; }
}

/* =========================================================================
   Erweiterungen ab v1.2.0 – Navigations-Gruppen, Dashboard, Platzhalter
   ========================================================================= */

/* Sidebar-Gruppenüberschrift */
.vp-nav-group {
    padding: 14px 12px 5px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #8497ae;
}
.vp-nav-group:first-child { padding-top: 6px; }

/* Kennzahl-Kacheln (Dashboard) */
.vp-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.vp-kpi {
    display: flex; align-items: center; gap: 14px;
    background: var(--vp-surface);
    border: 1px solid var(--vp-border);
    border-radius: var(--vp-radius);
    box-shadow: var(--vp-shadow-sm);
    padding: 16px 18px;
}
.vp-kpi .dashicons {
    font-size: 22px; width: 42px; height: 42px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 10px;
    background: rgba(30,58,95,.08);
    color: var(--vp-primary);
    flex: 0 0 42px;
}
.vp-kpi__val { font-size: 22px; font-weight: 700; line-height: 1.1; letter-spacing: -.01em; }
.vp-kpi__lbl { font-size: 12.5px; color: var(--vp-muted); margin-top: 2px; }

/* Schnellzugriff */
.vp-quick { display: flex; flex-wrap: wrap; gap: 8px; }

/* Platzhalter-Seiten */
.vp-page-head__row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.vp-page-head__row h1 { margin: 0; display: flex; align-items: center; gap: 9px; }
.vp-page-head__row h1 .dashicons { color: var(--vp-accent); font-size: 24px; width: 24px; height: 24px; }

.vp-empty-preview { text-align: center; padding: 26px 12px; color: var(--vp-muted); }
.vp-empty-preview .dashicons { font-size: 40px; width: 40px; height: 40px; opacity: .35; margin-bottom: 8px; }
.vp-empty-preview p { margin: 0; font-size: 13.5px; }

.vp-notice--info { background: var(--vp-info-bg); border: 1px solid #cddcef; color: #234e7d; border-radius: var(--vp-radius-sm); padding: 13px 15px; }
.vp-notice--info p { margin: 0; font-size: 13.5px; }

/* Gruppen-Header in der mobilen Zeilen-Navigation umbrechen */
@media (max-width: 880px) {
    .vp-nav-group { flex-basis: 100%; width: 100%; padding: 8px 12px 2px; }
}

/* =========================================================================
   Erweiterungen ab v1.3.0 – Tabellen, Toolbar, Formulare, Datei-Upload
   ========================================================================= */

.vp-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.vp-table th {
    text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .04em;
    color: var(--vp-muted); font-weight: 700; padding: 8px 12px; border-bottom: 1px solid var(--vp-border);
}
.vp-table td { padding: 11px 12px; border-bottom: 1px solid var(--vp-border); vertical-align: middle; }
.vp-table tr:last-child td { border-bottom: none; }
.vp-table tbody tr:hover { background: #fafbfd; }
.vp-table .dashicons { color: var(--vp-muted); vertical-align: middle; }
.vp-row-actions { text-align: right; white-space: nowrap; }
.vp-row-actions form { margin: 0; }

.vp-toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.vp-search {
    flex: 1; min-width: 220px;
    padding: 9px 12px; border: 1px solid var(--vp-border-2); border-radius: var(--vp-radius-sm);
    font: inherit; font-size: 14px; background: #fff;
}
.vp-search:focus { outline: none; border-color: var(--vp-primary-2); box-shadow: 0 0 0 3px rgba(44,82,130,.14); }

.vp-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
@media (max-width: 640px) { .vp-form-grid { grid-template-columns: 1fr; } }
.vp-form textarea {
    width: 100%; padding: 10px 12px; border: 1px solid var(--vp-border-2);
    border-radius: var(--vp-radius-sm); font: inherit; font-size: 15px; resize: vertical;
}
.vp-form textarea:focus { outline: none; border-color: var(--vp-primary-2); box-shadow: 0 0 0 3px rgba(44,82,130,.14); }
.vp-form-actions { margin-top: 8px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

.vp-danger-zone {
    margin: 14px 0 0; padding-top: 14px; border-top: 1px dashed var(--vp-border-2);
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: space-between;
}

.vp-btn--icon { padding: 8px; }
.vp-btn--icon .dashicons { margin: 0; }
.vp-btn--danger { color: var(--vp-err); }
.vp-btn--danger:hover { background: var(--vp-err-bg); border-color: #f0c4c4; }

.vp-upload {
    display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
    padding: 14px; margin-top: 4px;
    border: 1px dashed var(--vp-border-2); border-radius: var(--vp-radius-sm); background: #fbfcfe;
}
.vp-upload input[type=file] { font: inherit; font-size: 14px; }

/* =========================================================================
   Erweiterungen ab v1.4.0 – Vorlagen-/Vertrags-Editor (Repeater, Feldwerte)
   ========================================================================= */

.vp-form select {
    width: 100%; padding: 10px 12px; border: 1px solid var(--vp-border-2);
    border-radius: var(--vp-radius-sm); font: inherit; font-size: 15px; background: #fff;
}
.vp-form select:focus { outline: none; border-color: var(--vp-primary-2); box-shadow: 0 0 0 3px rgba(44,82,130,.14); }
.vp-toolbar select { padding: 9px 12px; border: 1px solid var(--vp-border-2); border-radius: var(--vp-radius-sm); font: inherit; font-size: 14px; background: #fff; }

.vp-repeater { margin: 8px 0 16px; padding: 14px; border: 1px solid var(--vp-border); border-radius: var(--vp-radius-sm); background: #fbfcfe; }
.vp-repeater__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.vp-repeater__head strong { font-size: 13px; }
.vp-repeater__item { display: flex; flex-direction: column; gap: 8px; padding: 12px; margin-bottom: 10px; background: #fff; border: 1px solid var(--vp-border); border-radius: var(--vp-radius-sm); position: relative; }
.vp-repeater__item input[type=text], .vp-repeater__item textarea {
    width: 100%; padding: 9px 11px; border: 1px solid var(--vp-border-2); border-radius: 6px; font: inherit; font-size: 14px; resize: vertical;
}
.vp-repeater__item input:focus, .vp-repeater__item textarea:focus { outline: none; border-color: var(--vp-primary-2); box-shadow: 0 0 0 3px rgba(44,82,130,.14); }
.vp-repeater__item--inline { flex-direction: row; align-items: center; gap: 10px; }
.vp-repeater__item--inline input[type=text] { flex: 1; }
.vp-repeater__item [data-repeater-remove] { align-self: flex-end; }
.vp-repeater__item--inline [data-repeater-remove] { align-self: center; }

.vp-fieldvalues { margin: 6px 0 16px; padding: 14px; border: 1px solid var(--vp-border); border-radius: var(--vp-radius-sm); background: #fbfcfe; }
.vp-fieldvalue { display: block; margin-bottom: 12px; }
.vp-fieldvalue > span { display: block; font-size: 13px; font-weight: 600; color: var(--vp-ink-soft); margin-bottom: 6px; }
.vp-fieldvalue code { font-weight: 400; }
.vp-fieldvalue input[type=text] {
    width: 100%; padding: 10px 12px; border: 1px solid var(--vp-border-2); border-radius: var(--vp-radius-sm); font: inherit; font-size: 15px;
}
.vp-fieldvalue input:focus { outline: none; border-color: var(--vp-primary-2); box-shadow: 0 0 0 3px rgba(44,82,130,.14); }

/* Signatur (Link/QR/Empfang) ab v1.5.0 */
.vp-sign-share { display:flex; gap:24px; align-items:flex-start; flex-wrap:wrap; margin-top:8px; }
.vp-sign-share__main { flex:1; min-width:260px; }
.vp-sign-share__main input[readonly] { width:100%; padding:10px 12px; border:1px solid var(--vp-border-2); border-radius:var(--vp-radius-sm); font:inherit; font-size:13px; background:#f8fafc; color:var(--vp-ink-soft); }
.vp-sign-share__qr { text-align:center; }
.vp-sign-share__qr svg { width:132px; height:132px; border:1px solid var(--vp-border); border-radius:8px; padding:6px; background:#fff; }
.vp-sign-share__qr span { display:block; font-size:12px; color:var(--vp-muted); margin-top:4px; }
.vp-sign-receipt { display:flex; gap:24px; align-items:center; flex-wrap:wrap; margin:6px 0 10px; }
.vp-sign-receipt__img { border:1px solid var(--vp-border); border-radius:8px; padding:6px; background:#fff; }
.vp-sign-receipt__img img { max-height:90px; max-width:240px; display:block; }
.vp-sign-receipt dl { display:grid; grid-template-columns:auto 1fr; gap:4px 16px; margin:0; font-size:14px; }
.vp-sign-receipt dt { color:var(--vp-muted); }
.vp-sign-receipt dd { margin:0; font-weight:600; }
.vp-sign-receipt code { font-weight:400; word-break:break-all; }

/* Angebotspositionen ab v1.6.0 */
.vp-num, td.vp-num, th.vp-num { text-align:right; white-space:nowrap; }
.vp-item { padding:12px; margin-bottom:10px; background:#fff; border:1px solid var(--vp-border); border-radius:var(--vp-radius-sm); }
.vp-item__desc { width:100%; padding:9px 11px; border:1px solid var(--vp-border-2); border-radius:6px; font:inherit; font-size:14px; resize:vertical; margin-bottom:8px; }
.vp-item__nums { display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap; }
.vp-item__nums label { display:flex; flex-direction:column; gap:3px; }
.vp-item__nums label span { font-size:11px; color:var(--vp-muted); }
.vp-item__nums input { padding:8px 10px; border:1px solid var(--vp-border-2); border-radius:6px; font:inherit; font-size:14px; }
.vp-item__qty, .vp-item__tax { width:74px; text-align:right; }
.vp-item__unit { width:74px; }
.vp-item__price { width:120px; text-align:right; }
.vp-item__sum { margin-left:auto; font-weight:700; white-space:nowrap; align-self:center; }
.vp-item__nums select { padding:8px 10px; border:1px solid var(--vp-border-2); border-radius:6px; font:inherit; font-size:14px; }
.vp-item__wk { width:108px; }
.vp-item__cost { width:104px; text-align:right; }
.vp-item__sub { width:140px; }
.vp-filterbar { display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap; }
.vp-filterbar label { display:flex; flex-direction:column; gap:3px; }
.vp-filterbar input { padding:8px 10px; border:1px solid var(--vp-border-2); border-radius:6px; font:inherit; }
.vp-note p { margin:0; }
.vp-item__anfrage { align-items:center; }
.vp-item__anfrage input { transform:scale(1.1); margin-top:4px; }
.vp-catalog-pick { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:0 0 12px; padding:10px 12px; background:var(--vp-surface-2,#f7f8fa); border:1px dashed var(--vp-border-2); border-radius:8px; }
.vp-catalog-pick select { flex:1 1 280px; padding:8px 10px; border:1px solid var(--vp-border-2); border-radius:6px; font:inherit; font-size:14px; }
.vp-catalog-hint { flex-basis:100%; font-size:12px; }
.vp-items__foot { text-align:right; margin-top:6px; font-size:15px; }
.vp-items__foot span { margin-left:4px; }
@media (max-width:640px){ .vp-item__nums { gap:8px } .vp-item__sum { margin-left:0; width:100% } }

/* Phase 7: Berichte-Spalten, Fristen, Dashboard-Fälligkeiten */
.vp-cols { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; margin-top:16px; }
.vp-row-overdue td { background:#fef2f2; }
.vp-due-list { list-style:none; margin:0 0 12px; padding:0; }
.vp-due-list li { display:flex; align-items:center; gap:10px; padding:6px 0; border-bottom:1px solid var(--vp-border); }
.vp-due-list li:last-child { border-bottom:none; }
.vp-due-list a { text-decoration:none; font-weight:600; }

/* Phase 10: erweiterte Felder im Vorlagen-Editor */
.vp-field-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;width:100%}
.vp-field-row>input[type=text]{flex:1 1 180px;min-width:140px}
.vp-input-small{flex:0 1 160px;min-width:120px}

/* Onboarding-Assistent */
.vp-steps { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.vp-steps__item { display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; background:var(--vp-surface-2,#f1f3f5); color:var(--vp-muted); font-size:12px; }
.vp-steps__item b { display:inline-grid; place-items:center; width:18px; height:18px; border-radius:50%; background:#cbd2d9; color:#fff; font-size:11px; }
.vp-steps__item--active { background:var(--vp-primary,#2563eb); color:#fff; }
.vp-steps__item--active b { background:#fff; color:var(--vp-primary,#2563eb); }
.vp-steps__item--done { background:#e6f4ea; color:#1e7e34; }
.vp-steps__item--done b { background:#34a853; }
.vp-pkg-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:12px; margin:6px 0 4px; }
.vp-pkg { display:flex; gap:10px; align-items:flex-start; padding:12px; border:1px solid var(--vp-border-2,#dde1e6); border-radius:10px; cursor:pointer; transition:border-color .15s; }
.vp-pkg:hover { border-color:var(--vp-primary,#2563eb); }
.vp-pkg input { margin-top:3px; }
.vp-pkg__body { display:flex; flex-direction:column; gap:3px; }
.vp-pkg__body small { color:var(--vp-muted); }
.vp-pkg__body em { color:var(--vp-muted); font-size:12px; font-style:normal; }

/* Bedingungsfeld im Abschnitts-Repeater (ist KEIN Inhaltsfeld) */
.vp-repeater__item .vp-cond { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:0; }
.vp-cond__lbl { font-size:12px; color:var(--vp-muted); white-space:nowrap; }
.vp-repeater__item input[type=text].vp-cond__in { width:auto; flex:1 1 260px; min-width:160px; font-size:13px; padding:6px 9px; background:#fbfcfe; color:var(--vp-muted); }
.vp-repeater__item input[type=text].vp-cond__in:focus { color:inherit; }

/* Massen-Aktionen (Listen) */
.vp-bulkbar { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:10px; }
.vp-bulkbar__all { display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--vp-muted); }
.vp-col-check { width:34px; text-align:center; }
.vp-col-check input { margin:0; }

/* Bibliothek: Aktionsbuttons (Einspielen / Aktualisieren) */
.vp-lib-actions { display:flex; gap:8px; flex-wrap:wrap; align-items:flex-start; }

/* Live-Suche in Listen (z. B. Vertragsvorlagen) */
.vp-list-search { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; padding: 8px 12px; border: 1px solid var(--vp-line, #dce0e6); border-radius: 9px; background: #fff; }
.vp-list-search .dashicons { color: #8a93a2; }
.vp-list-search input[type="search"] { flex: 1; border: 0; outline: none; font: inherit; background: transparent; padding: 2px 0; }
.vp-list-search__count { font-size: 12px; color: #8a93a2; white-space: nowrap; }

/* Signatur-Detail: Nachweistabelle + Unterschriftenbox */
.vp-kv { width: 100%; border-collapse: collapse; margin: 4px 0 2px; }
.vp-kv th { text-align: left; width: 32%; vertical-align: top; padding: 6px 10px; color: #6b7686; font-weight: 600; border-bottom: 1px solid #eef1f5; }
.vp-kv td { vertical-align: top; padding: 6px 10px; border-bottom: 1px solid #eef1f5; }
.vp-sig-box { margin-top: 12px; padding: 10px; border: 1px solid var(--vp-line, #dce0e6); border-radius: 8px; background: #fff; max-width: 420px; }
.vp-sig-box svg { display: block; width: 100%; height: auto; max-height: 160px; }