/* =====================================================
   ALDERFIELD UNIVERSITY - LIBRARY DESK
   One stylesheet for four screens, keda the shared styles stay together.
   Page-specific rules follow the same order as the website.
   ===================================================== */

/* =====================================================
   SECTION 1 - SHARED STYLES | ALL PAGES
   Common colours, controls and navigation, 3ashan they stay consistent.
   ===================================================== */

/* Keep padding inside element widths, 3ashan mobile fields fit properly. */
* {
    box-sizing: border-box;
}

/* Set the common font and background, keda pages stay readable. */
body {
    margin: 0;
    font-family: Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    color: #1F2D29;
    background-color: #F4F6F2;
}

/* Give main headings a clear size, 3ashan page titles stand out. */
h1 {
    overflow-wrap: anywhere;
    font-size: 1.9rem;
    margin: 0 0 0.75rem;
}

/* Use a smaller heading for sections, bas keep the hierarchy clear. */
h2 {
    font-size: 1.3rem;
}

/* Keep paragraph spacing consistent, 3ashan content is easier to scan. */
p {
    margin: 0 0 1rem;
}

/* Leave links underlined, 3ashan colour is not the only clue. */
a {
    color: #205348;
}

/* ----- SHARED HEADER AND NAVIGATION | same look, keda ----- */

/* Dark university header across every page, 3ashan branding stays familiar. */
.siteHeader {
    background-color: #1B493F;
    color: white;
    padding: 1.25rem 2rem;
}
 

/* Display the transparent book logo beside the university name, 3ashan the branding stays consistent. */
.headerTop {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: 0.5rem;
}

.siteName {
    grid-column: 1;
    grid-row: 1;
    font-size: 1.25rem;
    font-weight: bold;
    margin: 0;
    min-height: 48px;
    overflow-wrap: anywhere;
    padding-left: 58px;
    display: flex;
    align-items: center;
    background-image: url("../images/libraryLogo.svg");
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 48px 48px;
}

/* Reserve space below the library name and show Skip on focus. */
.skipLink {
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
    clip-path: inset(50%);
    pointer-events: none;
    padding: 0.5rem 0.75rem;
    color: #1F2D29;
    background-color: #FFFFFF;
    border: 2px solid #1F2D29;
    border-radius: 0.3rem;
}

.skipLink:focus {
    clip-path: none;
    pointer-events: auto;
}

/* Wrap navigation links on narrow screens, 3ashan none get cut off. */
.siteHeader nav {
    margin-top: 0.75rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

/* Make navigation links easier to spot and click, 3ashan staff can move
   between screens without tiny text targets. */
.siteHeader nav a {
    display: inline-block;
    padding: 0.6rem 0.85rem;
    color: white;
    border: 1px solid white;
    border-radius: 0.3rem;
}

/* Use aria-current from HTML for the active link, keda no JS is needed
   just to highlight the page. */
.siteHeader nav a[aria-current="page"] {
    color: #1B493F;
    background-color: white;
    font-weight: bold;
}

/* ----- SHARED CONTENT AND FIELDS | same controls, keda ----- */

/* Limit content width on desktop, 3ashan lines do not get too long. */
.pageContent {
    width: 90%;
    max-width: 860px;
    margin: 2rem auto;
}

/* Give each form field some breathing room, keda labels stay clear. */
.formField {
    margin-bottom: 1rem;
}

/* Style all form labels consistently, 3ashan users know what to enter. */
label {
    display: inline-block;
    font-weight: bold;
    margin-bottom: 0.35rem;
}

/* Reuse one input style across forms and filters, keda less duplicate CSS.
   The Fine checkbox gets its own size below. */
input, select {
    display: block;
    width: 100%;
    padding: 0.7rem;
    font: inherit;
    color: #1F2D29;
    background-color: white;
    border: 2px solid #67776F;
    border-radius: 0.3rem;
}

/* Use readable red error text, bas never rely on colour alone. */
.errorMessage, .fieldError {
    color: #A12E1E;
    font-weight: bold;
}

/* Add a red border for invalid fields, ma3 the written error message. */
input[aria-invalid="true"], select[aria-invalid="true"] {
    border-color: #A12E1E;
}

/* Use the same main button style across pages, 3ashan actions are familiar. */
button {
    padding: 0.75rem 1.25rem;
    font: inherit;
    font-weight: bold;
    color: white;
    background-color: #1B493F;
    border: 2px solid #1B493F;
    border-radius: 0.3rem;
    cursor: pointer;
}

/* Show disabled buttons differently, bas keep the text readable. */
button:disabled {
    color: #415148;
    background-color: #E9EEEB;
    border-color: #67776F;
    cursor: not-allowed;
}

/* ----- KEYBOARD FOCUS | accessibility, keda ----- */

/* Show a strong blue outline on focus, 3ashan keyboard users can track it. */
a:focus, button:focus, input:focus, select:focus,
.formField:focus-within:has(input[type="date"]),
.errorSummary:focus, .resultCount:focus, .successMessage:focus,
#mainContent:focus {
    outline: 3px solid #005FCC;
    outline-offset: 3px;
}

/* Yellow focus stands out against the dark header, keda. */
.siteHeader a:focus {
    outline-color: #F8DE75;
}

/* Reuse panel surfaces, 3ashan colours and edges stay consistent. */
.card, .dashboardSection, fieldset, .recordsFilters, .recordItem, .emptyMessage {
    background-color: white;
    border: 1px solid #67776F;
    border-radius: 0.5rem;
}

/* ----- SHARED FEEDBACK AND FOOTER | same layout, keda ----- */

/* Pair success text with a border, 3ashan meaning is not colour-only. */
.successMessage {
    padding: 0.8rem 1rem;
    background-color: white;
    border-left: 4px solid #1B493F;
    font-weight: bold;
}

/* Keep Cancel next to Save without making it a second button, keda. */
.cancelLink, .pagination a, .recordItem h2 + a, .recordItem a[href$="/edit"] {
    display: inline-block;
    padding: 0.45rem 0.75rem;
    border: 1px solid #205348;
    border-radius: 0.3rem;
    color: #205348;
    font-weight: bold;
    text-decoration: none;
}
.cancelLink:hover, .pagination a:hover, .recordItem a[href$="/edit"]:hover { background: #E9EEEB; }
.skipLink { text-decoration: none; }
.card .helpText { color: #205348; }

/* Reuse the same footer on all screens, 3ashan layout stays consistent. */
.siteFooter {
    padding: 1.5rem 1rem;
    border-top: 1px solid #67776F;
    color: #415148;
    text-align: center;
}

/* =====================================================
   SECTION 2 - SIGN IN | templates/signIn.html
   Only card and sign-in feedback styles here, keda no shared CSS repeats.
   ===================================================== */

/* Keep the short sign-in card narrow with a clear edge, 3ashan it scans well. */
.card {
    max-width: 500px;
    margin: 2.5rem auto;
    padding: 2rem;
}

/* Explain the demo credentials using quieter text, bas still readable. */
.helpText {
    color: #415148;
    font-size: 0.95rem;
}

/* Make processing feedback noticeable under the form, keda. */
#statusMessage {
    font-weight: bold;
}

/* =====================================================
   SECTION 3 - DASHBOARD | templates/dashboard.html
   Task links and summary panels only, 3ashan no extra layouts are needed.
   ===================================================== */

/* Reuse one panel look for tasks and record count, keda consistent. */
.dashboardSection {
    margin: 1.25rem 0;
    padding: 1.25rem;
}

/* Put one strong task first; second task remains a familiar underlined link. */
.taskLinks { list-style: none; padding: 0; margin: 0; }
.taskLinks li { margin: 0.65rem 0; }
.primaryTask {
    display: inline-block;
    padding: 0.75rem 1.1rem;
    border-radius: 0.3rem;
    border: 2px solid #1B493F;
    background-color: #1B493F;
    color: white;
    font-weight: bold;
    text-decoration: none;
}
.primaryTask:hover { text-decoration: underline; }
.secondaryTask { font-weight: bold; }
.recordSummary { margin: 0; }
.summarySection { padding: 0.75rem 1rem; }
.summarySection h2 { font-size: 1rem; margin: 0 0 0.25rem; }

/* =====================================================
   SECTION 4 - REGISTER / EDIT | templates/loanForm.html
   Same form for both modes, keda fieldsets and errors share rules.
   ===================================================== */

/* Group related loan inputs in bordered fieldsets, 3ashan users can scan. */
fieldset {
    min-width: 0;
    margin: 1.5rem 0;
    padding: 1.25rem;
}

/* Make each group title distinct, bas keep native legend semantics. */
legend {
    font-weight: bold;
    padding: 0 0.5rem;
}

/* Keep the checkbox beside its label, 3ashan it is not full-width. */
#fineApplicable {
    display: inline-block;
    width: auto;
    padding: 0;
    margin: 0 0.4rem 0 0;
    vertical-align: middle;
}

/* Highlight the Flask error summary, keda staff notice the problem;
   app.js moves keyboard focus here after an invalid submission. */
.errorSummary {
    padding: 1rem;
    margin: 1rem 0;
    background-color: white;
    border: 2px solid #A12E1E;
    border-left-width: 5px;
}

/* Keep the error title close to its links, 3ashan recovery is clear. */
.errorSummary h2 {
    margin-top: 0;
    color: #A12E1E;
}
.errorSummary ul { list-style: none; padding: 0; margin: 0; }
.errorSummary li + li { margin-top: 0.5rem; }
.errorSummary a {
    display: inline-block;
    padding: 0.4rem 0.65rem;
    color: #A12E1E;
    background: #FFF2F0;
    border: 1px solid currentColor;
    border-radius: 0.3rem;
    font-weight: bold;
    text-decoration: none;
}
.errorSummary a:hover { background: #FBE3DE; }

/* Show field-specific guidance below the input, keda. */
.fieldError {
    margin: 0.35rem 0 0;
}

/* Style status feedback from app.js, 3ashan field changes are noticeable. */
#loanFormStatus {
    font-weight: bold;
}

/* =====================================================
   SECTION 5 - LOAN RECORDS | templates/loanRecords.html
   Filter controls and data table only, 3ashan the system stays consistent.
   ===================================================== */

/* Keep search, status and sorting together, 3ashan filters are easy to use. */
.recordsFilters {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 1rem;
    padding: 1rem;
}

/* Let filter fields wrap instead of clipping, keda mobile stays usable. */
.recordsFilters .formField {
    flex: 1 1 180px;
    min-width: 0;
    margin-bottom: 0;
}

/* Keep Apply and Clear side by side when possible, bas allow wrapping. */
.filterActions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}

/* Show the matched record count clearly, 3ashan users know the result. */
.resultCount {
    margin: 1rem 0;
    font-weight: bold;
}

/* Explain empty results with a visible message, mesh an unexplained gap. */
.emptyMessage {
    padding: 1rem;
}

/* A single list fits phones and desktops, 3ashan records never scroll sideways. */
.recordsList { list-style: none; margin: 0; padding: 0; }
.recordItem { padding: 1rem; margin-bottom: 1rem; min-width: 0; }
.recordHeader {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
}
.recordHeader h2 { margin: 0 0 0.75rem; overflow-wrap: anywhere; }
.recordNumber { margin: 0; font-size: 0.9rem; color: #415148; }
.recordHeader a { font-weight: bold; white-space: nowrap; }
.recordDetails { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; margin: 0; }
.recordDetails div { flex: 1 1 140px; min-width: 0; }
.recordDetails dt { font-weight: bold; }
.recordDetails dd { margin: 0; overflow-wrap: anywhere; }
.borrowerId { display: block; color: #415148; }

/* Let pagination links wrap on phones, keda nothing gets cut off. */
.pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin: 1rem 0;
}

/* One mobile breakpoint, keda every page adapts in the same place. */
@media (max-width: 600px) {
    .siteHeader { padding: 1rem; }
    .pageContent { width: 94%; margin: 1rem auto; }
    .card { padding: 1rem; margin: 1rem auto; }
    .dashboardSection, fieldset { padding: 1rem; }
}