body {
    font-family: 'Century Gothic', sans-serif; 
    background: transparent; 
    margin: 0; 
    padding: 30px; 
    color: white;
    display: grid; 
    grid-template-columns: 1fr; 
    grid-template-rows: 1fr; 
    gap: 25px; 
    height: 100vh; 
    box-sizing: border-box; 
    overflow: hidden;
}

/* De hoofdcontainer (Glass Card) */
.glass-card {
    background: rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    height: 100%; /* Dit staat al goed */
    overflow: hidden; /* Zorgt dat de inhoud binnen de borders blijft */
}

/* De header sectie */
.card-header { 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    margin-bottom: 15px; /* Ruimte tussen header en tabel, vergelijkbaar met gap in menu */
    /* 10px padding zorgt voor dezelfde uitlijning als de binnenkant van een small-card */
    padding: 10px; 
    padding-bottom: 15px; 
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.header-main { 
    display: flex; 
    align-items: center; 
}

.header-actions { 
    display: flex; 
    align-items: center; 
    gap: 15px; /* De ruimte tussen de zoekbalk en het icoontje */
}

.card-header i { 
    font-size: 1.6em; 
    margin-right: 15px; 
    display: flex; 
    align-items: center; 
}

h2 { 
    margin: 0; 
    padding: 5px;
    font-size: 24px; 
    display: flex; 
    align-items: center; 
}

/* De tabelcontainer */
.table-container { 
    flex: 1; 
    overflow-y: auto;
    /* Zorgt dat de tabelinhoud verticaal en horizontaal goed uitlijnt met de header */
    padding: 5px 10px; 
}

table { 
    width: 100%; 
    border-collapse: collapse; 
    text-align: left; 
    margin-top: 0 !important;
}

/* Maak de header sticky en voeg het matte effect toe */
table thead {
    position: sticky;
    top: 0;
    z-index: 10;
    /* Forceer volledige transparantie en hevige blur */
    background-color: transparent !important; 
    backdrop-filter: blur(40px) !important;
    -webkit-backdrop-filter: blur(40px) !important;
}

table thead th {
    background: transparent !important;
    border-top: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Alleen een subtiel lijntje onderaan */
    box-shadow: none !important;
}

/* Tabelrijen (Body cellen) */
td { 
    padding: 12px 10px; /* Horizontale padding gelijk aan header */
    border-bottom: 1px solid rgba(255, 255, 255, 0.05); 
    font-size: 16px; 
    font-family: 'Century Gothic', sans-serif;
    vertical-align: middle;
    transition: background 0.2s ease;
}
/* Voeg het hover-effect van de menu-kaarten toe aan de tabelrijen */
#transactieBody tr:hover td {
    background: rgba(255, 255, 255, 0.12); /* Zelfde kleur als .small-card:hover */
    cursor: pointer;
}

/* Basis styling voor de actie-knoppen */
.refresh-btn, 
#importCsvBtn { 
    background: none; 
    border: none; 
    cursor: pointer; 
    padding: 5px; /* Minder padding geeft het icoon visueel meer ruimte */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    outline: none;
    vertical-align: middle;
}

/* Het icoon herstellen naar de juiste grootte en opacity */
.refresh-btn i,
#importCsvBtn i {
    color: white;
    font-size: 1.8em; /* Vergroot naar 1.5em voor de oorspronkelijke look */
    opacity: 0.5; 
    transition: opacity 0.3s ease;
    display: block;
}

/* Alleen het icoon licht op bij hover */
.refresh-btn:hover i,
#importCsvBtn:hover i { 
    opacity: 1; 
}

/* Specifieke styling voor het prullenbak icoon */
.fa-trash {
    font-size: 18px; /* Gelijk aan de breedte/hoogte van de checkbox */
    opacity: 0.3;
    transition: 0.3s ease;
    cursor: pointer;
    color: white;
    /* Zorg dat het icoon exact gecentreerd staat zoals de checkbox */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
}

/* Hover effect behouden */
.fa-trash:hover {
    opacity: 1.0;
    color: #ff6b6b;
    transform: scale(1.1); /* Iets subtieler omdat hij al groter is */
}

/* Wanneer de rij waarin de prullenbak staat gefocust is */
tr:hover .fa-trash {
    opacity: 0.5; /* Maakt de prullenbak al iets zichtbaarder als je over de rij hovert */
}

/* Gedeelde styling voor alle toasts (verwijderen, importeren, succes) */
.success-toast {
position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 250px;
    height: 250px;
    
    /* Glassmorphism stijl uit add_transaction.css */
    background: rgba(255, 255, 255, 0.1); 
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
    
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
    box-sizing: border-box;
    color: white;
    z-index: 10000;

    /* Font instellingen gelijk aan add_transaction.css */
font-family: 'Century Gothic', sans-serif; 
    animation: toastPopIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.success-toast p {
font-family: 'Century Gothic', sans-serif; 
font-size: 16px;
    font-weight: bold;
    margin: 15px 0 20px 0;
}

/* Standaard opmaak voor alle tabelkoppen */
th { 
    padding: 15px 12px; /* Verhoogde verticale padding voor een rustiger beeld */
    border-bottom: 2px solid rgba(255, 255, 255, 0.1); 
    color: rgba(255, 255, 255, 0.4); 
    font-size: 18px; 
    cursor: pointer;
    white-space: nowrap;
    transition: 0.3s ease; 
    letter-spacing: 1px;
}

th i {
    margin-left: 5px;
    font-size: 0.8em;
    opacity: 0.4;
}

th:hover i {
    opacity: 1;
}

/* Basisstijl voor alle sorteer-iconen */
th i.sort-icon {
    margin-left: 8px;
    font-size: 0.9em;
    opacity: 0.3; /* Zelfde dimming als de tekst */
    color: white;
    transition: 0.3s ease;
}

/* Standaard icoon wanneer niet gesorteerd */
th i.sort-icon::before {
    content: "\f0dc"; /* fa-sort */
}

/* Maak zowel de tekst (th) als het icoon helder wit */
th.asc, 
th.desc {
    color: rgba(255, 255, 255, 1); /* Helder wit voor de tekst */
}

th.asc i.sort-icon,
th.desc i.sort-icon {
    opacity: 1; /* Helder wit voor het icoon */
}

/* Icoon voor Oplopend (ASC) */
th.asc i.sort-icon::before {
    content: "\f0de"; /* fa-sort-up */
}

/* Icoon voor Aflopend (DESC) */
th.desc i.sort-icon::before {
    content: "\f0dd"; /* fa-sort-down */
} 

/* Hover effect voor betere interactie */
th:hover {
    color: rgba(255, 255, 255, 0.7);
}

th:hover i.sort-icon {
    opacity: 0.6;
}

/* Subtiele 'Glass' Scrollbar */
.table-container::-webkit-scrollbar { 
    width: 6px; 
}

.table-container::-webkit-scrollbar-track { 
    background: transparent; 
}

.table-container::-webkit-scrollbar-thumb { 
    background: rgba(255, 255, 255, 0.1); 
    border-radius: 10px; 
}

/* Voor de categorie filter dropdown */
th select option {
    background: #222; /* Zodat de opties leesbaar blijven in de glass-card */
    color: white;
}

/* Zoekveld styling */
.search-wrapper {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 5px 5px;
    /* Geen width: 100% hier! */
}

.search-wrapper i {
    font-size: 0.9em;
    opacity: 0.5;
    margin-right: 5px;
}

.search-wrapper input {
    background: none;
    border: none;
    color: white;
    font-family: inherit;
    outline: none;
    width: 220px;
    margin: 0 10px;
}

.search-wrapper input:focus { 
    width: 220px; 
}

/* Verbergt de placeholder tekst zodra het veld wordt aangeklikt */
.search-wrapper input:focus::placeholder {
    color: transparent;
}

/* Laat de zoekbalk oplichten wanneer deze actief is */
.search-wrapper:focus-within {
    border-color: rgba(255, 255, 255, 0.5); /* Helderdere rand */
    background: rgba(255, 255, 255, 0.1);  /* Iets minder transparante achtergrond */
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.05); /* Subtiele gloed */
}

/* Maak het vergrootglas icoontje ook feller bij focus */
.search-wrapper:focus-within i.fa-magnifying-glass {
    opacity: 1;
}

/* De 'X' knop (standaard onzichtbaar) */
.clear-search {
    opacity: 0;
    cursor: pointer;
    font-size: 1.1em;
    transition: 0.2s;
    visibility: hidden;
}

/* Alleen tonen als wrapper de class 'has-text' krijgt via JS */
.search-wrapper.has-text .clear-search {
    opacity: 0.5;
    visibility: visible;
}

.clear-search:hover {
    opacity: 1 !important;
    color: #ff6b6b;
}

/* Styling voor de knoppen in de toast */
.toast-buttons {
    display: flex;
    gap: 12px;
    width: 100%;
    justify-content: center;
    margin-top: 10px;
}

.toast-buttons button {
font-family: 'Century Gothic', sans-serif; 
font-size: 14px;
    font-weight: bold;
    padding: 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: 0.3s;
    border: none;
}

/* De 'Ja' knop (Gevuld/Licht) */
#confirm-yes, #processImport { 
    background: #fff; 
    color: #1e3c72; 
}

#confirm-yes:hover {
    background: rgba(255, 255, 255, 0.4);
}

#confirm-no:hover {
    border-color: rgba(255, 255, 255, 0.5);
    color: white;
}

/* De transparante knoppen (Nee / Stop) */
#confirm-no, #closeImport {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.5);
    color: white;
}

/* De laag die de achtergrond blokkeert */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(2px);
    z-index: 9998; /* Net onder de toast */
}

/* De overlay achter de import modal */
.import-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(2px);
    z-index: 9999;
}

/* Animatie definitie */
@keyframes toastPopIn {
    0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0; }
    100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

/* Zorg dat invoervelden in de modal ook in de glass-stijl passen */
.file-input {
    width: 100%;
    font-size: 12px;
    margin: 15px 0;
    color: white;
}

/* Styling voor de "Choose File" knop */
.file-input::file-selector-button {
    font-family: 'Century Gothic', sans-serif; 
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 5px;
    color: white;
    padding: 5px 10px;
    cursor: pointer;
    transition: 0.3s;
    margin-right: 10px;
}

.file-input::file-selector-button:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Forceer het juiste lettertype op alle interactieve elementen */
.success-toast button,
.import-content button,
.file-input {
    font-family: 'Century Gothic', sans-serif; 
}

/* Container voor relatieve positionering van het menu */
.options-container {
    position: relative;
    display: flex;
    align-items: center;
}

/* Het Glassmorphism Dropdown Menu */
.glass-dropdown {
    display: none; /* Standaard verborgen */
    position: absolute;
    top: 45px; /* Direct onder het icoontje */
    right: 0;
    width: 210px;
    background: rgba(255, 255, 255, 0.1); 
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
    z-index: 10001; /* Net iets hoger dan de toast indien nodig */
    padding: 8px 0;
    animation: menuPopIn 0.2s ease-out;
    font-family: 'Century Gothic', sans-serif;
}

/* Individuele menu items */
.menu-item {
    padding: 12px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: white;
    cursor: pointer;
    transition: 0.2s;
    font-size: inherit;
}

.menu-item i {
    width: 18px;
    text-align: center;
    opacity: 0.7;
    font-size: 1.1em;
}

.menu-item:hover {
    background: rgba(255, 255, 255, 0.12);
}

/* Animatie voor het menu */
@keyframes menuPopIn {
    from { opacity: 0; transform: translateY(-10px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Container in de laatste cel */
.action-cell {
    text-align: right;
    width: 45px;
    padding-right: 15px !important;
    vertical-align: middle;
}

/* De standaard prullenbak per rij */
.fa-trash {
    font-size: 18px; 
    opacity: 0.3;
    transition: 0.3s ease;
    cursor: pointer;
    color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
}

.fa-trash:hover {
    opacity: 1.0;
    color: #ff6b6b;
    transform: scale(1.1);
}

/* De checkboxes die verschijnen in selectie-modus */
.select-checkbox {
    display: none; /* Standaard verborgen */
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #fff;
    margin: 0;
    vertical-align: middle;
}

/* --- SELECTION MODE LOGICA --- */

/* Verberg prullenbak en toon checkbox als de tabel de class 'selection-mode' heeft */
table.selection-mode .fa-trash { 
    display: none !important; 
}

table.selection-mode .select-checkbox { 
    display: inline-block !important; 
}

/* De Bulk Delete knop in de Header (het prullenbakje bovenin) */
#deleteSelectedBtn {
    cursor: pointer;
    transition: 0.2s ease;
}

#deleteSelectedBtn:hover {
    text-decoration: underline;
    transform: scale(1.05);
}

/* --- OVERIGE FIXES --- */

/* Zorg dat de header th goed uitlijnt met de actie-cellen */
th:last-child {
    text-align: right;
    padding-right: 15px;
}

/* Voorkom dat rijen verspringen als checkboxes verschijnen */
#transactieBody tr {
    height: 50px;
}