/* Import Google Fonts for consistent typography */
@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;700&display=swap');

/* Global styles for body and html */
/* Ensures the default font and layout settings are applied throughout the page */
body, html {
    font-family: 'Rubik', sans-serif; /* Sets the global font */
    height: 100%; /* Ensures full viewport height */
    margin: 0; /* Removes default browser margins */
    display: flex; /* Enables flexbox layout for easy alignment */
    flex-direction: column; /* Aligns content vertically */
}

/* Consistent font for buttons and placeholders */
button, .styled-input::placeholder, 
.styled-textarea::placeholder, .styled-textarea {
    font-family: 'Rubik', sans-serif; /* Ensures uniform font styling */
}

/* Main layout container */
/* Combines sidebar and main content areas */
.main-container {
    display: flex; /* Horizontal layout for sidebar and content */
    flex: 1; /* Fills available space */
    flex-direction: row; /* Aligns children horizontally */
    height: 100vh; /* Ensures full viewport height */
    overflow: hidden; /* Prevents scrolling outside the container */
}

/* Sidebar styling */
/* Vertical navigation area with scroll support */
.sidebar {
    width: 250px; /* Fixed width for sidebar */
    background-color: #f1ede6; /* Neutral background color */
    padding: 15px; /* Inner spacing */
    overflow-y: auto; /* Enables vertical scrolling */
    height: 100%; /* Full height to match the viewport */
    box-sizing: border-box; /* Includes padding in the width and height */
}

/* Sidebar list styles */
/* Organizes navigation links */
.sidebar ul {
    list-style: none; /* Removes default bullet points */
    padding: 0; /* Removes default padding */
}

.sidebar li {
    margin: 10px 0; /* Adds spacing between list items */
}

/* Sidebar section titles */
/* Visually separates different sections */
.sidebar-section-title {
    font-size: 1rem; /* Standard size for readability */
    font-weight: bold; /* Highlights section titles */
    color: #555; /* Muted text color */
    margin: 10px 0; /* Spacing around the title */
    padding: 10px 15px; /* Inner spacing for better readability */
    background-color: #ebe3db; /* Subtle background color */
    border-radius: 4px; /* Rounded corners */
    text-transform: uppercase; /* Capitalizes text */
    letter-spacing: 0.05rem; /* Slight spacing between letters */
    text-align: left; /* Aligns text to the left */
}

/* Sidebar links */
/* Styling for navigational links */
.sidebar a {
    text-decoration: none; /* Removes underline */
    color: #333; /* Dark text color */
    font-weight: bold; /* Emphasizes links */
    display: block; /* Ensures full clickable area */
    padding: 10px 15px; /* Adds inner spacing */
    border-radius: 4px; /* Rounds corners */
    transition: background-color 0.3s ease, color 0.3s ease; /* Smooth hover effects */
}

.sidebar a:hover {
    background-color: #d1bc8a; /* Highlighted background color on hover */
    color: #000; /* Darker text color on hover */
}

/* Sidebar dividers */
/* Thin lines to separate sections visually */
.sidebar .divider {
    height: 1px; /* Thin horizontal line */
    background-color: #ddd; /* Light gray color */
    margin: 5px 0; /* Spacing around the divider */
    opacity: 0.6; /* Slight transparency */
    width: calc(100% - 30px); /* Ensures padding alignment */
    margin-left: 15px; 
    margin-right: 15px; 
}

/* Optional scrollbar styling for sidebar */
/* Matches the design aesthetics */
.sidebar::-webkit-scrollbar {
    width: 10px; /* Scrollbar width */
}

.sidebar::-webkit-scrollbar-thumb {
    background-color: #d1bc8a; /* Scrollbar color */
    border-radius: 5px; /* Rounds scrollbar edges */
}

.sidebar::-webkit-scrollbar-thumb:hover {
    background-color: #b5a079; /* Hover effect for scrollbar */
}

/* Main content area */
/* Primary workspace with scrolling support */
.content {
    flex: 1; /* Fills the remaining space */
    padding: 20px; /* Inner spacing */
    background-color: #f4f4f4; /* Light background */
    overflow: auto; /* Enables scrolling for large content */
}

/* Logo and navbar styling */
/* Ensures consistent design for the header area */
.logo {
    font-size: 24px; /* Large font size for emphasis */
    color: #fff; /* White text color */
    font-weight: bold; /* Highlights the logo text */
}

#nav-logo {
    margin-top: 5%; /* Adds spacing above the logo */
    margin-bottom: 1%; /* Adds spacing below the logo */
    max-height: 50px; /* Limits logo height */
    width: auto; /* Maintains aspect ratio */
}

/* Navbar container */
/* Fixed navigation bar at the top */
.navbar {
    display: flex; /* Aligns items horizontally */
    justify-content: space-between; /* Distributes items evenly */
    align-items: center; /* Centers items vertically */
    background-color: #ebe3db; /* Neutral background color */
    padding: 10px 20px; /* Inner spacing */
    position: sticky; /* Sticks to the top on scroll */
    top: 0; /* Position relative to the top */
    font-weight: bold; /* Highlights navbar text */
    z-index: 1000; /* Ensures visibility over content */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}

/* Navbar links */
/* Styling for navigational items */
.nav-links {
    list-style: none; /* Removes default bullet points */
    padding: 0; /* Removes default padding */
    margin: 0; /* Removes default margin */
    display: flex; /* Aligns items horizontally */
    align-items: center; /* Centers items vertically */
    gap: 15px; /* Adds spacing between links */
}

.nav-links a {
    text-decoration: none; /* Removes underline */
    color: #333; /* Dark text color */
    font-weight: bold; /* Emphasizes links */
    padding: 10px 15px; /* Inner spacing for clickable area */
    border-radius: 4px; /* Rounds corners */
    transition: background-color 0.3s ease, color 0.3s ease; /* Smooth hover effects */
    cursor: pointer; /* Pointer cursor on hover */
}

.nav-links a:hover {
    background-color: #d1bc8a; /* Highlighted background color */
    color: #000; /* Darker text color */
}

.nav-links li {
    position: relative; /* Positions dropdown menus */
}

/* Dropdown Styling */

/* Dropdown container */
.dropdown-content {
    display: none; /* Initially hidden */
    position: absolute; /* Positioned relative to the parent */
    background-color: #f9f9f9; /* Light background for visibility */
    min-width: 200px; /* Minimum width for dropdown */
    border-radius: 6px; /* Smooth corners */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    z-index: 1000; /* Ensure it's above other elements */
    overflow: hidden; /* Prevent content overflow */
    margin-top: 10px; /* Spacing from parent */
    right: 0; /* Align to the right of the parent */
    padding: 0; /* Remove inner padding */
    animation: fadeIn 0.3s ease; /* Smooth fade-in animation */
}

/* Dropdown links */
.dropdown-content a {
    padding: 12px 10px; /* Inner spacing for clickable area */
    display: block; /* Block-level for full width */
    color: #333; /* Neutral text color */
    text-decoration: none; /* Remove underline */
    font-size: 0.95rem; /* Slightly smaller font size */
    transition: background-color 0.3s ease, color 0.3s ease; /* Smooth hover effects */
}

/* Hover effects for links */
.dropdown-content a:hover {
    background-color: #ebe3db; /* Highlighted background color */
    color: #000; /* Darker text color */
}

/* Icons in dropdown links */
.dropdown-content i {
    margin-right: 10px; /* Space between icon and text */
    font-size: 1rem; /* Icon size */
    vertical-align: middle; /* Align icon with text */
}

/* Nested links inside list items */
.dropdown-content li a {
    display: block; /* Block-level for full width */
    padding: 10px 15px; /* Spacing for better clickability */
    text-align: left; /* Align text to the left */
    color: #333; /* Neutral text color */
    font-size: 0.9rem; /* Slightly smaller font size */
    transition: background-color 0.3s ease, color 0.3s ease; /* Smooth hover effects */
}

/* Hover effects for nested links */
.dropdown-content li a:hover {
    background-color: #ebe3db; /* Highlighted background color */
    color: #000; /* Darker text color */
}

/* Display dropdown when active */
.dropdown.active .dropdown-content {
    display: block;
}

/* Hamburger menu styles */
.menu-toggle {
    display: none; /* Initially hidden */
}

.burger {
    display: none; /* Hidden for larger screens */
    cursor: pointer; /* Pointer cursor for interactivity */
    flex-direction: column; /* Stack lines vertically */
    gap: 5px; /* Spacing between lines */
}

.burger .line {
    width: 25px; /* Width of each line */
    height: 3px; /* Height of each line */
    background-color: #fff; /* White color for visibility */
}

@media screen and (max-width: 1024px){
    .burger {
        display: flex; /* Show burger menu on smaller screens */
    }

    .nav-links {
        display: none; /* Hidden by default */
        flex-direction: column; /* Stack links vertically */
        width: 100%; /* Full width */
       
        position: absolute; /* Position relative to the navbar */
        top: 80px; /* Space below the navbar */
        left: 0; /* Align to the left */
        background-color: #ebe3db; /* Sidebar-like background */
    }

    .menu-toggle:checked + .burger + .nav-links {
        display: flex; /* Show menu when toggle is checked */
    }

    .nav-links li {
        margin: 15px 0; /* Vertical spacing between links */
        text-align: center; /* Center-align text */
    }

    .dropdown-content {
        position: static; /* Remove absolute positioning */
        background-color: rgba(255, 255, 255, 0.2); /* Transparent background */
        border-radius: 6px; /* Rounded corners */
        margin-top: 10px; /* Space above dropdown */
        min-width: 100%; /* Full width dropdown */
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); /* Subtle shadow */
        border: 1px solid rgba(0, 0, 0, 0.1); /* Thin border */
    }

    .dropdown-content a {
        padding: 12px 15px; /* Spacing for better usability */
        display: block; /* Block-level for full width */
        color: #333; /* Neutral text color */
        text-decoration: none; /* Remove underline */
        font-size: 1rem; /* Standard font size */
        background-color: rgba(255, 255, 255, 0.1); /* Transparent background */
        border-bottom: 1px solid rgba(255, 255, 255, 0.4); /* Divider between links */
        transition: background-color 0.3s ease, color 0.3s ease; /* Smooth hover effect */
    }

    .dropdown-content a:hover {
        background-color: rgba(209, 188, 138, 0.5); /* Highlighted hover color */
        color: #000; /* Darker text color */
    }

    .dropdown-content a:last-child {
        border-bottom: none; /* Remove border for last item */
    }

    .dropdown-content li a {
        padding: 10px; /* Inner spacing */
        font-size: 1rem; /* Standard font size */
    }
}

/* Responsive styling for smaller screens */
@media screen and (max-width: 768px) {
    .sidebar {
        display: none; /* Hide sidebar */
    }
}

/* Divider styling for separation */
.divider {
    width: 80%; /* Narrower width for better aesthetics */
    height: 2px; /* Thin divider line */
    background-color: #ccc; /* Neutral color */
    margin: 20px 0; /* Spacing around divider */
    position: relative; /* Relative positioning for decorative element */
}

.divider::after {
    content: ''; /* Decorative line */
    display: block; /* Block-level element */
    width: 60px; /* Narrower width for decoration */
    height: 6px; /* Thicker line for emphasis */
    background-color: #d1bc8a; /* Accent color */
    position: absolute; /* Positioned within the divider */
    top: 50%; /* Centered vertically */
    left: 50%; /* Centered horizontally */
    transform: translate(-50%, -50%); /* Adjust position */
    border-radius: 3px; /* Rounded corners */
}

/* Footer styles */
.footer {
    background-color: #ebe3db; /* Neutral background */
    text-align: center; /* Center-align text */
    padding: 10px 0; /* Vertical padding */
    font-size: 14px; /* Standard font size */
    font-weight: bold; /* Emphasized text */
}

/* User form layout for account creation */
.user-form {
    display: flex; /* Flexbox layout */
    flex-direction: column; /* Stack elements vertically */
    max-width: 400px; /* Limit maximum width */
    margin: auto; /* Center the form */
    padding: 20px; /* Inner spacing */
    border: 1px solid #ddd; /* Thin border */
    border-radius: 8px; /* Rounded corners */
    background-color: #f9f9f9; /* Light background */
    width: 100%; /* Full width */
}

.user-form-container {
    display: flex; /* Flexbox layout */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    min-height: 100vh; /* Full height viewport */
}

.user-form label {
    margin-top: 10px; /* Space above labels */
    font-weight: bold; /* Highlight labels */
}

/* Input styling for user form */
.user-form input[type="text"],
.user-form input[type="password"] {
    padding: 10px; /* Inner spacing */
    margin-top: 5px; /* Space above inputs */
    border: 1px solid #ccc; /* Light border */
    border-radius: 4px; /* Rounded corners */
    font-size: 16px; /* Standard font size */
}

/* Fieldset styling in forms */
.user-form fieldset {
    margin-top: 15px; /* Space above fieldsets */
    padding: 10px; /* Inner spacing */
    border: 1px solid #ddd; /* Thin border */
    border-radius: 4px; /* Rounded corners */
}

/* Submit button styling */
.user-form button {
    margin-top: 15px; /* Space above button */
    padding: 10px; /* Inner spacing */
    background-color: #ebe3db; /* Neutral background */
    color: black; /* Dark text */
    font-weight: bold; /* Highlight button */
    border: none; /* No border */
    border-radius: 4px; /* Rounded corners */
    cursor: pointer; /* Pointer cursor for interactivity */
    font-size: 16px; /* Standard font size */
}

.user-form button:hover {
    background-color: #d1bc8a; /* Highlighted background color */
}

/* Back button styling */
.back-button {
    display: inline-block; /* Block layout with inline alignment */
    margin: 20px 0; /* Vertical spacing */
    padding: 10px 20px; /* Inner spacing */
    background-color: #ebe3db; /* Neutral background */
    color: black; /* Dark text color */
    font-weight: bold; /* Highlight button */
    border: none; /* No border */
    border-radius: 5px; /* Rounded corners */
    cursor: pointer; /* Pointer cursor for interactivity */
    font-size: 16px; /* Standard font size */
    transition: background-color 0.3s ease; /* Smooth hover transition */
    visibility: hidden; /* Initially hidden */
}

.back-button:hover {
    background-color: #d1bc8a; /* Highlighted hover color */
}

/* Responsive adjustments for sidebar and content */

/* Adjustments for medium screens */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    .sidebar {
        width: 200px; /* Reduced width for medium screens */
        padding: 10px; /* Decreased padding */
    }

    .sidebar ul {
        padding: 0; /* Remove additional padding */
    }

    .sidebar a {
        font-size: 0.9rem; /* Smaller font size for links */
        padding: 8px 10px; /* Reduced padding for links */
    }

    .sidebar-section-title {
        font-size: 0.9rem; /* Smaller font size for titles */
        padding: 6px 8px; /* Decreased padding for titles */
    }

    .divider {
        width: calc(100% - 20px); /* Adjust divider width */
        margin-left: 10px; /* Center the divider */
        margin-right: 10px;
    }

    .content {
        padding: 15px; /* Reduced padding for the main content */
    }

    .styled-table th, 
    .styled-table td {
        padding: 10px 8px; /* Reduced padding for table cells */
        font-size: 0.8rem; /* Smaller font size */
    }

    .styled-table {
        font-size: 0.9rem; /* Overall smaller font for the table */
    }
}

/* Responsive adjustments for smaller screens */
@media screen and (max-width: 768px) {
    .user-form {
        padding: 10px; /* Smaller padding for compact layout */
        border-radius: 6px; /* Slightly rounded corners */
        max-width: 90%; /* Adjusted form width */
    }

    .user-form label {
        font-size: 0.9rem; /* Reduced font size for labels */
    }

    .user-form input[type="text"], 
    .user-form input[type="password"] {
        font-size: 0.85rem; /* Smaller font size for inputs */
        padding: 8px; /* Compact input padding */
    }

    .user-form button {
        font-size: 0.9rem; /* Smaller button font */
        padding: 8px; /* Compact button padding */
    }

    .back-button {
        visibility: visible; /* Make the back button visible */
    }
}

/* Additional adjustments for medium screens */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    .user-form {
        max-width: 80%; /* Adjust form width */
        padding: 15px; /* Moderate padding */
    }

    .user-form label {
        font-size: 1rem; /* Standard font size for labels */
    }

    .user-form input[type="text"], 
    .user-form input[type="password"] {
        font-size: 1rem; /* Standard font size for inputs */
    }

    .user-form button {
        font-size: 1rem; /* Standard font size for buttons */
        padding: 10px; /* Standard button padding */
    }
}

/* Styling for the textarea element */
textarea {
    width: 100%; /* Full width within container */
    padding: 10px; /* Inner padding for readability */
    border: 1px solid #ccc; /* Light gray border */
    border-radius: 4px; /* Rounded corners */
    font-size: 1rem; /* Standard font size */
    resize: vertical; /* Allow vertical resizing */
    box-sizing: border-box; /* Include padding in size calculations */
}

/* Focus state for textarea */
textarea:focus {
    border-color: #d1bc8a; /* Highlighted border color */
    box-shadow: 0 0 5px rgba(209, 188, 138, 0.5); /* Subtle shadow effect */
    outline: none; /* Remove default focus outline */
}

/* Header (h2) styling */
h2 {
    font-size: 2rem; /* Large font size */
    font-weight: bold; /* Bold text */
    color: #333; /* Neutral dark text color */
    text-align: center; /* Center-align text */
    margin-bottom: 20px; /* Space below header */
    text-transform: uppercase; /* Convert text to uppercase */
    letter-spacing: 0.1rem; /* Slightly spaced letters */
    border-bottom: 3px solid #d1bc8a; /* Decorative underline */
    display: inline-block; /* Underline directly below text */
    padding-bottom: 10px; /* Space between text and underline */
    background: linear-gradient(to right, #ebe3db, #d1bc8a); /* Subtle gradient text effect */
    background-clip: text; /* Apply gradient to text only */
    -webkit-background-clip: text; /* WebKit-specific clipping */
    -webkit-text-fill-color: transparent; /* Make gradient visible */
}

/* Remove graphic fields for unlogged users */
.removed {
    display: none; /* Hide elements */
}