/* Apply Verdana and sans-serif fonts globally */
* {
    font-family: Verdana, sans-serif;
}


html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background-color: #f0f0f0; /* Gray background applied across the viewport */
}

.container {
    width: 100%; /* Full width of container */
    max-width: 1200px; /* Limit content width */
    margin: 0 auto; /* Center the container horizontally */
    background: #fff; /* White background for content area */
    padding: 20px; /* Add spacing inside the container for better visuals */
    box-sizing: border-box; /* Ensure padding is included in the container width */
    min-height: 100vh; /* Make sure it fills the viewport height */
}

header {
    padding: 0;
    text-align: center;
}

header .logo { 
    width: 100%; /* Allow logo to scale */
    max-width: 500px;
    height: auto; /* Maintain aspect ratio */
    display: block;
    margin: 0 auto;
}

/* Ensure the table fits inside the container and is scrollable on smaller screens */
/* Adjust the table layout for images */
table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    background: #fff;
    table-layout: auto;
}

th, td {
    width: 180px;
    border: 1px solid #ddd;
    padding: 8px;
    text-align: center;
    vertical-align: center;
    word-wrap: break-word;
}

th {
    background-color: #f4f4f4;
    font-weight: bold;
}

.whatsapp-button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    background-color: #25D366; /* WhatsApp green */
    border-radius: 50%; /* Make it circular */
    text-decoration: none;
}

.whatsapp-button img {
    display: block;
    width: 20px;
    height: 20px;
}

.whatsapp-button:hover {
    background-color: #1DA851; /* Darker green on hover */
}

.login-container {
    background: white;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    text-align: center;
    width: 300px;
    margin: 100px auto;
}

.login-container h2 {
    margin-bottom: 20px;
    color: #333;
    font-size: 24px;
}

.login-container label {
    display: block;
    margin: 10px 0 5px;
    color: #555;
    font-weight: bold;
    text-align: left;
}

.login-container input {
    width: 100%;
    padding: 8px;
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 14px;
}

.login-container button {
    background: #007BFF;
    color: white;
    padding: 10px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    width: 100%;
    font-size: 16px;
}

.login-container button:hover {
    background: #0056b3;
}

.login-container p {
    margin-top: 10px;
    color: #333;
    font-size: 14px;
}



/* Increase the size of the image in the first column */
td img {
    width: 110px; /* Double the size of the image */
    height: auto; /* Maintain aspect ratio */
}

/* Responsive adjustments for small screens */
@media (max-width: 768px) {
    table {
        font-size: 12px;
    }

    th, td {
        padding: 8px;
        width: 120px;
    }

    td img {
        width: 90px; /* Slightly smaller image on mobile */
    }

    #product-list {
        overflow-x: auto;
    }
}

/* Approve and Deny Button Style */
button[name="action"][value="approve"],
button[name="action"][value="deny"] {
    background-color: #d4edda; /* Light green */
    color: #155724; /* Dark green text */
    border: 1px solid #c3e6cb; /* Green border */
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.3s ease;
    width: 50px; /* Default width for buttons */
    margin: 5px; /* Add space between buttons */
}

button[name="action"][value="approve"] {
    background-color: #d4edda; /* Light green */
    color: #155724; /* Dark green text */
    border: 1px solid #c3e6cb; /* Green border */
}

button[name="action"][value="approve"]:hover {
    background-color: #c3e6cb; /* Darker green on hover */
}

button[name="action"][value="deny"] {
    background-color: #f8d7da; /* Light red */
    color: #721c24; /* Dark red text */
    border: 1px solid #f5c6cb; /* Red border */
}

button[name="action"][value="deny"]:hover {
    background-color: #f5c6cb; /* Darker red on hover */
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    button[name="action"][value="approve"],
    button[name="action"][value="deny"] {
        width: 35px; /* 25% smaller width */
        padding: 4px 8px; /* Adjust padding */
        display: inline-block; /* Keep them inline */
    }

    td form {
        display: flex; /* Use flexbox to align buttons horizontally */
        gap: 10px; /* Add spacing between buttons */
        justify-content: center; /* Center buttons inside the table cell */
    }
}


/* General Action Button Style */
.action-button {
    padding: 10px 20px;
    text-decoration: none;
    font-size: 14px;
    font-weight: bold;
    border-radius: 4px;
    cursor: pointer;
    display: inline-block;
    text-align: center;
    transition: background-color 0.3s ease;
}

/* Go to Dashboard Button */
.action-button {
    background-color: black; /* Black background */
    color: white; /* White text */
    border: 1px solid black; /* Black border */
}

.action-button:hover {
    background-color: #555555; /* Dark grey on hover */
}

/* Logout Button (inherits general action-button styles) */
.logout-button {
    background-color: black; /* Black background */
    color: white; /* White text */
    border: 1px solid black; /* Black border */
}

.logout-button:hover {
    background-color: #555555; /* Dark grey on hover */
}

/* Style for the combined documents column */
.documents {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}

.tick {
    color: #28a745; /* Green color for tick */
}

.cross {
    color: #dc3545; /* Red color for cross */
}

/* Default symbol and tick/cross size */
.document-icon {
    display: flex;
    align-items: center;
    gap: 8px; /* Space between symbol and tick/cross */
    font-size: 16px; /* Base font size for smaller devices */
}

.tick, .cross {
    font-weight: bold;
}

/* Desktop-specific adjustments for larger size */
@media (min-width: 768px) {
    .document-icon {
        font-size: 25px; /* Larger font size for desktop */
    }

    .tick, .cross {
        font-size: 25px; /* Larger size for tick and cross */
    }
}