/* Student Records Management System - Main CSS */

/* General Page Style */

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: Arial, sans-serif;
    background: #f3f6fb;
    color: #172b4d;
    line-height: 1.5;
}

/* Header */

header {
    background: #17365d;
    color: white;
    text-align: center;
    padding: 28px 16px;
}

header h1 {
    font-size: 1.75rem;
    margin: 0 0 8px;
}

header p {
    margin: 0;
}

/* Main Content */

main {
    width: 100%;
    max-width: 460px;
    margin: 50px auto;
    padding: 0 16px;
}

main section {
    background: white;
    padding: 30px;
    border: 1px solid #d5dce5;
    border-radius: 10px;
}

h2 {
    font-size: 1.5rem;
    margin-top: 0;
}

/* Form Fields */

form div {
    margin-bottom: 20px;
}

label {
    display: block;
    margin-bottom: 6px;
    font-weight: bold;
}

input,
#student-form select,
#student-form textarea,
#filter-course {
    width: 100%;
    padding: 12px;
    border: 1px solid #596579;
    border-radius: 5px;
    background: white;
    color: #172b4d;
    font: inherit;
}

/* Keyboard Focus */

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid #0b63ce;
    outline-offset: 2px;
}

a:focus-visible,
button:focus-visible {
    outline: 3px solid #0b63ce;
    outline-offset: 3px;
}

/* Buttons */

button {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 5px;
    background: #17365d;
    color: white;
    font: inherit;
    font-weight: bold;
    cursor: pointer;
}

button:hover {
    background: #28578b;
}

button:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

/* Login Message */

#login-message {
    margin: 12px 0;
    font-weight: bold;
}

/* Navigation */

nav {
    background: #e4eaf2;
    padding: 14px 20px;
}

nav ul {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    list-style: none;
    margin: 0;
    padding: 0;
}

nav a {
    color: #17365d;
    font-weight: bold;
    text-decoration: none;
}

nav a:hover,
nav a[aria-current="page"] {
    text-decoration: underline;
}

nav a[aria-current="page"] {
    text-underline-offset: 5px;
}

/* Dashboard and Other Pages */

body:has(nav) main {
    max-width: 900px;
    margin: 35px auto;
}

body:has(nav) main section {
    margin-bottom: 20px;
}

body:has(nav) main a {
    color: #17365d;
    font-weight: bold;
}

body:has(nav) main a:hover {
    text-decoration: underline;
}

/* Student Registration */

body:has(#student-form) main {
    max-width: 760px;
    margin: 35px auto;
}

#student-form {
    margin-top: 25px;
}

#student-form > div {
    margin-bottom: 20px;
}

#student-form input:not([type="radio"]):not([type="checkbox"]),
#student-form select,
#student-form textarea {
    display: block;
    width: 100%;
    max-width: 100%;
}

/* Study Level */

#student-form fieldset {
    border: 1px solid #596579;
    border-radius: 5px;
    margin: 0 0 20px;
    padding: 15px;
    min-width: 0;
}

#student-form legend {
    font-weight: bold;
    padding: 0 5px;
}

/* Radio Buttons and Checkbox */

#student-form fieldset label,
#student-form label:has(input[type="checkbox"]) {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    font-weight: normal;
}

#student-form input[type="radio"],
#student-form input[type="checkbox"] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin: 0;
    padding: 0;
    accent-color: #17365d;
}

#student-form input[type="radio"]:focus-visible,
#student-form input[type="checkbox"]:focus-visible {
    outline: 3px solid #0b63ce;
    outline-offset: 3px;
}

/* Hidden Country Section */

#student-form [hidden] {
    display: none;
}

/* Registration Messages */

#form-message {
    font-weight: bold;
    margin: 15px 0;
    line-height: 1.5;
}

/* Shared Message Styling */

#form-message.error-message,
#form-message.success-message {
    border-radius: 8px;
    padding: 16px;
    font-weight: bold;
    line-height: 1.5;
}

/* Red Error Message */

#form-message.error-message {
    color: #b42318;
    background: #fff1f0;
    border: 1px solid #b42318;
    border-left: 5px solid #b42318;
}

/* Green Success Message */

#form-message.success-message {
    color: #166534;
    background: #ecfdf3;
    border: 1px solid #16803c;
    border-left: 5px solid #16803c;
}

/* Invalid Fields */

#student-form input.input-error,
#student-form select.input-error,
#student-form textarea.input-error {
    border: 2px solid #b42318;
}

#student-form .input-error:focus-visible {
    outline: 3px solid #0b63ce;
    outline-offset: 2px;
}

/* Student Records Search and Filter */

#search-student,
#filter-course {
    display: block;
    width: 100%;
    max-width: 100%;
    margin-bottom: 20px;
}

#records-status,
#empty-message {
    color: #42526b;
    margin: 15px 0;
}

/* Records Table */

.table-container {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    margin-top: 20px;
    border: 1px solid #d5dce5;
    border-radius: 8px;
}

.table-container table {
    width: 100%;
    border-collapse: collapse;
    background: white;
}

.table-container caption {
    text-align: left;
    font-weight: bold;
    padding: 15px;
    color: #172b4d;
}

.table-container th,
.table-container td {
    text-align: left;
    padding: 14px;
}

.table-container th {
    background: #e4eaf2;
    color: #17365d;
    font-weight: bold;
    border-bottom: 2px solid #c5cedb;
    white-space: nowrap;
}

.table-container td {
    border-bottom: 1px solid #d5dce5;
}

.table-container tbody tr:nth-child(even) {
    background: #f3f6fb;
}

.table-container tbody tr:hover {
    background: #eaf1fa;
}

/* Footer */

footer {
    text-align: center;
    padding: 20px;
    color: #42526b;
}

/* Mobile and Small Screens */

@media (max-width: 600px) {
    header {
        padding: 22px 12px;
    }

    header h1 {
        font-size: 1.4375rem;
    }

    main {
        margin: 25px auto;
    }

    main section {
        padding: 20px;
    }

    nav ul {
        gap: 12px;
    }

    body:has(nav) main,
    body:has(#student-form) main {
        margin: 20px auto;
    }

    #student-form fieldset {
        padding: 12px;
    }

    h2 {
        font-size: 1.3125rem;
    }

    .table-container th,
    .table-container td {
        padding: 10px;
    }
}