/* Basic body styling */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f8f9fa;
    padding-top: 80px; 
}

/* Main container styling */
.container {
    width: 80%;
    margin: 20px auto;
    padding: 20px;
    background: #ffffff;
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
}

/* Header styling */
header {
    text-align: center;
    margin-bottom: 20px;
}

header h1 {
    font-size: 24px;
    color: #333;
}

/* Button styling */
.menu button {
    padding: 10px 20px;
    margin: 5px;
    font-size: 16px;
    background-color: #007bff;
    color: #ffffff;
    border: none;
    cursor: pointer;
    border-radius: 5px;
}

.menu button:hover {
    background-color: #0056b3;
}

/* Section styling */
section {
    margin-bottom: 30px;
}

/* Form styling */
form label, form textarea, form select, form button {
    display: block;
    margin: 10px 0;
    font-size: 16px;
}

textarea, select, button {
    width: 100%;
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

/* Table styling */
table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

table, th, td {
    border: 1px solid #ddd;
    text-align: left;
}

th, td {
    padding: 10px;
}

th {
    background-color: #f4f4f4;
}

tr:hover {
    background-color: #f1f1f1;
}

/* Status color coding */
.status-resolved { color: green; font-weight: bold; }
.status-in-progress { color: orange; font-weight: bold; }
.status-submitted { color: gray; font-weight: bold; }

/* Responsive table for mobile */
@media (max-width: 768px) {
    table, thead, tbody, th, td, tr {
        display: block;
    }

    td {
        padding: 10px;
        text-align: right;
        position: relative;
    }

    td::before {
        content: attr(data-label);
        position: absolute;
        left: 0;
        top: 0;
        text-align: left;
        font-weight: bold;
    }

    th {
        display: none;
    }
}


/* rename to header */
/* Footer Styling */
.footer {
    text-align: center; /* Center the text */
    padding: 20px;      /* Add spacing inside the footer */
    margin-top: 20px;
   /* background-color: #f8f9fa; */


   
   /* Light gray background */
    font-size: 14px;    /* Adjust text size */
    color: #333;        /* Text color */
    position: fixed;    /* Fix footer to the top */
    top: 0;          /* Align to bottom of the page */
    width: 100%;        /* Ensure the footer spans the full width */
    box-shadow: 0px -1px 5px rgba(0, 0, 0, 0.1); /* Subtle top shadow */
}

.footer a {
    color: #007bff; /* Blue link color */
    text-decoration: none; /* Remove underline */
}

.footer a:hover {
    text-decoration: underline; /* Add underline on hover */
}

.footer ul {
list-style: none }
.footer ul li {
display: list-item
}



/* GitHub Diagonal Banner (Adjusted to align with top and right edges) */
.github-banner {
    position: absolute;
    top: 100; /* Align to top edge */
    right: 0; /* Align to right edge */
    background-color: #007bff; /* Blue background */
    color: white; /* White text */
    font-size: 14px; /* Adjust text size */
    padding: 10px 50px; /* Adjust padding for banner size */
    z-index: 10; /* Ensure it appears above content */
    transform: rotate(45deg) translate(35%, -35%); /* Align edges with top and right */
    transform-origin: top right; /* Keep rotation consistent */
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.2); /* Add shadow for depth */
    text-align: center; /* Center-align text */
}

/* GitHub Banner Link Styling */
.github-banner a {
    color: white; /* White text color */
    text-decoration: none; /* Remove underline */
    font-weight: bold; /* Make text bold */
}

.github-banner a:hover {
    text-decoration: underline; /* Add underline on hover */
}