.card{
    width: 100%;
    min-height: 1000px;
    background-color: #ffffff;
    border-radius: 3px !important;
    border: none !important;
    box-shadow:
        0 1px 1px rgba(0,0,0,.06),
        0 4px 8px rgba(0,0,0,.08),
        0 16px 32px rgba(0,0,0,.10),
        0 32px 64px rgba(0,0,0,.06) !important;
}

.clickableAppCard{
    background-color: #FFFFFF;
    border: 1px solid rgb(163, 82, 245);
    border-radius:var(--bs-border-radius-sm);
    padding: 3px 4px;
    margin-bottom: 2px;
    cursor: pointer;
}

.clickableAppCard:hover{
    box-shadow: 0 0 0 1px rgba(163, 82, 245, 1), 0 0 15px 0 rgba(163, 82, 245, 0.5);
}

#topRow{
    margin-top:50px;
}

#addressBlock{
    margin-top:70px;
}

#paper{
    padding: 64px 80px 80px 80px;
    color: #000;
    background: #fff;
}

#abrechnungstabelle{
    margin-top: 20px;
}

.nkTable{
    width: 100%;
    border-collapse: separate;
    border-spacing: 4px;
}

.nkTableRow {
    position: relative;
}

.checkIcon, .gripIcon{
    position: absolute;
    top: 0;
    right: calc(100% + 8px);
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    font-size: var(--text-xl);
    line-height: 1;
}

.gripIcon{
    left: calc(100% + 16px);
    height: 100%;
}

.nkTableHead .nkTableCol {
    color: #000;
    font-weight: bold;
    padding: 3px 6px;
}


.nkTable .nkTableBody .nkTableCol {
    background-color: white;
    padding: 3px 6px;
    border: 1px solid transparent;
    border-radius: var(--bs-border-radius-sm);
}

.nkTableRow.clickableAppRow .nkTableCol{
    background-color: #FFFFFF;
    border: 1px solid rgb(163, 82, 245);
    cursor: pointer;
}

.nkTableRow.clickableAppRow:hover .nkTableCol{
    box-shadow: 0 0 0 1px rgba(163, 82, 245, 1), 0 0 15px 0 rgba(163, 82, 245, 0.5);
}




/* Kostenposition-Hinzufügen Buttons */
.nk-add-btn {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #6b21a8;
    background: rgba(163,82,245,.08);
    border: 1px dashed rgba(163,82,245,.35);
    transition: background .15s, border-color .15s, color .15s;
}

.nk-add-btn:hover {
    background: rgba(163,82,245,.15);
    border-color: rgba(163,82,245,.6);
    color: #7c3aed;
}

.nk-add-btn-primary {
    color: #7c3aed;
    background: rgba(163,82,245,.12);
    border: 1px solid rgba(163,82,245,.45);
}

.nk-add-btn-primary:hover {
    background: rgba(163,82,245,.22);
    border-color: #a352f5;
}

/* =====================================================
   DOCUMENT FIELD REDESIGN
   ===================================================== */

/* Base field – transparent by default, barely-there border */
.clickableAppCard {
    background-color: transparent !important;
    border: 1px dashed rgba(163,82,245,.2) !important;
    border-radius: 4px !important;
    padding: 5px 8px !important;
    margin-bottom: 3px;
    cursor: pointer;
    transition: background .15s, border-color .15s;
    position: relative;
}

.clickableAppCard:hover {
    background-color: rgba(163,82,245,.05) !important;
    border-color: rgba(163,82,245,.55) !important;
    box-shadow: none !important;
}

/* Filled/checked fields get a subtle green tint */
.clickableAppCard.done,
.done > .clickableAppCard {
    border-color: rgba(34,197,94,.25) !important;
    background-color: rgba(34,197,94,.02) !important;
}

/* Status icons – smaller, less alarming */
.checkIcon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: calc(100% + 6px);
    display: flex;
    align-items: center;
    font-size: 1rem;
    line-height: 1;
    opacity: .7;
    transition: opacity .15s;
}

.clickableAppCard:hover .checkIcon {
    opacity: 1;
}

/* Purple arrow – "needs input" indicator */
.checkIcon .ti-circle-arrow-right {
    color: #dc2626 !important;
    font-size: .95rem;
}

/* Green check */
.checkIcon .ti-circle-check {
    color: #15803d !important;
    font-size: .95rem;
}

/* Document heading */
#headRow h4 {
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -.01em;
    margin-bottom: 8px;
    color: #000;
}

/* Summary rows */
#summaryRows {
    border-top: 1.5px solid #000 !important;
    padding-top: 10px !important;
    gap: 0 !important;
    margin-top: 2rem !important;
}

#summaryRows > .d-flex.fw-bolder:first-child {
    font-size: 1rem;
    padding: 4px 4px 8px;
    border-bottom: 1px solid rgba(0,0,0,.08);
    margin-bottom: 4px;
}

#summaryRows > .clickableAppCard {
    margin-bottom: 0 !important;
}

/* Final total row (Nachzahlung / Guthaben) */
#summaryRows > .d-flex.fw-bolder:last-of-type {
    font-size: 1rem;
    border-top: 1.5px solid #000;
    margin-top: 8px;
    padding: 8px 4px 2px;
}

/* Distribution key table – cleaner rows */
.clickableAppCard .table td {
    font-size: .8125rem;
    color: #111;
}

/* Payment advice text */
.text-body.clickableAppCard {
    font-style: italic;
    color: #374151 !important;
    font-size: .875rem;
}

/* Accounting period label */
.clickableAppCard .text-xs {
    font-size: .8125rem;
    color: #374151;
}

/* Bank connection block */
#bankConnectionBlock .clickableAppCard .fw-bolder {
    font-size: .8125rem;
    color: #111;
}

#bankConnectionBlock .clickableAppCard .fw-normal {
    font-size: .8125rem;
    color: #374151;
}