:root {
  /* --- Kleuren --- */
  --color-blue-dark: #002C5B;
  --color-blue-light: #5CADEF;
  --color-off-white: #FEF4D1;
  --color-red: #EA4444;
  --color-green: #24A058;
  --color-yellow: #FFB901;
  --color-gray-light: #718096;
  --color-gray-lighter: #a0aec0;
  --color-backdrop: rgba(0, 0, 0, 0.5);

  /* --- Lettertypes --- */
  --font-family-body: 'Kirang Haerang', monospace;
  --font-family-data: 'Commissioner', sans-serif;

  /* --- Lettergroottes --- */
  --font-size-data: 1.2rem;                         /*Numbers and important data*/
  
  --font-size-title: 2.5rem;                        /*App title*/
  --font-size-h2: 2rem;                             /*Card headers*/
  --font-size-h3: 1.3rem;                           /*Small headers*/
  --font-size-label: 0.75rem;                       /*Small labels*/
    
  --font-size-small-button: 1.2rem;                 /*Small buttons*/
  --font-size-large-button: 2rem;                   /*Large buttons*/
  --font-size-sticky-buttons: 6rem;                 /*Sticky buttons*/
  
  --font-size-inputfields: 1.5rem;                  /*Input fields*/
  --font-size-icon-emoji-inputfield: 1.25rem;       /*Emoji input field*/
  
  --font-size-icon-emoji: 3rem;                     /*Emoji icons*/
  --font-size-icon-text: 8rem;                      /*Text icons*/
}


/* --- Font Setup --- */
body {
    font-family: var(--font-family-body);
    background-color: var(--color-blue-dark); /* Set dark blue background */
    color: var(--color-off-white); /* Default text color for dark background */
    margin: 0;
    font-weight: normal;
}

html, body {
    height: 100%;
    scroll-behavior: smooth;
}

/* --- Base Layout & Visibility --- */
.hidden {
    display: none !important;
}

main {
    padding: 1.5rem 1rem;
    max-width: 1280px; /* 7xl */
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 120px; /* Space for sticky footer */
    display: flex;
    flex-direction: column;
    gap: 1.5rem; /* gap-6 */
}



/* Replicate sm:px-6 lg:px-8 */
@media (min-width: 640px) {
    main { padding-left: 1.5rem; padding-right: 1.5rem; }
}
@media (min-width: 1024px) {
    main { padding-left: 2rem; padding-right: 2rem; }
}

/* --- Header & Title (Your Styles) --- */
header > #header-content {
    background-color: var(--color-red); /* Red background */
    border: 3px solid var(--color-blue-dark); /* Dark blue stroke/border */
    height: 78px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative; /* Contains the absolute button */
}

#app-title {
    font-family: var(--font-family-body);
    color: var(--color-off-white); /* Off-white text */
    padding-left: 1rem;
    padding-right: 1rem;
    font-size: var(--font-size-title);
    text-transform: uppercase;
    text-align: center;
    pointer-events: none;
    user-select: none;
    margin: 0;
    font-style: normal;
    font-weight: normal;

}

/* --- Logout Button (Your Styles) --- */
#logout-button {
    font-family: var(--font-family-body);
    font-size: var(--font-size-label);
    color: var(--color-blue-dark);
    background-color: var(--color-off-white);
    border: 1px solid var(--color-blue-dark);
    border-radius: 0px;
    width: 43px;
    height: 43px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    box-shadow: none;
    cursor: pointer;
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    --tw-text-opacity: 1;
    color: var(--color-blue-dark);
}

/* --- User Info Bar --- */
#user-info-bar {
    max-width: 1280px; /* 7xl */
    margin: 0.5rem auto 0 auto;
    padding: 0 1rem;
    font-size: var(--font-size-label); /* text-sm */
    text-align: right;
}
@media (min-width: 640px) {
    #user-info-bar { padding-left: 1.5rem; padding-right: 1.5rem; }
}
@media (min-width: 1024px) {
    #user-info-bar { padding-left: 2rem; padding-right: 2rem; }
}

#user-info-bar #userIdDisplay {
    font-size: var(--font-size-label); /* text-xs */
    background-color: var(--color-blue-light); /* Equivalent to dark:bg-gray-700 */
    padding: 0.25rem;
    border-radius: 0.25rem;
    color: var(--color-off-white);
}





/* --- Base Card Styles (Your Theme) --- */
.card {
    background-color: var(--color-off-white);
    color: var(--color-blue-dark);
    padding: 1.5rem; /* p-6 */
}
.card h2 {
    font-size: var(--font-size-h2); /* text-xl */
    margin-top: 0;
    margin-bottom: 1rem; /* mb-4 */
    color: var(--color-blue-dark);
}
.card p {
    color: var(--color-blue-dark);
}
.card label {
    display: block;
    font-size: var(--font-size-label); /* text-sm */
    color: var(--color-blue-dark);
}
.card p.placeholder-message, 
.scrollable-list p.placeholder-message {
    text-align: center;
    padding: 1rem;
    color: var(--color-gray-light); /* Lighter gray */
    font-style: italic;
    border: 2px dashed var(--color-gray-lighter);
    border-radius: 0.5rem;
    margin: 0;
}

/* --- Scrollable Lists --- */
.scrollable-list {
    display: flex;
    flex-direction: column;
    gap: 1rem; /* space-y-4 */
    max-height: 24rem; /* max-h-96 */
    overflow-y: auto;
}
.scrollable-list.short-list {
    max-height: 15rem; /* max-h-60 */
}

/* --- Base Form Styles --- */
input[type="email"],
input[type="password"],
input[type="text"],
input[type="number"],
select {
    width: 100%;
    padding: 0.5rem 0.75rem; /* px-3 py-2 */
    margin-top: 0.25rem; /* mt-1 */
    background-color: var(--color-off-white); /* Keep general inputs white */
    color: var(--color-blue-dark);
    border: 1px solid var(--color-blue-dark);
    border-radius: 0.375rem; /* rounded-md */
    box-sizing: border-box; /* Ensure padding doesn't break width */

    /* --- ADD OR MODIFY THIS LINE --- */
    font-size: var(--font-size-data); /* Set font size to 16px or larger */
}

input:focus, select:focus {
    outline: none;
    border-color: var(--color-blue-dark); /* focus:border-blue-500 */
}
input::placeholder { color: var(--color-gray-light); }

input:focus::placeholder {
    color: transparent;
}

/* Base Button Styles */
button {
    border-radius: 0.375rem; /* rounded-md */
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}
button:focus {
    outline: none;
}

/* Primary Button (e.g., Add Category, Login) */
button.button-primary,
#login-button {
    width: 100%;
    padding: 0.5rem 1rem; /* px-4 py-2 */
    color: var(--color-blue-dark) !important;
    background-color: var(--color-yellow) !important;
    font-family: var(--font-family-body);
    font-weight: normal;
    text-transform: uppercase;
    border-radius: 0;
    border: solid 3px var(--color-blue-dark);
    font-size: var(--font-size-h2);
}

/* --- Login Screen --- */
#login-screen {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    padding: 1rem;
    box-sizing: border-box;
}
#login-card {
    width: 100%;
    max-width: 28rem; /* max-w-md */
    padding: 2rem;
    background-color: var(--color-off-white);
    border-radius: 0.5rem; /* rounded-lg */
}
#login-card h2 {
    font-size: var(--font-size-h2); /* text-3xl */
    text-align: center;
    color: var(--color-blue-dark);
    margin: 0 0 1.5rem 0;
}
#login-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem; /* space-y-6 */
}
#login-error {
    font-size: var(--font-size-label); /* text-sm */
    text-align: center;
    color: var(--color-red); /* text-red-500 */
    min-height: 1.25rem; /* Ensure layout doesn't jump */
}
#login-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* --- Styles for Log Income Section (Your Styles) --- */
#log-income-container {
    background-color: var(--color-green); /* Green background */
    border: 3px solid var(--color-blue-dark); /* Dark blue border */
}
#log-income-body {
    padding: 0 1.5rem 1.5rem 1.5rem; /* px-6 pb-6 */
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
#log-income-title {
    color: var(--color-blue-dark); /* Dark blue text */
    text-transform: uppercase;
    font-family: var(--font-family-body);
    font-size: var(--font-size-h2);
    text-align: center;
    padding: 1.5rem 1.5rem 1rem 1.5rem; /* px-6 pt-6 mb-4 */
    margin: 0;
}
#dynamic-income-presets {
    display: flex;
    flex-direction: column;
    gap: 0.75rem; /* space-y-3 */
}
#dynamic-income-presets:empty {
    display: none;
}
.income-preset-group {
    position: relative;
    overflow: hidden;
    background-color: var(--color-red);
    touch-action: pan-y;
}
.preset-content {
    position: relative;
    z-index: 1;
    background-color: var(--color-green);
    transition: transform 0.2s ease-out;
    width: 100%;
    display: flex; /* Added from refactor */
    height: 3.25rem;
    align-items: stretch;
}
.income-preset-group.swiping .preset-content {
    transition: none;
}
.income-preset-group::before {
    content: 'DELETE';
    position: absolute; top: 0; right: 0; bottom: 0;
    width: 80px;
    background-color: var(--color-red); color: var(--color-off-white);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-family-data); font-size: var(--font-size-label);
    z-index: 0;
}
#log-income-container .income-input {
    font-family: var(--font-family-data);
    background-color: var(--color-off-white);
    color: var(--color-blue-dark);
    position: relative; z-index: 1;
    border: 3px solid var(--color-blue-dark);
    border-radius: 0;
    margin: 0;
    /* --- FIXES --- */
    width: 40%; /* Your style */
    flex-grow: 1; 
    font-size: var(--font-size-inputfields); 
    padding: 0 0.75rem;   /* Remove vertical padding */
}
.income-input:read-only {
    background-color: var(--color-off-white); 
    color: var(--color-blue-dark); 
    cursor: default; 
}
.income-input::-webkit-outer-spin-button,
.income-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.income-input[type=number] { -moz-appearance: textfield; }
.income-input::placeholder { color: var(--color-blue-light); }

.log-income-button {
    background-color: var(--color-yellow);
    border: 3px solid var(--color-blue-dark);
    border-left-width: 0; /* Added from refactor */
    border-radius: 0;
    color: var(--color-blue-dark);
    white-space: nowrap;
    position: relative; z-index: 1;
    width: 60%; /* Your style */
    font-family: var(--font-family-body);
    font-size: var(--font-size-large-button);
    box-shadow: none; /* Override base button shadow */
    padding: 0 0rem;  /* Remove vertical padding */
    margin: 0;
}

#add-different-income-btn {
    background-color: var(--color-off-white);
    border: 3px solid var(--color-blue-dark);
    border-radius: 0;
    color: var(--color-blue-dark);
    font-family: var(--font-family-body);
    font-size: var(--font-size-large-button);
    width: 100%;
    height: 3.25rem;
}

/* --- Add Category Form --- */
#add-category-form {
    display: flex;
    flex-direction: column;
    gap: 1rem; /* space-y-4 */
}

#add-category-modal h2 {
    margin-top:0.8rem;
} 
/* --- START: Replace your old #unallocated-display rules --- */

/* Update the main container to fit the modal's theme */
#unallocated-display {
    padding: 0.75rem 0rem;
    margin-bottom: 1rem;
}

/* New: Style the label row */
#unallocated-labels {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.5rem;
    
}

/* Update existing p tags */
#unallocated-display p:first-child {
    font-size: var(--font-size-label); 
    color: var(--color-blue-dark);
    margin: 0;
    font-family: var(--font-family-body);
    font-weight: normal;
    font-size: var(--font-size-h3);
    text-transform: uppercase;
}
#unallocated-budget {
    font-size: var(--font-size-data);
    margin: 0;
    font-family: var(--font-family-data);
    font-weight: normal;
}

/* New: Bar container (the "track") */
#unallocated-bar-container {
    width: 100%;
    height: 12px;
    background-color: var(--color-blue-dark); /* Use the modal's blue */
    border-radius: 6px;
    overflow: hidden;
    box-sizing: border-box;
}

/* New: Bar fill (the "progress") */
#unallocated-bar-fill {
    height: 60%;
    width: 100%; /* Start full */
    background-color: var(--color-yellow); /* Green for "available" */
    border-radius: 6px;
    transition: width 0.3s ease-out;
    border: 2px solid var(--color-blue-dark);

}

/* New: Style for when the bar is over-allocated (negative) */
#unallocated-bar-fill.status-negative {
    background-color: var(--color-red); /* Red */
    width: 100%; /* Show 100% red bar if negative */
}

/* --- END: Replacement block --- */


/* --- Categories List --- */
/* --- New Category Card Styles --- */
#categories-list {
    max-height: none;
    overflow-y: visible;
}
#your-categories-card {
    background-color: transparent;
    border: none;
    box-shadow: none;
    margin-top: -1rem;
    padding: 0; /* <-- ADD THIS LINE */
}

.category-card {
    background-color: var(--color-off-white);
    padding: 1.5rem 0 0 0; /* Top: 1.5rem, Others: 0 */    
    border-radius: 0;
    box-shadow: none; /* Removed shadow */
    position: relative; /* Required for absolute positioning emoji */
    margin-top: 2rem;
}

.category-card .category-emoji {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -60%); /* Centers and pulls halfway up */
    
    font-size: var(--font-size-icon-emoji); /* Made emoji slightly bigger */
    line-height: 1;
    border-radius: 50%;
    padding: 0.25rem;
}

.category-card-name {
    text-align: center; /* Center the name */
    margin-bottom: 0.25rem; /* Space between name and labels */
    font-family: var(--font-family-body);
    font-size: var(--font-size-h2);
    font-weight: normal;
    text-transform: uppercase;
    padding: 0 1rem; /* <-- ADD THIS LINE */
    
}

.category-bar-labels {
    display: flex;
    justify-content: space-between; /* Puts labels on left and right */
    align-items: flex-end;
    margin-bottom: 0.25rem; /* Small space above the progress bar */
    font-family: var(--font-family-data);
    padding: 0 1rem; /* <-- ADD THIS LINE */
}

.progress-bar-label.status-over {
    color: var(--color-red); /* text-red-500 */
}

.category-summary {
    /* This is the "spent / total" text */
    font-size: var(--font-size-data); /* text-xs (small) */
}
.progress-bar-container {
    width: 90%;
    background-color: var(--color-blue-dark); /* bg-gray-200 */
    border-radius: 9999px; /* rounded-full */
    height: 0.625rem; /* h-2.5 */
    margin-left: auto;
    margin-right: auto;
}
.progress-bar-fill {
    height: 0.4rem; /* h-2.5 */
    border-radius: 9999px; /* rounded-full */
    border: 2px solid var(--color-blue-dark);

}
.progress-bar-fill.status-under {
        height: 0.4rem; /* h-2.5 */
    background-color: var(--color-yellow); /* bg-green-500 */
    border: 2px solid var(--color-blue-dark);

    
}
.progress-bar-fill.status-over {
    background-color: var(--color-red); /* bg-red-500 */
    width: 100% !important; /* Over-budget is always 100% full */
}
.progress-bar-label {
    font-size: var(--font-size-data); /* text-xs */
    text-align: right;
    margin-top: 0; /* mt-1 */
    color: var(--color-blue-dark); /* text-gray-500 */
}
.progress-bar-label.status-over {
    color: var(--color-red); /* text-red-500 */
}

#add-category-button {
    /* Inherit structure from category-card */
    background-color: transparent;    
    border-radius: 0.5rem; /* Match category card */
    box-shadow: none;
    position: relative; 
    margin-top: 0.5rem; /* Match category card */
    padding: 0; /* Remove default button padding */
    
    /* Sizing - Make it roughly square or match card height */
    /* Adjust height as needed to match other cards visually */
    min-height: 120px; /* Example height, adjust as needed */
    height: 1rem; 
    
    /* Center the "+" sign */
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 1rem;
    
    /* Style the "+" sign */
    font-size: var(--font-size-icon-text); /* Large plus sign */
    color: var(--color-off-white); /* Dashed border color */
    font-weight: lighter;
    line-height: 1;
    font-family: var(--font-family-body);

    /* Remove button-specific hover/focus */
    transition: none; 
    
    border:none;
    /* --- Add Background properties for the dashed effect --- */
    background-image: 
        /* Top */
        repeating-linear-gradient(to right, var(--color-off-white) 0, var(--color-off-white) 6px, transparent 6px, transparent 13px), 
        /* Bottom */
        repeating-linear-gradient(to right, var(--color-off-white) 0, var(--color-off-white) 6px, transparent 6px, transparent 13px),
        /* Left */
        repeating-linear-gradient(to bottom, var(--color-off-white) 0, var(--color-off-white) 6px, transparent 6px, transparent 13px),
        /* Right */
        repeating-linear-gradient(to bottom, var(--color-off-white) 0, var(--color-off-white) 6px, transparent 6px, transparent 13px);

    background-size: 
        100% 3px, /* Top */
        100% 3px, /* Bottom */
        3px 100%, /* Left */
        3px 100%; /* Right */
    
    background-position: 
        top left,    /* Top */
        bottom left, /* Bottom */
        top left,    /* Left */
        top right;   /* Right */

    background-repeat: no-repeat;

    /* --- Add back the border-radius --- */
    border-radius: 0.5rem; /* Match category card */
}

/* Ensure the wrapper's padding-top is correct */
.category-card-swipe-wrapper {
    position: relative;
    border-radius: 0;
    touch-action: pan-y;
    padding-top: 2rem; /* This value must match the 'top' in ::before */
    margin-top: 0.5rem;
}
/* Add a pseudo-element for the DELETE text */
.category-card-swipe-wrapper::before {
    content: 'DELETE';
    position: absolute;
    /* --- CHANGE THIS --- */
    top: 2rem; /* Match the padding-top of the wrapper */
    /* --- END CHANGE --- */
    left: 0;
    bottom: 0; /* Keep it aligned to the bottom */
    width: 100%; /* Width of the revealed delete area */
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 20px;
    box-sizing: border-box;
    color: var(--color-off-white);
    font-family: var(--font-family-data);
    font-weight: normal;
    font-size: var(--font-size-label);
    z-index: 0; /* Behind the content */
    background-color: var(--color-red); /* Red background for delete area */

}

/* Style the inner content card */
.category-card-swipe-wrapper .category-card {
    position: relative;
    z-index: 1;
    background-color: var(--color-off-white);
    transition: transform 0.3s ease-out;
    /* overflow: hidden; */ /* <-- REMOVE this line */

    /* --- REMOVE margin-top, ADJUST padding-top --- */
    margin-top: 0; /* Sits at the top of the wrapper's padding */
    padding-top: 1.5rem; /* Keep existing padding *within* the card below the emoji */
     /* Ensure other padding remains */
     padding-left: 0;
     padding-right: 0;
     padding-bottom: 0;
}



/* Optional: Style during swipe */
.category-card-swipe-wrapper.swiping .category-card {
    transition: none; /* Disable transition during active drag */
}

/* Adjustments to base .category-card if needed */
.category-card {
     /* Ensure existing styles don't conflict, like margin-top */
     /* margin-top: 2rem; */ /* This should be on the wrapper now */
     border-radius: 0; /* Confirm it's square */
}

/* Ensure Add Button doesn't interfere */
/* Adjust Add button margin to match wrapper */
#add-category-button.add-button {
    margin-top: 0.5rem; /* Match the adjusted wrapper margin-top */
     /* If wrapper margin-top is 0, set this to maybe 2rem for initial spacing */
}



/* --- Add Category Modal --- */
/* (Uses existing .modal-backdrop and .modal-content styles) */

/* Specific adjustments for the form inside the modal */
#add-category-modal #add-category-form {
    /* Add some space between form elements if needed */
    gap: 1rem; 
}

#add-category-modal #unallocated-display {
    /* Styles for the unallocated display inside the modal */
    margin-bottom: 0.5rem; /* Add space below it */
}

#add-category-modal button.button-primary {
     margin-top: 0.5rem; /* Add space above the submit button */
}

/* --- Transactions List --- */
.transaction-icon-container {
    flex-shrink: 0;
    width: 2rem; /* w-8 */
    height: 2rem; /* h-8 */
    border-radius: 9999px; /* rounded-full */
    display: flex;
    align-items: center;
    justify-content: center;
    display: none;
}

.transaction-details {
    flex-grow: 1;
    margin-left: 0; /* space-x-3 */
    margin-right: 0.75rem;
}

.transaction-description {
    margin: 0;
}
.transaction-category {
    font-size: var(--font-size-label); /* text-xs */
    color: var(--color-blue-light); /* text-gray-500 */
    margin: 0;
}
.transaction-amount-container {
    display: flex;
    align-items: center;
    gap: 0.5rem; /* space-x-2 */
}

.delete-tx-btn {
    width: 1.5rem; /* w-6 */
    height: 1.5rem; /* h-6 */
    color: var(--color-gray-lighter); /* text-gray-400 */
    border-radius: 9999px; /* rounded-full */
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 0;
    box-shadow: none;
    display: none; /* <-- ADD THIS LINE */
}
.delete-tx-btn svg {
    width: 1rem; /* h-4 w-4 */
    height: 1rem;
}

/* Transaction Types */
.transaction-item-content.type-expense .transaction-icon-sign {
    color: var(--color-red) !important; /* Your style */
}
.transaction-item-content.type-expense .transaction-amount {
    color: var(--color-red) !important; /* Your style */
}
.transaction-item-content.type-reimbursement .transaction-icon-sign {
    color: var(--color-blue-dark) !important; /* Your style */
}
.transaction-item-content.type-reimbursement .transaction-amount {
    color: var(--color-blue-dark) !important; /* Your style */
}
.transaction-item-content.type-income .transaction-icon-sign {
    color: var(--color-green) !important; /* Green */
}
.transaction-item-content.type-income .transaction-amount {
    color: var(--color-green) !important; /* Green */
}


/* This is the new class for the sliding content */
.transaction-item-content {
    /* Copy ALL styles from the original '.transaction-item' rule */
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0rem 1rem;   
    background-color: var(--color-off-white) !important;
    border-radius: 0;
    height: 100%;
    
    /* Add these new styles */
    position: relative;
    z-index: 1; /* Keep content on top */
    transition: transform 0.3s ease-out; /* For sliding back */
}

/* Disable transition during active swipe */
.transaction-swipe-wrapper.swiping .transaction-item-content {
    transition: none;
}

/* Style for invalid fields after a submit attempt */
#add-transaction-form.was-validated input:invalid,
#add-transaction-form.was-validated select:invalid,
#add-category-form.was-validated input:invalid,
#add-category-form.was-validated select:invalid {
    background-color: var(--color-red); /* Light red background */
}

/* Optional: Make the focus ring red for invalid fields */
#add-transaction-form.was-validated input:invalid:focus,
#add-transaction-form.was-validated select:invalid:focus,
#add-category-form.was-validated input:invalid:focus,
#add-category-form.was-validated select:invalid:focus {
     border-color: var(--color-blue-dark);
}



#add-category-form input:focus::placeholder,
#add-transaction-form input:focus::placeholder
{
    color: transparent;
}

#add-category-modal .modal-content {
    background-color: var(--color-blue-light); /* Example: Yellow */
    border-color: var(--color-blue-dark);
}
/* --- Overview Card --- */
/* --- New Overview Styles --- */

#overview-card{
    background-color: var(--color-blue-light);
    border-radius: 0;
    border: 3px solid var(--color-blue-dark);
    box-shadow: none;
}

#overview-card h2 {
    /* Keep title styling */
    font-size: var(--font-size-h2);
    margin-top: 0;
    margin-bottom: 1rem;
    color: var(--color-blue-dark);
    font-family: var(--font-family-body);
    text-transform: uppercase;
    padding-top:10px;
    font-style: normal;
}

.form-group-main {
    flex: 1; /* Makes this field take up all available space */
}

.form-group-icon {
    flex-basis: 70px; /* Sets a fixed width for the emoji input */
}

/* Optional: Center the emoji in its box */
.form-group-icon input {
    text-align: center;
    font-size: var(--font-size-icon-emoji-inputfield); /* Make the emoji a bit bigger */
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}


/* Background Circle */
.harvey-bg {
    position: absolute;
    inset: 0; /* Fill the wrapper */
    border-radius: 50%;
    background-color: var(--color-blue-dark); /* Light grey background */
    box-sizing: border-box;
}


/* Keep existing layout styles */
#overview-container {
    display: flex;
    justify-content: flex-start; /* Or space-between if preferred */
    align-items: center;
    /* gap: 1rem; */ /* Removed if using negative margin */
}

#harvey-balls-container {
    display: flex;
    position: relative;
    min-width: 100px;
    height: 100%; /* SVG height */
    align-items: center;
    margin-left: -1rem; /* Adjust positioning */
}

.harvey-ball-wrapper {
    position: relative;
    width: 80px; /* SVG width */
    height: 80px; /* SVG height */
    flex-shrink: 0;
    margin-left:-3rem;
    margin-top:-2rem;
}

/* Left Ball Wrapper - Give it the highest z-index */
#harvey-ball-total-spent {
    position: relative; /* Ensure z-index applies */
}

#harvey-ball-allocated-spent { /* Right Ball Wrapper */
    position: relative;
    margin-left: -20px; /* Overlap */
    margin-top: 1rem;
}

.harvey-external-bg {
    position: absolute;
    inset: 0; /* Cover the wrapper */
    border-radius: 50%;
    background-color: var(--color-blue-dark); /* Dark blue background color */
    border: 3px solid var(--color-blue-dark); /* Dark blue border */
    box-sizing: border-box;
    z-index: 1; /* This is the LOWEST LAYER within its wrapper (beneath right ball's z-index 1) */
}

/* Container for SVG */
.harvey-svg {
    width: 100%;
    height: 100%;
    display: block; /* Remove potential extra space */
    position:absolute;
    top:0;
    left: 0;
    overflow: visible;
}

.harvey-fill-only-svg {
    z-index: 3; /* This SVG (containing only the fill) gets the highest z-index */
    position: relative; /* Needed for z-index on SVG in some browsers */
}

/* Styles for the RIGHT BALL's SVG (contains bg + fill) */
#harvey-ball-allocated-spent .harvey-svg {
     z-index: 2; /* Middle layer */
     position: relative; /* Establish context for z-index */
}

/* Background Circle */
.harvey-svg-bg {
    fill: var(--color-blue-dark); /* Light grey background */
    stroke: var(--color-blue-dark); /* Dark blue border */
    stroke-width: 3px; /* Border thickness */
}

/* Foreground Segment Path (Common Styles) */
.harvey-svg-fill {
    stroke: var(--color-blue-dark); /* Dark blue border */
    stroke-width: 3px; /* Border thickness */
    stroke-linejoin: round; /* Smoother corners at center */
}

/* Specific Fill Colors */
.harvey-svg-fill.fill-total { /* Left Ball (Total Spent) */
    fill: var(--color-yellow); /* Yellow fill */
}

.harvey-svg-fill.fill-allocated { /* Right Ball (Allocated Spent) */
    fill: var(--color-red); /* Green fill */
}
/* Label below each ball */
/* Keep harvey-label styles */
.harvey-svg-label {
    font-family: var(--font-family-body);
    font-size: var(--font-size-data); /* Adjust size */
    fill: var(--color-blue-dark); /* Text color */
    font-weight: normal; /* Medium weight */
}

/* Optional: Slightly adjust vertical position if needed */
.harvey-svg textPath {
     /* dominant-baseline: middle; Might not be needed with startOffset/text-anchor */
}


/* State classes from JS */
.overview-value.status-positive { color: var(--color-green) !important; }
.overview-value.status-negative { color: var(--color-red) !important; }
.overview-value.status-neutral { color: var(--color-blue-dark) !important; }

/* --- Savings History --- */

#savings-container {
    background-color: var(--color-red);
    border: 3px solid var(--color-blue-dark);
    border-radius: 0;
    
}

#savings-container h2 {
    font-family: var(--font-family-body);
    font-size: var(--font-size-h2);
    font-weight: normal;
    text-align: center;
    text-transform: uppercase;
}    

#savings-total {
    border: 3px solid var(--color-blue-dark);
    border-bottom:hidden;
    border-radius: 0;
    display:flex;
    background-color: var(--color-off-white);
    font-family: var(--font-family-body);
    font-size: var(--font-size-h2);
    
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 1rem;
}
#savings-total p{
    margin:0;
}

#savings-list {
    border: 3px solid var(--color-blue-dark);
    background-color: var(--color-off-white);
    gap:0;
    padding: 0.5rem 1rem;
    font-family: var(--font-family-data);
}


#savings-total-amount{
    font-family: var(--font-family-data);
    font-size: var(--font-size-inputfields);
}
#savings-total p:first-child {
    text-transform: uppercase; /* Makes "Total" uppercase */
}

.savings-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0rem 0rem; /* p-3 */
}
.savings-item-date { 
    font-size: var(--font-size-data); 
    color: var(--color-blue-dark);
    
}
.savings-item-amount {
    font-size: var(--font-size-data); /* text-lg */
    color: var(--color-blue-dark) !important; /* Your style */
}


/* --- Recent transactions card --- */

#recent-transactions-container { 
    font-family: var(--font-family-data);
    font-size: var(--font-size-data);
}
#recent-transactions-container h2 {
    text-align: center;
    font-size: var(--font-size-h2);
    font-weight: normal;
    text-transform: uppercase;
    font-family: var(--font-family-body);

}



/* --- Month-End Card --- */
#month-end-card {
    padding: 0; 
}

#end-of-month-btn {
    width: 100%;
    padding: 0rem 1rem; /* px-4 py-2 */
    color: var(--color-blue-dark) !important; /* Your style */
    background-color: var(--color-yellow) !important; /* Your style */
    margin: 0;
    font-family: var(--font-family-body);
    font-size: var(--font-size-large-button);
    border-radius: 0;
    border: 3px solid var(--color-blue-dark);
    text-transform: uppercase;
    border-top-width: 3px; /* Ensure top border exists */
    border-bottom-width: 0; /* Remove bottom border */
    border-left-width: 0; /* Remove left border */
    border-right-width: 0; /* Remove right border */
    box-sizing: border-box;
    height: 50px; /* Match slider track height */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- Swipe to Reset Slider --- */
#swipe-container {
    width: 100%;
    margin-top: 0rem; /* Space above the slider */
    box-sizing: border-box; 
    /* Adjust padding if needed based on card styling */
}

#slider-track {
    position: relative; /* Context for handle and text */
    width: 100%;
    height: 50px; /* Height of the rounded rectangle */
    background-color: var(--color-off-white); /* Yellow background */
    border-radius: 25px; /* Fully rounded ends */
    border: 3px solid var(--color-blue-dark); /* Dark blue border */
    box-sizing: border-box; 
    overflow: hidden; /* Hide handle overflow if needed */
    cursor: grab; /* Indicate draggable area */
}

#slider-handle {
    position: absolute;
    /* CHANGE 'top: 50%' and 'transform' */
    top: 2px; /* Position relative to the *inside* top edge */
    left: 2px; /* Position relative to the *inside* left edge */
    /* REMOVE transform: translateY(-50%); */ 
    
    width: 40px; 
    height: 40px; 
    
    /* NEW COLORS: */
    background-color: var(--color-yellow); /* Yellow background */
    border: 3px solid var(--color-blue-dark); /* Blue border */
    
    border-radius: 50%; 
    cursor: grab;
    z-index: 2; 
    box-sizing: border-box; /* Include border in size calculation */
}

#slider-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--color-blue-dark);
    font-family: var(--font-family-body);
    font-size: var(--font-size-inputfields); /* Adjust as needed */
    white-space: nowrap;
    user-select: none; /* Prevent text selection during drag */
    z-index: 1; /* Below handle */
    opacity: 1;
    transition: opacity 0.2s ease-out; /* Smooth fade */
}

/* --- Dragging States --- */
#swipe-container.dragging #slider-handle,
#swipe-container.dragging #slider-track {
    cursor: grabbing; /* Change cursor during drag */
}

/* --- Completed State (Optional) --- */
#swipe-container.completed #slider-track {
     background-color: var(--color-green); /* Change to green on completion */
     border-color: var(--color-off-white); /* Lighter border maybe? */
}
#swipe-container.completed #slider-handle {
     background-color: var(--color-off-white); /* Lighter handle */
     cursor: default; /* Not draggable anymore */
}
#swipe-container.completed #slider-text {
    opacity: 0; /* Hide text */
}

/* Ensure card layout accommodates slider */
#month-end-card {
    padding: 0; /* Keep padding removed */
    background-color: transparent;
    border: none; 
    box-shadow: none; 
}

/* --- Sticky Actions Footer --- */
#sticky-actions {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 20;
    padding: 1rem;
    background-color: none;
    /* Replicates hidden state */
    display: grid;
}
body:not(.dark-mode) #sticky-actions {
    background-color: none;
}
#sticky-actions.hidden {
    display: none;
}
#sticky-actions-content {
    max-width: 1280px; /* 7xl */
    margin-left: auto;
    margin-right: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem; /* gap-4 */
    width: 100%;
}
/* Sticky button padding */
#sticky-actions button {
    padding: 0.75rem; /* py-3 */
    color: var(--color-off-white) !important; /* Your style */
    border: 3px solid var(--color-blue-dark);
    border-radius: 0;
    height: 67px;
    width: 144px;
    margin-left: auto;
    margin-right: auto;
    font-family: var(--font-family-body);
    font-size: var(--font-size-sticky-buttons);
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding-top: 1.4rem;
    overflow: hidden;
}
#sticky-expense-btn {
    background-color: var(--color-red) !important; /* Your style */
}
#sticky-reimburse-btn {
    background-color: var(--color-green) !important; /* Your style */
}


/* --- Modals --- */
.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background-color: var(--color-backdrop);
    backdrop-filter: blur(4px);
}
.modal-content {
    position: relative;
    width: 100%;
    max-width: 32rem; /* max-w-lg */
    padding: 1.5rem; /* p-6 */
    padding-top: 1rem;
    background-color: var(--color-off-white); /* Your style */
    color: var(--color-blue-dark); /* Your style */
    border-radius: 0; /* rounded-lg */
    border: 3px solid var(--color-blue-dark);
}

.modal-content.modal-expense {
    background-color: var(--color-red); /* Red */
}
.modal-content.modal-reimbursement {
    background-color: var(--color-green); /* Green */
}

/* Change text color for H2 and labels when on new backgrounds */
.modal-expense h2,
.modal-expense label,
.modal-reimbursement h2,
.modal-reimbursement label {
    color: var(--color-off-white); /* Off-white */
}

/* Make the close button visible on new backgrounds */
.modal-expense .modal-close-btn,
.modal-reimbursement .modal-close-btn {
     color: var(--color-off-white); /* Off-white */
}

.modal-content p {
    color: var(--color-blue-dark);
    margin-top: 0;
    margin-bottom: 1.5rem; /* mb-6 */
    font-family: var(--font-family-data);
}
.modal-close-btn {
    position: absolute;
    top: 1rem; right: 1rem;
    color: var(--color-blue-dark); /* text-gray-400 */
    background: none;
    border: none;
    padding: 0;
    box-shadow: none;
    width: 1.5rem; /* h-6 w-6 */
    height: 1.5rem;
}
.modal-close-btn svg {
    width: 100%; height: 100%;
}

/* New Icon Container */
.modal-icon-container {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -46%); /* Centers and pulls half-way up */
    z-index: 10;

    /* Style for the text itself */
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-family-body);
    font-size: var(--font-size-icon-text); /* <-- Increased from 4rem */
    line-height: 1;
    color: var(--color-blue-dark);
}

/* Add padding to modals that use the icon */
.modal-content.with-icon {
    padding-top: 3rem; /* Was 1rem, adding space for the icon */
}

/* Make all modal titles uppercase */
.modal-content h2 {
    font-size: var(--font-size-h2); /* text-xl */
    margin-top: 0;
    margin-bottom: 1rem; /* mb-4 */
    color: var(--color-blue-dark);
    text-transform: uppercase; /* <-- ADDED THIS LINE */
    text-align: center; /* <-- ADDED THIS LINE */
    font-family: var(--font-family-body);
    font-weight: normal;
    margin-top: -1.8rem;
}

#add-transaction-form label {
    display: hidden;
}


#add-category-form input[type="text"],
#add-category-form input[type="number"],
#add-category-form select,
#add-transaction-form input[type="text"],
#add-transaction-form input[type="number"],
#add-transaction-form select {
    background-color: var(--color-off-white); /* Use off-white for the background */
    border: solid 3px var(--color-blue-dark);
    color: var(--color-blue-dark);       /* Use blue for the text */
    text-align: left;       /* Center-aligned text can look odd in forms */
    border-radius: 0;
    /*padding: 1rem 0.5rem;*/
    font-family: var(--font-family-data);
    font-size: var(--font-size-inputfields);
}

/* Style the placeholder text */
#add-category-form input::placeholder,
#add-transaction-form input::placeholder {
    color: var(--color-blue-dark); /* A lighter gray */
    text-align: center;
    text-transform: lowercase;
    font-family: var(--font-family-body);
    font-weight: normal;
    /*font-size: 2rem;*/
    padding-bottom: 0.1rem;
}

/* Style the dropdown's "Select category..." text */
#add-transaction-form select:invalid {
    color: var(--color-blue-dark); /* A lighter gray */
    text-align: center;
    text-transform: lowercase;
    font-family: var(--font-family-body);
    font-weight: normal;
    font-size: var(--font-size-h2);
    padding: 0.6rem 0.5rem;
}
#add-transaction-form select option {
    color: var(--color-blue-dark); /* Regular text color for options */
    background-color: var(--color-off-white);
    border: solid 3px var(--color-blue-dark);
    text-align: center;
    text-transform: lowercase;
    font-family: var(--font-family-body);
    font-weight: normal;
    font-size: var(--font-size-h2);
}

#add-transaction-form {
    display: flex;
    flex-direction: column;
    gap: 1rem; /* space-y-4 */
}
.form-row {
    display: flex;
    gap: 1rem; /* space-x-4 */
}
.form-group-half {
    flex: 1;
}

/* Delete Modal */
.modal-content.small-modal {
    max-width: 28rem; /* max-w-md */
}
#delete-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 1rem; /* space-x-4 */
}
#delete-modal-actions button {
    padding: 0.5rem 1rem;
    box-shadow: none;
}

#delete-cancel {
    background-color: var(--color-gray-lighter); /* Your style */
    color: var(--color-blue-dark);
}
#delete-confirm {
    background-color: var(--color-red); /* Your style */
    color: var(--color-off-white);
}


/* --- Toast Utility --- */
.toast-message {
    position: fixed;
    bottom: 1.25rem; /* bottom-5 */
    right: 1.25rem; /* right-5 */
    padding: 1rem; /* p-4 */
    border-radius: 0.5rem; /* rounded-lg */
    color: var(--color-off-white);
    z-index: 50;
    transform: translateY(2.5rem); /* translate-y-10 */
    opacity: 0;
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}
.toast-message.is-visible {
    transform: translateY(0);
    opacity: 1;
}
/* State classes from JS */
.toast-info { background-color: var(--color-off-white); } /* bg-blue-500 */
.toast-success { background-color: var(--color-green); } /* bg-green-500 */
.toast-error { background-color: var(--color-red); } /* bg-red-500 */

/* --- Custom scrollbar (Your Styles) --- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: var(--color-yellow); border-radius: 3px; }
::-webkit-scrollbar-track { background: var(--color-blue-dark); }


/* --- *** NEW: VIEW TRANSACTIONS STYLES *** --- */

/* --- View Transactions Button --- */
.view-transactions-btn {
    background-color: var(--color-off-white);
    border-top: 1px solid var(--color-blue-dark);
    border-bottom: 0;
    border-left:0;
    border-right:0;
    border-radius: 0;
    color: var(--color-blue-dark);
    font-family: var(--font-family-body);
    font-size: var(--font-size-small-button); /* Smaller than other buttons */
    width: 100%;
    padding: 0.25rem 1rem; /* Less vertical padding */
    margin-top: 1rem; /* Space above it */
    text-transform: uppercase;
}

/* --- View Transactions Modal --- */
#modal-category-name {
    font-family: var(--font-family-body);
    font-size: var(--font-size-h2);
    text-align: center;
    text-transform: uppercase;
    color: var(--color-blue-dark);
    margin-top: 0;
    margin-bottom: 1rem;
}

#modal-transactions-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem; /* Tighter spacing */
    max-height: 400px;
    overflow-y: auto;
    /* Remove base scrollable-list gap */
    gap: 0.5rem;
}

/* Remove default gap from base class */
.scrollable-list#modal-transactions-list {
    gap: 0.5rem;
}

.modal-tx-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0.75rem;
    border-radius: 0.25rem;
}

.modal-tx-desc {
    font-family: var(--font-family-data);
    font-size: var(--font-size-data);
    color: var(--color-blue-dark);
    white-space: normal;
    word-break: break-word;
    padding-right: 1rem;
}

.modal-tx-date {
    font-family: var(--font-family-data);
}

.modal-tx-amount {
    font-family: var(--font-family-data);
    font-size: var(--font-size-data);
    white-space: nowrap; /* Keep amount on one line */
}

.modal-tx-amount.type-expense {
    color: var(--color-red) !important;
}

.modal-tx-amount.type-reimbursement {
    color: var(--color-blue-dark) !important
}

/* --- Styles for Transaction Swipe-to-Delete --- */

.transaction-swipe-wrapper {
    position: relative;
    background-color: var(--color-red); /* Red 'delete' background */
    border-radius: 0; /* Match card */
    touch-action: pan-y;
    height: 3rem;
}

/* The 'DELETE' text shown behind */
.transaction-swipe-wrapper::before {
    content: 'DELETE';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-off-white);
    font-family: var(--font-family-data);
    font-weight: bold;
    font-size: var(--font-size-label);
    z-index: 0;
}

/* Main container for the interaction */
        #delete-container {
            position: relative;
            width: 90%;
            max-width: 300px; /* Narrower for vertical swipe */
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 2rem;
            border-radius: 1.5rem;
            height: 70vh; /* Make it taller */
            max-height: 800px;
        }

        /* SVG container holding the path */
        #path-svg {
            width: 100%;
            height: 100%; /* Take full height of container */
            overflow: visible;
        }

        /* The visible path */
        #path-track {
            fill: none;
            stroke: var(--color-yellow); /* Path color */
            stroke-width: 10;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

        /* The invisible "hotspot" path for detection. */
        #path-hotspot {
            fill: none;
            stroke: rgba(0, 0, 0, 0.02);
            stroke-width: 40;
            stroke-linecap: round;
            stroke-linejoin: round;
            pointer-events: stroke;
        }

        /* The target circle at the end of the path */
        #path-target {
            fill: var(--color-yellow);
            opacity: 0.5;
        }

        /* The draggable circle (handle) */
        #handle {
            position: absolute;
            width: 40px;
            height: 40px;
            background-color: var(--color-off-white);
            border-radius: 50%;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
            cursor: grab;
            z-index: 10;
            transform: translate(-50%, -50%);
            transition: top 0.2s ease, left 0.2s ease;
        }

        #handle:active {
            cursor: grabbing;
            transform: translate(-50%, -50%) scale(1.1);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
        }

        /* Informational text */
        #message {
            margin-top: 2rem;
            font-size: 1.2rem;
            font-weight: 600;
            text-align: center;
            min-height: 1.5em;
            font-family: var(--font-family-body);
            font-weight: normal;
            font-size: var(--font-size-h2);
        }
        
        /* Make the new modal backdrop red and remove the blur */
        #swipe-delete-backdrop {
            background-color: var(--color-red);
            backdrop-filter: none;
        }

        /* State for when the delete is confirmed */
        #delete-container.confirmed {
            opacity: 0;
            transform: scale(0.9);
            transition: opacity 0.5s ease, transform 0.5s ease;
        }
        
        
        /*------------------------------MEDIA QUERIES------------------------------*/
        
/* --- Desktop Layout (PC-weergave) --- */
@media (min-width: 1024px) {

    main {
        display: grid;
        grid-template-columns: 1fr 1fr; /* 2 kolommen */
        align-items: start;
        
        /* DIT IS DE TRUC: maak hele kleine 'basis-rijen' */
        grid-auto-rows: 10px; 
    }

    /* --- KOLOM 1 (LINKS) --- */
    #overview-card { grid-column: 1; }
    #log-income-container { grid-column: 1; }
    #month-end-card { grid-column: 1; }
    #savings-container { grid-column: 1; }
    
    /* --- KOLOM 2 (RECHTS) --- */
    #your-categories-card { grid-column: 2; grid-row-start: 1;}
    #recent-transactions-container { grid-column: 2; }
}