/* phase 2: typography */

/* base font settings */
body {
    font-family: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
    line-height: 1.25;
    color: black;
}

/* monospace font for code */
code {
    font-family: 'IBM Plex Mono', monospace;
}

/* table line height */
table {
    line-height: 1.5;
    border-collapse: collapse;
}

/* links styling */
a {
    color: #284a87;
    text-decoration: underline;
}

/* navigation bar text styles */
nav {
    font-size: 1.25rem; /* 25% larger than default */
}

nav span {
    font-weight: 700; /* bold */
    color: black;
}

nav a {
    font-weight: 400; /* normal */
    color: #444; /* dark gray */
    text-decoration: none;
}

/* page title styles */
h1 {
    font-size: 1.5rem; /* 50% larger than default */
    font-weight: normal;
}

/* assignment page description title */
section h2 {
    font-size: 1rem; /* default font size */
}

/* login form text size */
.login-form label,
.login-form input,
.login-form button {
    font-size: 1.25rem; /* 25% larger than default */
}

/* phase 3: links, forms, and tables */

/* navigation hover effect */
nav a:hover {
    text-decoration: underline;
}

/* table styles */
table {
    width: 100%;
    margin: 1rem 0;
}

/* table header alignment */
th {
    text-align: left;
}

th, td {
    padding: 0.25rem 0;
}

/* right-align numeric columns */
.numeric {
    text-align: right;
}

/* number input styling */
input[type="number"] {
    width: 4rem;
    font-size: 1rem;
    padding: 0.25rem;
}

/* submission actions styling */
.submission-actions {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.submission-actions button {
    font-size: 1rem;
    padding: 0.25rem 0.5rem;
}

/* login form layout */
.login-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 2rem;
}

.login-form p {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.login-form label {
    font-size: 1.25rem;
}

.login-form input {
    flex: 1;
    font-size: 1.25rem;
    padding: 0.25rem;
}

.login-form button {
    width: 100%;
    font-size: 1.25rem;
    padding: 0.5rem;
    margin-top: 1rem;
    background: #ddd;
    border: 1px solid #999;
    border-radius: 4px;
}

/* phase 4: borders, backgrounds, and whitespace */

/* reset default margins */
html, body {
    margin: 0;
    padding: 0;
}

/* navigation bar styling */
nav {
    background-color: #ddd;
    padding: 0.5rem 1rem;
    box-shadow: 0 0 5px gray;
}

/* main content padding */
main {
    padding: 0 1rem;
}

/* spacing between elements */
main > * + * {
    margin-top: 1rem;
}

/* title area styling */
h1 {
    margin: 3rem 0 0 0;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid gray;
}

/* action card styling */
[role="region"] {
    background-color: #b1c3de;
    border: 1px solid #284a87;
    padding: 1rem;
    margin: 1rem 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

[role="region"] p {
    margin: 0.5rem 0;
    width: 100%;
}

[role="region"] a {
    color: #284a87;
}

/* description section spacing */
section {
    margin: 1rem 0;
}

/* list and paragraph spacing */
p, li {
    margin: 1rem 0;
}

/* table spacing */
table {
    margin: 1rem 0;
}

/* phase 5: flexible box layout */

/* navigation bar layout */
header {
    background-color: #ddd;
    box-shadow: 0 0 5px gray;
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 50rem;
    margin: 0 auto;
    padding: 0.5rem 1rem;
    background: none;
    box-shadow: none;
}

.nav-left {
    display: flex;
    gap: 1rem;
    align-items: center;
}

/* main content width control */
main {
    max-width: 50rem;
    margin: 0 auto;
    padding: 0 1rem;
    box-sizing: border-box;
}

/* action card layout */
[role="region"] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

[role="region"] > *:not(:last-child) {
    align-self: flex-start;
}

/* responsive layout */
@media (max-width: 52rem) {
    nav, main {
        max-width: none;
    }
}

/* error message style */
output.error {
    color: #d00;
    font-weight: bold;
    display: block;
    margin: 0.5rem 0;
}

/* invalid input style */
input:invalid {
    border: 2px solid #d00;
}

/* error messages */
.error-messages {
    margin-bottom: 1rem;
}

/* sortable table styles */
.sortable th:last-child {
    cursor: pointer;
    position: relative;
    padding-right: 1.5rem;
}

.sortable th.sort-asc::after {
    content: "▲";
    position: absolute;
    right: 0.5rem;
}

.sortable th.sort-desc::after {
    content: "▼";
    position: absolute;
    right: 0.5rem;
}

/* sorting styles */
th.sort-column {
    cursor: pointer;
    position: relative;
    padding-right: 20px;
    background-color: #f5f5f5;
    transition: background-color 0.3s;
}

th.sort-column:hover {
    background-color: #e0e0e0;
}

th.sort-asc::after {
    content: " \25b2";
    position: absolute;
    right: 5px;
    color: #2196F3;
    font-size: 1.2em;
}

th.sort-desc::after {
    content: " \25bc";
    position: absolute;
    right: 5px;
    color: #2196F3;
    font-size: 1.2em;
}

/* file upload container */
.file-upload-container {
    margin: 1rem 0;
    width: 100%;
}

/* help text styling */
.help-text {
    margin: 0.5rem 0;
    color: #444;
}

.help-text ul {
    margin: 0.25rem 0;
    padding-left: 1.5rem;
}

.help-text li {
    margin: 0.25rem 0;
}

/* form button styling */
form button[type="submit"] {
    padding: 0.5rem 1rem;
    background: #ddd;
    border: 1px solid #999;
    border-radius: 4px;
    cursor: pointer;
}

form button[type="submit"]:hover {
    background: #ccc;
}