/* --- TABLO WRAP --- */
.movement-table-wrap {
    max-height: 420px;
    overflow: auto;
    border: 1px solid #edf0f3;
    border-radius: 16px;
    background: #fff;
}

/* --- TABLO --- */
.movement-table {
    margin-bottom: 0;
    font-size: 13px;
}

    .movement-table thead th {
        position: sticky;
        top: 0;
        z-index: 2;
        background: #f8fafc;
        color: #475569;
        font-size: 12px;
        font-weight: 800;
        padding: 10px 12px;
        border-bottom: 1px solid #e5e7eb;
    }

    .movement-table td {
        padding: 9px 12px;
        border-bottom: 1px solid #edf0f3;
    }

/* --- SATIR --- */
.movement-row:hover {
    background: #f8fbff;
}

/* --- TARİH --- */
.date-cell span {
    display: inline-block;
    background: #f1f5f9;
    color: #334155;
    border-radius: 999px;
    padding: 4px 8px;
    font-size: 12px;
    font-weight: 700;
}

/* --- CARİ --- */
.cari-name {
    font-weight: 700;
    color: #111827;
    max-width: 420px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cari-code {
    font-size: 11px;
    color: #64748b;
    margin-top: 2px;
}

/* --- İŞLEM TİPİ --- */
.type-pill {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    background: #eef2ff;
    color: #4338ca;
    padding: 4px 9px;
    font-size: 11px;
    font-weight: 800;
}

/* --- AÇIKLAMA --- */
.desc-text {
    color: #374151;
    max-width: 300px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.doc-no {
    font-size: 11px;
    color: #94a3b8;
    margin-top: 2px;
}

/* --- TUTAR --- */
.amount-debit {
    color: #dc3545;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.amount-credit {
    color: #198754;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

/* --- TABLAR --- */
.movement-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.movement-tab {
    border: 1px solid #e5e7eb;
    background: #fff;
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 700;
    color: #374151;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: .2s ease;
}

    .movement-tab:hover {
        background: #f8fafc;
    }

    .movement-tab.active {
        background: #0d6efd;
        color: #fff;
        border-color: #0d6efd;
    }

    .movement-tab span {
        background: rgba(0,0,0,.08);
        padding: 2px 7px;
        border-radius: 999px;
        font-size: 11px;
    }

    .movement-tab.active span {
        background: rgba(255,255,255,.22);
    }

/* --- İŞLEM TİPİ TOPLAM KARTLARI --- */
.movement-total-card {
    background: #fff;
    border: 1px solid #edf0f3;
    border-radius: 14px;
    padding: 12px;
    box-shadow: 0 6px 18px rgba(0,0,0,.04);
}

.movement-total-title {
    font-size: 12px;
    font-weight: 800;
    color: #334155;
    margin-bottom: 8px;
}

.movement-total-line {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    padding: 4px 0;
    border-bottom: 1px dashed #e5e7eb;
}

    .movement-total-line span {
        color: #64748b;
    }

    .movement-total-line strong {
        font-variant-numeric: tabular-nums;
    }

    .movement-total-line:last-child {
        border-bottom: none;
    }


.test-css-ok {
    color: red;
}


.movement-row {
    cursor: pointer;
}

.movement-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .55);
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.movement-modal {
    width: min(760px, 100%);
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 24px 70px rgba(0,0,0,.28);
    overflow: hidden;
}

.movement-modal-header {
    padding: 18px 22px;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f8fafc;
}

.movement-modal-body {
    padding: 22px;
}

.movement-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.movement-detail-card {
    border: 1px solid #edf0f3;
    background: #fff;
    border-radius: 14px;
    padding: 12px;
}

.detail-label {
    font-size: 12px;
    color: #64748b;
    font-weight: 700;
    margin-bottom: 4px;
}

.detail-value {
    font-size: 14px;
    color: #111827;
    font-weight: 700;
}

.movement-amount-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.movement-amount-box {
    border-radius: 14px;
    padding: 14px;
    border: 1px solid #edf0f3;
}

    .movement-amount-box div {
        font-size: 12px;
        font-weight: 700;
        color: #64748b;
    }

    .movement-amount-box strong {
        font-size: 18px;
        font-variant-numeric: tabular-nums;
    }

    .movement-amount-box.debit {
        background: #fff1f1;
        color: #dc3545;
    }

    .movement-amount-box.credit {
        background: #eefaf3;
        color: #198754;
    }

    .movement-amount-box.net {
        background: #f1f5f9;
        color: #111827;
    }

.movement-description {
    border: 1px solid #edf0f3;
    background: #f8fafc;
    border-radius: 14px;
    padding: 14px;
}

@media (max-width: 768px) {
    .movement-detail-grid,
    .movement-amount-row {
        grid-template-columns: 1fr;
    }
}



.movement-tabs-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.movement-summary {
    display: flex;
    gap: 16px;
    align-items: center;
}

.movement-summary {
    display: flex;
    gap: 10px;
    align-items: center;
}

.summary-box {
    min-width: 110px;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid #edf0f3;
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.summary-title {
    font-size: 10px;
    font-weight: 700;
    color: #64748b;
}

.summary-value {
    font-size: 13px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

/* renkler */
.summary-box.debit {
    background: #fff1f1;
}

    .summary-box.debit .summary-value {
        color: #dc3545;
    }

.summary-box.credit {
    background: #eefaf3;
}

    .summary-box.credit .summary-value {
        color: #198754;
    }

.summary-box.net {
    background: #f1f5f9;
}

    .summary-box.net .summary-value {
        color: #111827;
    }


.ekstre-table {
    font-size: 12px;
}

    .ekstre-table thead th {
        font-size: 11px;
        font-weight: 800;
        color: #475569;
        padding: 8px 10px;
    }

    .ekstre-table td {
        padding: 7px 10px;
        vertical-align: middle;
    }

    /* tarih pill */
    .ekstre-table .date-cell span {
        background: #f1f5f9;
        padding: 3px 7px;
        border-radius: 999px;
        font-size: 11px;
        font-weight: 700;
    }

    /* açıklama */
    .ekstre-table .desc-text {
        max-width: 350px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* tutarlar */
    .ekstre-table .amount-debit {
        color: #dc3545;
        font-weight: 800;
    }

    .ekstre-table .amount-credit {
        color: #198754;
        font-weight: 800;
    }


/* --- MÜŞTERİ TABLO --- */
.customer-table {
    font-size: 12px;
}

    .customer-table thead th {
        font-size: 11px;
        font-weight: 800;
        color: #475569;
        padding: 8px 10px;
        border-bottom: 1px solid #e5e7eb;
    }

    .customer-table td {
        padding: 7px 10px;
        vertical-align: middle;
    }

    /* satır hover */
    .customer-table tbody tr:hover {
        background: #f8fbff;
    }

/* cari unvan */
.customer-name {
    font-weight: 700;
    color: #111827;
    max-width: 350px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* cari kod */
.customer-code {
    font-size: 11px;
    color: #64748b;
}

/* telefon */
.customer-phone {
    font-size: 11px;
    color: #475569;
}

/* email */
.customer-mail {
    font-size: 11px;
    color: #2563eb;
}

.mutabakat-list-table {
    font-size: 12px;
}

    .mutabakat-list-table th {
        font-size: 12px;
        font-weight: 800;
        padding: 8px 10px;
        color: #334155;
    }

    .mutabakat-list-table td {
        padding: 7px 10px;
        vertical-align: middle;
    }

    .mutabakat-list-table .badge {
        font-size: 11px;
        padding: 4px 8px;
    }

    .mutabakat-list-table .btn-sm {
        font-size: 12px;
        padding: 3px 8px;
    }