/* =========================================================
    1. THEME VARIABLES (Consistent Light Green Theme)
========================================================= */
:root {
    --color-primary: #8BC34A; /* Light Green Accent */
    --color-primary-dark: #689F38; 
    --color-background-light: #f4f6f9; /* Off-white base */
    --color-gradient-top: #F0FFF0; /* Very light, subtle green for gradient top */
    --color-gradient-bottom: #E8F5E9; /* Slightly darker light green for gradient bottom */
    --color-card-bg: #ffffff; /* White for forms/tables */
    --color-text-dark: #2c3e50;
}

/* =========================================================
    2. BODY & BASE STYLES (Clean Light Green Gradient)
========================================================= */
body {
    margin: 0;
    font-family: 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    color: var(--color-text-dark);
    
    /* Modern, subtle light green background gradient */
    background-color: var(--color-gradient-top);
    background-image: linear-gradient(to bottom, var(--color-gradient-top), var(--color-gradient-bottom));
    
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    background-size: cover;
    
    /* Maintain fade-in animation, but comment out or define properly if needed */
    /* animation: fadeInAnimation ease 1s; */
    /* animation-fill-mode: forwards; */
}

/* =========================================================
    3. MODERN LOADING SPINNER 1: LDS-ELLIPSIS (Light Green)
========================================================= */
.lds-ellipsis {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
    /* Center the animation within its container */
    transform: scale(0.8); 
}
.lds-ellipsis div {
    position: absolute;
    top: 33px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    /* Use the primary light green theme color */
    background: var(--color-primary); 
    animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.lds-ellipsis div:nth-child(1) {
    left: 8px;
    animation: lds-ellipsis1 0.6s infinite;
}
.lds-ellipsis div:nth-child(2) {
    left: 8px;
    animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(3) {
    left: 32px;
    animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(4) {
    left: 56px;
    animation: lds-ellipsis3 0.6s infinite;
}
/* Keyframes remain functional, but can be moved to the end for organization */
@keyframes lds-ellipsis1 {
    0% { transform: scale(0); }
    100% { transform: scale(1); }
}
@keyframes lds-ellipsis3 {
    0% { transform: scale(1); }
    100% { transform: scale(0); }
}
@keyframes lds-ellipsis2 {
    0% { transform: translate(0, 0); }
    100% { transform: translate(24px, 0); }
}

/* =========================================================
    4. MODERN LOADING SPINNER 2: LOADER (Light Green Accent)
========================================================= */
.loader {
    /* Subtle background border */
    border: 10px solid var(--color-border-light); 
    border-radius: 50%;
    
    /* Use light green accent for the moving border */
    border-top: 10px solid var(--color-primary); 
    border-right: 10px solid var(--color-primary);
    border-bottom: 10px solid var(--color-primary); 
    border-left: 10px solid var(--color-primary-dark); /* Subtle contrast */
    
    width: 60px; /* Reduced size for modern, cleaner look */
    height: 60px;
    
    /* Animation definition cleanup */
    animation: spin 1s linear infinite; 
    
    /* Optional: Remove specific vendor prefixes if targeting modern browsers */
    /* -webkit-animation: spin 1s linear infinite; */ 
}

/* Keyframes for the generic 'loader' (spin) */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* =========================================================
    5. GENERAL STYLES (Cleaned up)
========================================================= */
table {
    /* Use white background for tables as defined in professional themes */
    background-color: var(--color-card-bg);
}
form {
    /* Use white background for forms as defined in professional themes */
    background-color: var(--color-card-bg);
    padding: 15px; /* Slightly increased padding */
    border-radius: 4px;
}
.unread {
    /* Maintain readability and focus */
    font-weight: 700; 
    color: var(--color-text-dark); /* Ensure dark text */
}

/* Optional: If you use the older Safari prefix, re-enable this */
/*
@-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}
*/