﻿/* wwwroot/css/sepa-export.css */

/* Tabel styling met kleinere font */
.sepa-table {
    font-size: 0.8rem; /* compacter */
}

    .sepa-table th {
        font-size: 0.8rem;
        white-space: nowrap;
    }

    .sepa-table td {
        vertical-align: middle;
    }

/* Scroll-container: de tabel blijft binnen het venster, je scrollt in de tabel zelf i.p.v. de
   pagina. Hoogte is dynamisch op de viewport (vh) en past zich dus automatisch aan bij resizen.
   De aftrek is afgestemd op titel + filterkaart erboven en paginering/knoppen eronder. */
.sepa-table-scroll {
    max-height: calc(100vh - 330px);
    min-height: 220px;
    overflow: auto;
}

    /* Kolomkoppen blijven in beeld tijdens verticaal scrollen. table-dark levert de (vereiste)
       dekkende achtergrond. */
    .sepa-table thead th {
        position: sticky;
        top: 0;
        z-index: 2;
    }

    /* Alleen selecteerbare rijen zijn klikbaar (handje); niet-selecteerbare rijen
       (reeds geëxporteerd of met fout) krijgen de normale cursor. */
    .sepa-table tbody tr.row-selectable {
        cursor: pointer;
    }

        .sepa-table tbody tr:hover {
            background-color: rgba(0, 123, 255, 0.1) !important;
        }

    /* Iconen/knoppen in een regel blijven altijd klikbaar (handje), ook op niet-selecteerbare rijen. */
    .sepa-table tbody [role="button"],
    .sepa-table tbody button {
        cursor: pointer;
    }

/* Sorteerbare kolom headers */
.sortable-header {
    cursor: pointer;
    user-select: none;
    transition: box-shadow 0.15s ease;
    position: relative;
}

    .sortable-header:hover {
        background-color: #17224D; /* blauw uit de division-selector */
    }

    .sortable-header i {
        font-size: 0.7rem;
    }

/* Context menu styling */
.dropdown-menu.show {
    min-width: 280px;
}

.dropdown-item:disabled {
    color: #adb5bd;
    cursor: not-allowed;
}

.dropdown-item i {
    width: 20px;
    margin-right: 8px;
}

/* Checkbox alignment in tabel */
.sepa-table .form-check-input {
    margin: 0;
}

/* Paginering compacter */
.pagination-sm .page-link {
    padding: 0.25rem 0.5rem;
    font-size: 0.8rem;
}

/* Actieve regel highlighting */
.sepa-table tbody tr.table-active {
    background-color: rgba(13, 110, 253, 0.15) !important;
}

/* Muted tekst voor SEPA-gegenereerde regels */
.sepa-table tbody tr.text-muted td {
    opacity: 0.6;
}

/* Modal styling */
.modal-content {
    border-radius: 0.5rem;
}

/* Progress bar */
.progress {
    border-radius: 0.5rem;
}

/* Responsive tabel scroll indicator */
.table-responsive {
    position: relative;
}

/* Optioneel: nog compactere variant */
.sepa-table-compact {
    font-size: 0.75rem;
}

    .sepa-table-compact th {
        font-size: 0.7rem;
        padding: 0.3rem 0.5rem;
    }

    .sepa-table-compact td {
        padding: 0.25rem 0.5rem;
    }


/* Tabel header met custom kleur (huisstijl-lichtblauw) */
.sepa-table thead.table-dark {
    --bs-table-bg: #427EFF;
    --bs-table-color: #fff;
}
.sepa-table tfoot.table-dark {
    --bs-table-bg: rgb(5, 39, 103);
    --bs-table-color: #fff;
}

card-footer {
    font-size: 0.85rem;
}
