/* General Body and Layout */
body {
    font-family: 'Inter', sans-serif; /* Using Inter font as recommended */
    margin: 0;
    padding: 0;
    overflow: hidden; /* Prevent body scroll, main content handles it */

    /* Light Mode Variables (Default) */
    --bg-primary: #a3a3a3; /* bg-gray-100 */
    --bg-secondary: #ffffff; /* bg-white */
    --bg-sidebar: #171923; /* bg-gray-800 */
    --text-primary: #1f2937; /* text-gray-800 */
    --text-secondary: #4b5563; /* text-gray-700 */
    --text-sidebar: #ffffff; /* text-white */
    --border-color: #303030; /* border-gray-300 */
    --input-bg: #f9fafb; /* bg-gray-50 */
    --input-text: #1f2937; /* text-gray-800 */
    --modal-bg: #ffffff; /* bg-white */
    --modal-text: #1f2937; /* text-gray-800 */
    --shadow-color: rgba(0, 0, 0, 0.4);
    --fc-daygrid-event-dot-color: #90cdf4; /* Default FullCalendar event dot color */

    /* Day Status Bar Colors (Light Mode) - These are now used for fc-event background/border */
    --status-gearbeitet: #009933; /* blue-500 */
    --status-urlaub: #0066ff; /* amber-500 */
    --status-krank: #ff9900; /* red-500 */
    --status-fortbildung: #8b5cf6; /* violet-500 */
    --status-holiday: #ff3300; /* teal-500 */


    background-color: var(--bg-primary);
    color: var(--text-primary);
    transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition */
}

/* Dark Mode Overrides */
body.dark-mode {
    --bg-primary: #1a202c; /* dark gray background */
    --bg-secondary: #2d3748; /* darker gray for calendar */
    --bg-sidebar: #171923; /* even darker for sidebar */
    --text-primary: #ffffff; /* light gray text */
    --text-secondary: #ffffff; /* changed to white for better readability in dark mode */
    --text-sidebar: #ffffff; /* light gray text for sidebar */
    --border-color: #4a5568; /* darker border */
   --input-bg: #f9fafb; /* bg-gray-50 */
    --input-text: #1f2937; /* text-gray-800 */
     --modal-bg: #ffffff; /* bg-white */
    --modal-text: #1f2937; /* text-gray-800 */
    --shadow-color: rgba(0, 0, 0, 0.4);
    --fc-daygrid-event-dot-color: #90cdf4; /* Lighter dot color for dark mode */

    /* Day Status Bar Colors (Dark Mode) - These are now used for fc-event background/border */
    --status-gearbeitet: #009933; /* lighter blue */
    --status-urlaub: #0066ff; /* lighter amber */
    --status-krank: #ff9900; /* lighter red */
    --status-fortbildung: #a78bfa; /* lighter violet */
    --status-holiday: #ff3300; /* lighter teal */

    /* Debugging: Add a visible border to confirm dark-mode class is applied */
    /* border: 5px solid red !important; */ /* Uncomment this line for debugging */
}


/* Sidebar Styling */
#sidebar {
    width: 320px; /* Default desktop width */
    left: 0;
    top: 0;
    bottom: 0;
    padding: 1.5rem; /* p-6 */
    background-color: var(--bg-sidebar);
    color: var(--text-sidebar);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.3s ease-in-out;
    box-shadow: 0 4px 6px var(--shadow-color); /* shadow-lg */
    z-index: 20; /* z-20 */
}

#sidebar.closed {
    left: -320px; /* Hide sidebar off-screen */
}

/* Main Content Area */
#mainContent {
    margin-left: 320px; /* Offset for sidebar */
    flex-grow: 1;
    padding: 1.5rem; /* p-6 */
    transition: all 0.3s ease-in-out;
    overflow-y: auto; /* Allow scrolling for main content */
    height: 100vh; /* Take full viewport height */
    box-sizing: border-box; /* Include padding in height */
    background-color: var(--bg-primary);
}

#mainContent.sidebar-closed {
    margin-left: 0; /* No offset when sidebar is closed */
}

/* Sidebar Toggle Button */
#sidebarToggleBtn {
    position: fixed;
    top: 1rem; /* top-4 */
    left: 335px; /* Adjust based on sidebar width + padding */
    z-index: 30; /* z-30 */
    padding: 0.75rem; /* p-3 */
    background-color: #2563eb; /* bg-blue-600 */
    color: white;
    border-radius: 9999px; /* rounded-full */
    box-shadow: 0 4px 6px var(--shadow-color); /* shadow-lg */
    transition: all 0.3s ease-in-out;
    outline: none; /* focus:outline-none */
    display: flex;
    align-items: center;
    justify-content: center;
}

#sidebarToggleBtn.closed {
    left: 1rem; /* Move to left edge when sidebar is closed */
}

/* Calendar Styling */
#calendar {
    background-color: var(--bg-secondary);
    padding: 1.5rem; /* p-6 */
    border-radius: 0.5rem; /* rounded-lg */
    box-shadow: 0 10px 15px -3px var(--shadow-color), 0 4px 6px -2px var(--shadow-color); /* shadow-xl */
    height: calc(100vh - 3rem); /* Adjust height to fill remaining space */
    box-sizing: border-box; /* Include padding in height */
}

/* FullCalendar specific overrides for better visual integration */
.fc .fc-toolbar-title {
    font-size: 1.75rem; /* text-2xl */
    font-weight: 700; /* font-bold */
    color: var(--text-primary);
}

.fc .fc-button {
    background-color: #4b5563; /* bg-gray-600 */
    border-color: #4b5563;
    color: white;
    border-radius: 0.375rem; /* rounded-md */
    padding: 0.5rem 1rem; /* py-2 px-4 */
    font-weight: 600; /* font-semibold */
    transition: background-color 0.2s ease-in-out;
}

.fc .fc-button:hover {
    background-color: #374151; /* hover:bg-gray-700 */
    border-color: #374151;
}

.fc .fc-button-primary:not(:disabled).fc-button-active {
    background-color: #2563eb; /* bg-blue-600 */
    border-color: #2563eb;
}

/* FullCalendar day numbers and event dots */
.fc-daygrid-day-number {
    color: var(--text-secondary); /* Adjusted for dark mode */
}

.fc-daygrid-event-dot {
    background-color: var(--fc-daygrid-event-dot-color) !important; /* Use variable for event dot with !important */
}

.fc-daygrid-day {
    position: relative; /* Needed for absolute positioning of status bar */
    border-radius: 0.375rem; /* rounded-md */
    overflow: hidden; /* Hide overflow for status bar */
}

.fc-daygrid-day-number {
    position: relative;
    z-index: 1; /* Ensure number is above status bar */
    font-weight: 600;
    color: var(--text-secondary); /* Use variable for day number text */
}

/* Daily Overtime Display in Calendar Cells */
.daily-overtime {
    font-size: 0.75rem; /* text-xs */
    font-weight: 500;
    margin-top: 0.25rem;
    padding: 0.1rem 0.2rem;
    border-radius: 0.25rem;
    text-align: center;
    position: relative;
    z-index: 1; /* Ensure text is above status bar */
}

.daily-overtime.positive {
    color: #10b981; /* green-500 */
}

.daily-overtime.negative {
    color: #ef4444; /* red-500 */
}

/* Day Status Bar (DELETED - now using fc-event) */
/* .day-status-bar { ... } */

/* Use CSS variables for status bar colors */
/* These are now applied directly to .fc-event classes */


/* FullCalendar Event Styling (UPDATED) */
/* These rules target the actual FullCalendar event elements */
.fc-event.gearbeitet { background-color: var(--status-gearbeitet) !important; border-color: var(--status-gearbeitet) !important; }
.fc-event.urlaub { background-color: var(--status-urlaub) !important; border-color: var(--status-urlaub) !important; }
.fc-event.krank { background-color: var(--status-krank) !important; border-color: var(--status-krank) !important; }
.fc-event.fortbildung { background-color: var(--status-fortbildung) !important; border-color: var(--status-fortbildung) !important; }
.fc-event.holiday { background-color: var(--status-holiday) !important; border-color: var(--status-holiday) !important; }

/* Ensure event title and time are visible */
.fc-event-title, .fc-event-time {
    color: white !important; /* White text for better contrast on colored bars */
}
/* For background events, the text should be primary text color */
.fc-event-title.fc-event-title-empty { /* Targets background events without explicit title */
    color: var(--text-primary) !important;
}
.fc-event-background .fc-event-title,
.fc-event-background .fc-event-time {
    color: var(--text-primary) !important;
}


/* Overtime Display in Sidebar */
#overtimeDisplay.positive-overtime {
    color: #10b981; /* green-500 */
}

#overtimeDisplay.negative-overtime {
    color: #ef4444; /* red-500 */
}

/* Custom Modal Styling */
#customModalOverlay {
    background-color: rgba(31, 41, 55, 0.75); /* bg-gray-800 with opacity */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 50;
    visibility: hidden; /* Hidden by default */
    opacity: 0;
    transition: visibility 0s, opacity 0.3s ease-in-out;
}

#customModalOverlay.visible {
    visibility: visible;
    opacity: 1;
}

#customModalOverlay > div {
    background-color: var(--modal-bg);
    padding: 2rem; /* p-8 */
    border-radius: 0.5rem; /* rounded-lg */
    box-shadow: 0 20px 25px -5px var(--shadow-color), 0 8px 10px -6px var(--shadow-color); /* shadow-2xl */
    width: 100%;
    max-width: 28rem; /* max-w-sm */
    text-align: center;
    color: var(--modal-text);
}

/* Entry Form Styling */
#entryForm {
    background-color: rgba(31, 41, 55, 0.75); /* bg-gray-800 with opacity */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 50;
}

#entryForm > div {
    background-color: var(--modal-bg);
    padding: 2rem; /* p-8 */
    border-radius: 0.5rem; /* rounded-lg */
    box-shadow: 0 20px 25px -5px var(--shadow-color), 0 8px 10px -6px var(--shadow-color); /* shadow-2xl */
    width: 100%;
    max-width: 32rem; /* max-w-md */
    color: var(--modal-text);
    top: 50%; /* Add this line */
    left: 50%; /* Add this line */
    transform: translate(-50%, -50%); /* Add this line */
    position: fixed; /* Ensure it's fixed */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    #sidebar {
        width: 100%;
        left: -100%; /* Hidden by default on mobile */
        z-index: 40; /* Higher z-index to cover main content */
        box-shadow: none; /* No shadow when off-screen */
    }

    #sidebar.open-mobile {
        left: 0; /* Show sidebar on mobile */
        box-shadow: 0 4px 6px var(--shadow-color); /* Add shadow when open */
    }

    #sidebar.closed {
        left: -100%;
    }

    #mainContent {
        margin-left: 0; /* Always 0 on mobile */
        padding-top: 4rem; /* Make space for toggle button */
    }

    #mainContent.sidebar-closed {
        margin-left: 0;
    }

    #sidebarToggleBtn {
        left: 1rem; /* Always on the left edge on mobile */
        top: 1rem;
    }

    #sidebarToggleBtn.open-mobile {
        left: calc(100% - 4rem); /* Move to right when sidebar is open */
    }
}

/* General button styling */
button {
    @apply w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-md transition-colors duration-200 shadow-md;
    margin-top: 0.75rem; /* mt-3 */
}

button#registerBtn {
    @apply bg-green-600 hover:bg-green-700;
}

button#logoutBtn {
    @apply bg-red-600 hover:bg-red-700;
}

button#changePasswordBtn {
    @apply bg-yellow-600 hover:bg-yellow-700;
}

button#deleteUserBtn {
    @apply bg-red-600 hover:bg-red-700;
}

button#clearLocalStorageBtn {
    @apply bg-red-600 hover:bg-red-700;
}

button#pdfExportBtn {
    @apply bg-purple-600 hover:bg-purple-700;
}

button#saveEntryBtn {
    @apply bg-blue-600 hover:bg-blue-700;
}

button#deleteEntryBtn {
    @apply bg-red-600 hover:bg-red-700;
}

button#cancelEntryBtn {
    @apply bg-gray-400 hover:bg-gray-500 text-gray-800;
}

button#modalConfirmBtn,
button#modalAlertBtn {
    @apply bg-blue-600 hover:bg-blue-700 text-white;
}

button#modalCancelBtn {
    @apply bg-gray-400 hover:bg-gray-500 text-gray-800;
}

/* Input and Select styling */
input[type="text"],
input[type="password"],
input[type="number"],
input[type="time"],
select {
    @apply w-full p-2 rounded-md border focus:outline-none focus:ring-2 focus:ring-blue-500;
    margin-bottom: 0.75rem; /* mb-3 */
    background-color: var(--input-bg);
    border-color: var(--border-color);
    color: var(--input-text);
}

/* Specific sidebar input/select styles to override general ones for dark background */
#sidebar input[type="text"],
#sidebar input[type="password"],
#sidebar input[type="number"],
#sidebar select {
    /* These are specific to sidebar's dark background, ensure they use dark-mode variables */
    background-color: var(--input-bg); /* Use the variable */
    border-color: var(--border-color); /* Use the variable */
    color: var(--input-text); /* Use the variable */
}

/* Label styling */
label {
    @apply block text-sm font-medium mb-1;
    color: var(--text-secondary); /* Use text-secondary for labels */
}

#sidebar label {
    color: var(--text-sidebar); /* Specific for sidebar labels */
}

/* Overtime display specific styling */
.overtime-display {
    background-color: var(--bg-sidebar); /* Use sidebar background for consistency */
    @apply p-4 rounded-lg shadow-inner; /* Removed text-white here to use var(--text-sidebar) */
    color: var(--text-sidebar);
}

.overtime-display strong {
    @apply text-lg font-bold;
}

.overtime-display #overtimeDisplay {
    @apply text-2xl font-extrabold mt-2;
}

.overtime-display .summary-item {
    @apply text-base mt-1;
}

/* Dark Mode Toggle Button Specific Styling */
#darkModeToggleBtn {
    background-color: var(--bg-secondary); /* Make it stand out against sidebar */
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}
body.dark-mode #darkModeToggleBtn {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}