showstudentdetail.css

/* Navigation Bar Styling */
.navbar {
    background-color: #2c3e50; /* Dark blue-gray */
    color: white;/*added*/
    padding: 15px 0;/*added*/
    /*overflow: hidden;*/
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.navbar ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
   /* display: flex; /* Use flexbox for horizontal layout */
    /*justify-content: center; /* Center the navigation items */
   /* flex-wrap: wrap; /* Allow items to wrap on smaller screens */
    text-align: center;/*added*/
}
.navbar ul li{ /*added*/
    display: inline-block;
    margin-right: 30px;
}

.navbar ul li a {
   /* display: block;*/
    color: white;
   /* text-align: center;*/
    padding: 10px 15px;
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease;
    /*font-weight: 400;*/
    white-space: nowrap; /* Prevents text from breaking into multiple lines */
    border-radius: 5px;/*added*/
}

.navbar ul li a:hover {
    background-color: #3498db; /* Slightly lighter on hover */
    color: white; /* Light gray text on hover */
}

.navbar ul li a.active {
    background-color: #3498db; /* Greenish-blue for active link */
    color: white;
    /*font-weight: 700;*/
}

/* Special styling for logout button, pushed to the far right if space allows */
.navbar ul li.last-child {
    float: right;
    margin-right: 20px;
}
/* General Body Styles */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
    color: #333;
}

/* Container for Main Content */
.container {
    max-width: 1200px;
    margin: 20px auto;
    padding: 20px;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}

/* Heading */
h2 {
    text-align: center;
    color: #333;
    margin-bottom: 25px;
    font-size: 2em;
}

/* Filter Controls Form */
.filter-controls {
    margin-bottom: 20px;
    padding: 15px;
    background-color: #e9e9e9;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap; /* Allow items to wrap on smaller screens */
    gap: 15px; /* Space between form elements */
}

.filter-controls label {
    font-weight: bold;
    color: #555;
    margin-right: 5px;
    white-space: nowrap; /* Prevent label wrapping */
}

.filter-controls input[type="text"],
.filter-controls select {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1em;
    flex-grow: 1; /* Allow inputs/selects to grow */
    min-width: 150px; /* Minimum width for inputs/selects */
}

.filter-controls input[type="submit"],
.filter-controls button {
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1em;
    transition: background-color 0.3s ease;
    white-space: nowrap; /* Prevent button text wrapping */
    justify-content: center;
}

.filter-controls input[type="submit"] {
    background-color: #04AA6D;
    color: white;
}

.filter-controls input[type="submit"]:hover {
    background-color: #059862;
}

#ClearFilterBtn {
    background-color: #f44336;
    color: white;
}

#ClearFilterBtn:hover {
    background-color: #da190b;
}

/* Student Details Table */
#showstudent {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

#showstudent thead {
    background-color: #4b97fa;
    color: white;
}

#showstudent th,
#showstudent td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

#showstudent tbody tr:nth-child(even) {
    background-color: #f2f2f2;
}

#showstudent tbody tr:hover {
    background-color: #ddd;
}

#showstudent td a {
    color: #04AA6D;
    text-decoration: none;
    margin-right: 5px;
}

#showstudent td a:hover {
    text-decoration: underline;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .navbar ul {
        flex-direction: column; /* Stack navigation items vertically */
        align-items: center;
    }

    .navbar li {
        float: none; /* Remove float for vertical stacking */
        width: 100%;
        text-align: center;
    }

    .navbar li[style="float: right;"] {
        margin-left: 0; /* Remove auto-margin for stacking */
    }

    .filter-controls form {
        flex-direction: column; /* Stack form elements vertically */
        align-items: stretch;
    }

    .filter-controls input[type="text"],
    .filter-controls select,
    .filter-controls input[type="submit"],
    .filter-controls button {
        width: 100%; /* Make inputs/buttons full width */
        box-sizing: border-box; /* Include padding in width calculation */
    }

    #showstudent th,
    #showstudent td {
        padding: 8px 10px; /* Reduce padding for smaller screens */
        font-size: 0.9em;
    }
}

@media (max-width: 480px) {
    .container {
        margin: 10px auto;
        padding: 10px;
    }

    h2 {
        font-size: 1.5em;
    }

    #showstudent th,
    #showstudent td {
        padding: 5px;
        font-size: 0.8em;
    }

    /* Adjust specific column widths if needed, or allow browser to handle */
    #showstudent td:nth-child(4), /* Address */
    #showstudent td:nth-child(8) { /* Subjects */
        word-break: break-word; /* Allow long text to break */
    }
}