/* Basic table styling */
table {
    width: 100%; /* Set table width to 100% of its container */
    max-width: 50%; /* Set max-width to 100% to ensure it doesn't overflow */
    border-collapse: collapse; /* Collapse borders between cells */
    margin: 30px auto; /* Center the table and add space around */
    text-align: left; /* Align text to the left for readability */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Light shadow for form */
    overflow-x: auto; /* Enable horizontal scrolling if necessary */
    
}
/* Styling for table headers */
th {
    background-color: #8FBC8F; /* Light green background */
    padding: 1px 4px; /* Padding for better spacing */
    border: 1px solid #ddd; /* Light border around header */
    color: white; /* White font color */
    font-size: 11px; /* Larger font for headers */
}

/* Styling for table data cells */
td {
    padding: 1px 1px; /* Tighter padding inside the cells */
    border: 1px solid #ddd; /* Light border around cells */
    font-size: 12px; /* Slightly smaller font for content */
}

/* Optional: Style for odd/even rows for better readability */
tr:nth-child(odd) {
    background-color: #f9f9f9; /* Slight gray for odd rows */
}

tr:nth-child(even) {
    background-color: #ffffff; /* White for even rows */
}

/* Ensure text is visible */
td, th {
    color: #000; /* Black text for contrast */
}

/* Header for Users and Invoices */
h2 {
    color: #006400; /* Dark green color */
    font-size: 24px; /* Larger font size */
    text-align: center; /* Center the header */
}

/* Styling for the "Create Invoice" form container */
.form-container {
    max-width: 300px; /* Corrected typo */
    width: 50%; /* Set form width to half the page */
    margin: 20px auto; /* Center the form */
    padding: 30px; /* Add padding inside the form */
    background-color: #f9f9f9; /* Light gray background for the form */
    border-radius: 20px; /* Rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Light shadow for form */
}

/* Styling for the form itself */
.form {
    width: 65%; /* Set form width to half the page */
    margin: 20px auto; /* Center the form */
    padding: 20px; /* Add padding inside the form */
    background-color: #f9f9f9; /* Light gray background for the form */
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Light shadow for form */
}

/* Styling for the form fields */
label {
    display: block; /* Display labels on a new line */
    margin-bottom: 5px; /* Space below the label */
    font-size: 14px; /* Set label font size */
}

input, select, textarea {
    width: 100%; /* Ensure inputs take up full width */
    padding: 8px; /* Padding inside input fields */
    margin-bottom: 10px; /* Space below input fields */
    border-radius: 5px; /* Rounded corners for input fields */
    border: 1px solid #ddd; /* Light border for input fields */
}

/* Styling for the "Create Invoice" button */
button[type="submit"] {
    background-color: #8FBC8F; /* Light green background */
    color: black !important; /* Ensure the font color is black permanently */
    padding: 10px 20px; /* Padding for button */
    border: none; /* No border */
    border-radius: 5px; /* Capsule-shaped button */
    font-size: 16px; /* Slightly larger text */
    cursor: pointer; /* Pointer cursor on hover */
    transition: background-color 0.3s ease; /* Smooth color transition on hover */
    
}

/* Hover effect for the button */
button[type="submit"]:hover {
    background-color: #77dd77; /* Darker light green on hover */
    color: black !important; /* Ensure black font on hover */
}

/* Optional: Adjust textarea for better usability */
textarea {
    resize: vertical; /* Allow vertical resizing only */
    min-height: 80px; /* Minimum height for textarea */
}

/* Centering the Welcome message */
.welcome-container {
    text-align: center;  /* Centers the text horizontally */
    margin-top: 20px;     /* Adds some space at the top */
}

.paypal-container {
    display: flex; /* Use flexbox */
    justify-content: center; /* Aligns content to the center horizontally */
    align-items: center; /* Aligns content vertically */
    margin-top: 20px; /* Adds space between the PayPal button and the previous elements */
    max-width: 100%; /* Ensures container doesn't exceed 100% width */
    width: 100%; /* Use 100% width */
    padding: 10px; /* Add padding inside the PayPal container */
    margin: 0 auto; /* Center the container */
    box-sizing: border-box; /* Prevents padding from affecting the size */

/* Optional: Style for the welcome message */
.welcome-message {
    font-size: 24px;
    font-weight: bold;
}

.button-container {
    display: flex;
    justify-content: center; /* Horizontally center */
    align-items: center; /* Vertically center */
}

/* Logout and Manage Invoices Button Styling */
.logout-button,
.manage-invoices-button {
    display: inline-block; /* Make the links act like buttons */
    padding: 10px 20px;
    margin: 10px 0;
    background-color: #8FBC8F; /* Light green background */
    color: black;
    text-decoration: none; /* Remove underline from links */
    border-radius: 5px; /* Rounded corners */
    font-size: 16px; /* Font size for button text */
    transition: background-color 0.3s ease;
}

/* Hover effect for buttons */
.logout-button:hover,
.manage-invoices-button:hover {
    background-color: #7A9D7B; /* Darker green on hover */
}

/* Center the page content */
.dashboard-container {
    text-align: center; /* Center the text content (h2, links) */
    display: flex;
    flex-direction: column;
    align-items: center; /* Center content horizontally */
    justify-content: center; /* Center content vertically */
    
}
/* Style for the login container */
.login-container {
    width: 100%;
    max-width: 300px; /* Limit the width of the form */
    margin: 50px auto; /* Center the container on the page */
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 8px; /* Rounded corners */
    background-color: #f9f9f9;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* Center the Logout button */
.button-container {
    display: flex;              /* Use flexbox for centering */
    justify-content: center;    /* Align content to the center horizontally */
    align-items: center;        /* Align content vertically */
    margin-top: 20px;           /* Add space above the button */
}
/* Logout and Login buttons styled the same */
.logout-button, .login-button {
    display: inline-block; /* Make the links act like buttons */
    padding: 10px 20px;
    margin: 10px 0;
    background-color: #8FBC8F; /* Light green background */
    color: black;
    text-decoration: none; /* Remove underline from links */
    border-radius: 5px; /* Rounded corners */
    font-size: 16px; /* Font size for button text */
    transition: background-color 0.3s ease;
}

/* Hover effect for buttons */
.logout-button:hover, .login-button:hover {
    background-color: #7A9D7B; /* Darker green on hover */}













/* General Styling */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 10px;
    box-sizing: border-box;
}

/* Set a maximum width to prevent wide content on larger screens */
.container {
    max-width: 1200px; /* Example maximum width for large screens */
}

/* Mobile responsiveness */
@media (max-width: 600px) {
    table {
        width: 100%; /* Ensure the table is 100% width */
        max-width: 100%; /* Allow table to scale to 100% width */
        display: block; /* Make the table block-level element */
        overflow-x: auto; /* Enable horizontal scrolling */
        -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    }

    th, td {
        font-size: 12px; /* Smaller font size on small screens */
        padding: 1px 2px; /* Adjust padding for smaller devices */
    }

/* Responsive for small screens */
@media screen and (max-width: 600px) {
    .paypal-container {
        padding: 5px; /* Reduce padding for smaller screens */
    }
    
    #paypal-container-3M95AQ2Y2M2EY {
        width: 100% !important; /* Make sure the PayPal button does not stretch too wide */
    }
}