/* Page Background */
body {
    background-color: #ffffff; /* White background for the page */
    color: #333333; /* Dark text for readability on white background */
    margin: 0;
    min-height: 100vh;
}

/* Header */
.site-header {
    width: 100%;
    background-color: #ffffff; /* White background to match page */
    border-bottom: 1px solid #BAE6FD; /* Light Cyan border */
    position: fixed;
    top: 0;
    left: 0;
    z-index: 900; /* Below side-panel (1000) but above content */
    padding: 10px 0;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}

.header-content {
    max-width: 1200px; /* Constrain content width for readability */
    margin: 0 auto; /* Center the content */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 15px;
}

.app-name {
    font-size: 1.5rem;
    color: #1E3A8A; /* Deep Blue */
    margin: 0;
}

.auth-links {
    display: flex;
    gap: 15px;
}

.auth-link {
    color: #1E3A8A; /* Deep Blue */
    text-decoration: none;
    font-size: 1rem;
    transition: color 0.2s;
}

    .auth-link:hover {
        color: #60A5FA; /* Bright Blue on hover */
    }

/* Side Panel Menu */
.side-panel {
    position: fixed;
    top: 60px; /* Below header */
    left: -250px;
    width: 250px;
    height: calc(100% - 60px); /* Adjust height to account for header */
    background-image: url('/images/background.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #8B5CF6; /* Fallback color */
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.3);
    transition: left 0.3s ease-in-out;
    z-index: 1000;
    overflow-y: auto; /* Allow scrolling if menu is too long */
    overflow-x: hidden; /* Prevent horizontal overflow */
}

    .side-panel.active {
        left: 0; /* Slide in */
    }

    /* Menu Items */
    .side-panel ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .side-panel li {
        border-bottom: 1px solid #BAE6FD; /* Light Cyan */
    }

/* Main Groups (e.g., Admin, AR) */
.folder-toggle {
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    padding: 15px; /* Base padding */
    color: #1E3A8A; /* Deep Blue for main groups */
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255, 255, 255, 0.6); /* Semi-transparent white background */
    transition: background-color 0.2s, color 0.2s;
}

    .folder-toggle:hover {
        background-color: #60A5FA; /* Bright Blue */
        color: #ffffff; /* White on hover */
    }

    .folder-toggle .toggle-icon {
        color: #1E3A8A; /* Match main group color */
        transition: transform 0.2s, color 0.2s;
    }

    .folder-toggle:hover .toggle-icon {
        color: #ffffff; /* White on hover */
    }

/* Sub-Groups (e.g., Roles, Invoicing) */
.sub-folder-toggle {
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    padding: 15px 15px 15px 30px; /* Indent by adding left padding */
    color: #ffffff; /* White for sub-groups */
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255, 255, 255, 0.6); /* Semi-transparent white background */
    transition: background-color 0.2s, color 0.2s;
}

    .sub-folder-toggle:hover {
        background-color: #60A5FA; /* Bright Blue */
        color: #ffffff; /* White on hover */
    }

    .sub-folder-toggle .toggle-icon {
        color: #ffffff; /* Match sub-group color */
        transition: transform 0.2s, color 0.2s;
    }

    /* Toggle Icon Rotation */
    .folder-toggle[aria-expanded="true"] .toggle-icon,
    .sub-folder-toggle[aria-expanded="true"] .toggle-icon {
        transform: rotate(180deg);
    }

/* Sub-Menu (Collapsed by Default) */
.sub-menu {
    display: none; /* Collapsed by default */
    padding-left: 0; /* No additional padding on the ul */
}

.sub-sub-menu {
    display: none; /* Collapsed by default */
    padding-left: 15px; /* Indent sub-sub-items */
}

    .sub-menu.active, .sub-sub-menu.active {
        display: block; /* Show when active */
    }

/* Menu Links (Page Options) */
.side-panel .nav-link, .side-panel .sub-link, .side-panel .sub-sub-link {
    display: block;
    padding: 15px;
    color: #6D28D9; /* Purple for page options */
    text-decoration: none;
    font-size: 1.1rem;
    transition: background-color 0.2s, color 0.2s;
    background: rgba(255, 255, 255, 0.6); /* Semi-transparent white background for readability */
}

.side-panel .sub-link {
    padding-left: 45px; /* Further indent sub-links */
}

.side-panel .sub-sub-link {
    padding-left: 60px; /* Further indent sub-sub-links */
}

    .side-panel .nav-link:hover, .side-panel .sub-link:hover, .side-panel .sub-sub-link:hover {
        background-color: #60A5FA; /* Bright Blue */
        color: #ffffff; /* White on hover */
    }

/* Menu Toggle (Right Arrow Only When Collapsed) */
.menu-toggle {
    position: fixed;
    top: 75px; /* Below header (60px height + padding) */
    left: 15px;
    background: rgba(255, 255, 255, 0.8); /* Semi-transparent background for visibility */
    border: none;
    cursor: pointer;
    z-index: 1100;
    padding: 5px;
    border-radius: 5px;
    font-size: 1.2rem;
    color: #1E3A8A; /* Deep Blue */
    transition: color 0.2s, background 0.2s;
    width: 34px; /* Fixed width to maintain clickable area */
    height: 34px; /* Fixed height to maintain clickable area */
}

    /* Hide the arrow when the menu is open */
    .menu-toggle.active i {
        display: none; /* Hide the right arrow when the menu is open */
    }

    .menu-toggle:hover {
        color: #60A5FA; /* Bright Blue on hover */
        background: rgba(255, 255, 255, 1); /* Slightly more opaque on hover */
    }

/* Main Content Adjustments */
.main-content {
    padding: 20px;
    min-height: calc(100vh - 60px - 60px); /* Adjust for header and footer */
    margin-left: 0; /* Default: no margin when menu is closed */
    margin-top: 60px; /* Push content below header */
    transition: margin-left 0.3s ease-in-out; /* Smooth transition for margin change */
}

/* Shift content right when menu is open */
.side-panel.active ~ .main-content {
    margin-left: 250px; /* Shift content by the width of the menu (250px) */
}

/* Content Wrapper */
.content-wrapper {
    background: #ffffff; /* White background for content */
    padding: 20px;
    border-radius: 8px;
    max-width: 800px; /* Default width for most pages */
    margin-left: 0; /* Left-justify */
    margin-right: auto; /* Allow right margin to stretch */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}

/* Footer Adjustments */
.footer {
    background: #ffffff; /* White background */
    padding: 10px 0;
    position: relative;
    bottom: 0;
    width: 100%;
}

    .footer a {
        color: #60A5FA; /* Bright Blue for links */
    }

/* Ensure text readability on white background */
h1, h2, h3, h4, h5, h6, p, a {
    color: #333333; /* Dark text for readability on white background */
}

#calendar {
    max-width: 1100px;
    margin: 40px auto;
}

.tui-full-calendar-month, .tui-full-calendar-week, .tui-full-calendar-day {
    background-color: white;
    border: 1px solid #e5e5e5;
}

.tui-full-calendar-schedule {
    cursor: pointer;
    border-radius: 5px;
}

.modal-content {
    border-radius: 10px;
}

.modal-header {
    background-color: #f8f9fa;
}

.btn-primary {
    background-color: #3788d8;
    border-color: #3788d8;
}