/* ============================= */
/* Accessibility overrides       */
/* ============================= */

/* Strong, consistent focus outline for keyboard users */
:focus-visible {
    outline: 3px solid var(--color-background-interactive);
    outline-offset: 3px;
}

:focus:not(:focus-visible) {
    outline: none;
}

/* Enhanced focus for search and advanced search form controls */
.field-input:focus,
.field-input:focus-visible,
.field-select:focus,
.field-select:focus-visible {
    outline: 3px solid var(--color-background-interactive);
    outline-offset: 3px;
    border-color: var(--color-background-interactive);
}

/* ============================= */
/* Bentham Papers - Main Stylesheet */
/* Consolidated CSS from all pages */
/* ============================= */

/* ============================= */
/* CSS Variables / Root          */
/* ============================= */
:root {
    /* UCL Brand Colors */
    --ucl-black: #000000;
    --ucl-white: #FFFFFF;
    --ucl-purple: #500778;
    --ucl-dark-blue: #002248;
    
    /* Figma Design Colors */
    --color-background-inverse: #1A1A1A;
    --color-background-container: #FFFFFF;
    --color-text-primary: #1A1A1A;
    --color-background-interactive: #0D68CF;
    --color-text-secondary: #666666;
    --color-border: #CCCCCC;
    --color-border-input: #666666;
    --color-error: #CA0007;
    
    /* Typography */
    --font-primary: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* ============================= */
/* Base Styles                   */
/* ============================= */
html {
    height: 100%;
    overflow-y: scroll; /* Always show scrollbar to prevent layout shift */
    scrollbar-gutter: stable; /* Reserve space for scrollbar */
}

body {
    margin: 0;
    font-family: var(--font-primary);
    font-size: 16px;
    color: var(--color-text-primary);
    background: var(--color-background-container);
    /* Sticky footer layout */
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

/* Prevent layout shift from scrollbar */
*, *::before, *::after {
    box-sizing: border-box;
}

/* Main content area expands to fill available space */
main,
#main-content {
    flex: 1 0 auto;
}

/* Footer stays at bottom */
footer {
    flex-shrink: 0;
}

/* ============================= */
/* Accessibility                 */
/* ============================= */

/* Skip to main content link */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--color-background-interactive);
    color: var(--ucl-white);
    padding: 8px 16px;
    z-index: 10000;
    text-decoration: none;
    font-weight: 700;
    border-radius: 0 0 4px 0;
    transition: top 0.2s ease;
}

.skip-link:focus {
    top: 0;
    outline: 2px solid var(--ucl-white);
    outline-offset: 2px;
}

/* Focus visible styles for keyboard navigation */
:focus-visible {
    outline: 2px solid var(--color-background-interactive);
    outline-offset: 2px;
}

/* Remove default focus outline and use focus-visible */
:focus:not(:focus-visible) {
    outline: none;
}

/* Visually hidden but accessible to screen readers */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ============================= */
/* Header Styles                 */
/* ============================= */

/* Header container */
.ucl-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0;
    width: 100%;
}

/* Header slim bar (Frame 1097) */
.ucl-header__top {
    width: 100%;
    height: 72px;
    background: #000;
    position: relative;
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;
}

.ucl-header__inner {
    max-width: 1281px;
    width: 100%;
    margin: 0 auto;
    height: 100%;
    position: relative;
    box-sizing: border-box;
}

/* Logo */
.ucl-logo {
    position: absolute;
    top: 15px;
    left: 30px;
    text-decoration: none;
    display: block;
}

.ucl-logo img {
    display: block;
    height: 57px;
    width: auto;
    object-fit: contain;
    /* Light backing so the black UCL logo remains legible on dark bar */
    background: #FFFFFF;
    padding: 0;
}

/* Applications name / Site title */
.site-title {
    position: absolute;
    width: 240px;
    height: 29px;
    left: calc(50% - 240px/2 - 72.5px);
    top: 25px;
    font-family: var(--font-primary);
    font-style: normal;
    font-weight: 700;
    font-size: 24px;
    line-height: 120%;
    color: #FFFFFF;
    margin: 0;
    white-space: nowrap;
}

/* Navigation bar */
.site-navbar {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 92px;
    background: #FFFFFF;
    flex: none;
    order: 1;
    align-self: stretch;
    flex-grow: 0;
    box-sizing: border-box;
}

.site-navbar__inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 32px 64px;
    gap: 8px;
    max-width: 1281px;
    width: 100%;
    height: 92px;
    box-sizing: border-box;
    flex: none;
    order: 0;
    flex-grow: 0;
}

/* Frame 382 - Nav links container */
.site-nav {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0;
    gap: 24px;
    list-style: none;
    margin: 0;
    width: 100%;
    max-width: 1217px;
    height: 28px;
    flex: none;
    order: 1;
    align-self: stretch;
    flex-grow: 0;
}

/* Faculty nav item */
.site-nav li {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
    height: 28px;
    flex: none;
    flex-grow: 0;
}

/* Faculty link */
.site-nav__link {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0;
    gap: 10px;
    height: 27px;
    font-family: var(--font-primary);
    font-style: normal;
    font-weight: 700;
    font-size: 18px;
    line-height: 150%;
    text-decoration: none;
    color: #1A1A1A;
    flex: none;
    order: 0;
    flex-grow: 0;
    transition: color 0.3s ease-out;
}

.site-nav__link:hover {
    color: var(--ucl-purple);
}

.site-nav__link--active {
    text-decoration-line: underline;
}

/* Mobile menu toggle */
.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    padding: 0.5rem;
    cursor: pointer;
}

.mobile-menu-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--color-background-inverse);
    margin: 5px 0;
}

/* ============================= */
/* Page Headings (Common)        */
/* ============================= */
.page-title,
.search-title,
.results-heading,
.details-heading,
.history-heading {
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: 56px;
    line-height: 130%;
    color: #000000;
    margin: 0 0 32px 0;
}

/* ============================= */
/* Home Page Styles              */
/* ============================= */
.home-content {
    max-width: 1281px;
    margin: 0 auto;
    padding: 40px 64px;
    display: flex;
    flex-direction: row;
    gap: 48px;
    min-height: 60vh; /* Prevent layout shift */
}

.home-main {
    flex: 1;
    max-width: 600px;
}

.home-sidebar {
    flex-shrink: 0;
    width: 280px;
}

.home-sidebar img {
    width: 100%;
    height: auto;
    display: block;
}

/* Lead text */
.lead-text {
    font-family: var(--font-primary);
    font-weight: 400;
    font-size: 24px;
    line-height: 150%;
    letter-spacing: 0;
    color: #000000;
    margin: 0 0 16px 0;
    max-width: 659px;
}

/* Body text - regular */
.body-text {
    font-family: var(--font-primary);
    font-weight: 400;
    font-size: 18px;
    line-height: 150%;
    letter-spacing: 0;
    color: #000000;
    margin: 0 0 24px 0;
    max-width: 659px;
}

/* Info section */
.info-section {
    margin-bottom: 16px;
}

.info-section p {
    font-family: var(--font-primary);
    font-weight: 400;
    font-size: 18px;
    line-height: 150%;
    color: #000000;
    margin: 0 0 16px 0;
    max-width: 659px;
}

.info-section a {
    color: #004080;
    text-decoration: underline;
}

.info-section a:hover {
    color: #003366;
}

.ahrc-logo {
    margin-top: 24px;
}

.ahrc-logo img {
    max-width: 200px;
    height: auto;
}

/* ============================= */
/* Search & Advanced Search      */
/* ============================= */
.search-content,
.advanced-search-content {
    max-width: 1281px;
    margin: 0 auto;
    padding: 40px 64px;
    background: #FFFFFF;
    min-height: 60vh; /* Prevent layout shift */
}

/* Intro text */
.search-intro {
    font-family: var(--font-primary);
    font-weight: 400;
    font-size: 16px;
    line-height: 150%;
    color: #000000;
    margin: 0 0 48px 0;
    max-width: 659px;
}

/* Form container */
.search-form {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0;
    gap: 32px;
    max-width: 660px;
}

/* Form group */
.form-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0;
    gap: 8px;
    width: 100%;
}

/* Advanced search condition row */
.condition-row {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 0;
    gap: 32px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

/* Form group inline */
.form-group-inline {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0;
    gap: 8px;
}

.form-group-inline.field-col { width: 148px; }
.form-group-inline.operator-col { width: 166px; }
.form-group-inline.value-col { width: 363px; }
.form-group-inline.truncation-col { width: 81px; }
.form-group-inline.boolean-col { width: 166px; }

/* Field label */
.field-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: 16px;
    line-height: 140%;
    color: #1A1A1A;
}

/* Helper text */
.helper-text {
    font-family: var(--font-primary);
    font-weight: 400;
    font-size: 16px;
    line-height: 120%;
    color: #666666;
}

/* Input field */
.field-input {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0 16px;
    gap: 8px;
    width: 100%;
    height: 48px;
    background: #FFFFFF;
    border: 1px solid #666666;
    font-family: var(--font-primary);
    font-size: 16px;
    line-height: 150%;
    color: #1A1A1A;
}

.field-input:focus {
    outline: none;
    border-color: #0D68CF;
}

.field-input::placeholder {
    color: #999999;
}

/* Select field */
.field-select {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0 16px;
    width: 100%;
    height: 48px;
    background: #FFFFFF;
    border: 1px solid #666666;
    font-family: var(--font-primary);
    font-size: 16px;
    line-height: 150%;
    color: #1A1A1A;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%231A1A1A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 20px;
    padding-right: 40px;
}

.field-select:focus {
    outline: none;
    border-color: #0D68CF;
}

/* Info icon */
.info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #0D68CF;
    border: none;
    padding: 0;
    cursor: pointer;
    color: #FFFFFF;
    vertical-align: middle;
    margin-left: 4px;
}

.info-icon:hover {
    background-color: #0A56AC;
}

.info-icon:focus {
    outline: 2px solid #0D68CF;
    outline-offset: 2px;
}

.info-icon svg {
    width: 12px;
    height: 12px;
    stroke: #FFFFFF;
    fill: none;
}

/* Checkbox container */
.checkbox-container {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    padding: 0;
    gap: 8px;
    width: 32px;
    height: 24px;
    margin-top: 30px;
}

.checkbox-custom {
    width: 24px;
    height: 24px;
    cursor: pointer;
    accent-color: #0D68CF;
}

/* Remove button (Advanced search) */
.remove-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: none;
    border: none;
    cursor: pointer;
    margin-top: 28px;
    padding: 0;
}

.remove-btn svg {
    width: 32px;
    height: 32px;
    color: #CA0007;
}

.remove-btn:hover svg {
    opacity: 0.8;
}

/* Add condition button */
.add-condition-btn {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 8px 16px;
    gap: 8px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: 16px;
    line-height: 140%;
    color: #0D68CF;
    margin-bottom: 32px;
}

.add-condition-btn:hover {
    opacity: 0.8;
}

.add-condition-btn svg {
    width: 24px;
    height: 24px;
}

/* ============================= */
/* Toggle Switch                 */
/* ============================= */
.toggle-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0;
    gap: 32px;
}

.toggle-label {
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: 16px;
    line-height: 140%;
    color: #000000;
}

.toggle-switch {
    position: relative;
    width: 48px;
    height: 24px;
}

.toggle-switch input {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #CCCCCC;
    transition: 0.3s;
    border-radius: 100px;
    padding: 2px;
    display: flex;
    align-items: center;
}

.toggle-slider:before {
    content: "";
    width: 20px;
    height: 20px;
    background-color: #FFFFFF;
    border-radius: 100px;
    transition: 0.3s;
}

.toggle-switch input:checked + .toggle-slider {
    background-color: #0D68CF;
}

.toggle-switch input:checked + .toggle-slider:before {
    transform: translateX(24px);
}

/* Keyboard focus visibility for toggle switch */
.toggle-group:focus-within .toggle-slider {
    outline: 3px solid var(--color-background-interactive);
    outline-offset: 3px;
}

/* ============================= */
/* Buttons                       */
/* ============================= */

/* Primary button */
.btn-primary-custom {
    display: inline-block;
    background: var(--color-background-interactive, #0D68CF);
    color: #FFFFFF;
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: 16px;
    line-height: 150%;
    padding: 12px 24px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    margin: 8px 0 32px 0;
    transition: background 0.3s ease;
}

.btn-primary-custom:hover {
    background: #0B5AB8;
    color: #FFFFFF;
}

/* Button container */
.button-group {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    padding: 0;
    width: 100%;
    margin-top: 24px;
}

/* Clear button */
.btn-clear {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 12px 24px;
    gap: 8px;
    background: #FFFFFF;
    border: 1px solid #0D68CF;
    font-family: var(--font-primary);
    font-weight: 400;
    font-size: 16px;
    line-height: 19px;
    color: #0D68CF;
    cursor: pointer;
    transition: background 0.3s ease;
}

.btn-clear:hover {
    background: #F0F7FF;
}

/* Search button */
.btn-search {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 12px 24px;
    gap: 8px;
    margin-top: 32px; /* Space from toggle group above */
    background: #0D68CF;
    border: none;
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: 16px;
    line-height: 140%;
    color: #FFFFFF;
    cursor: pointer;
    transition: background 0.3s ease;
}

.btn-search:hover {
    background: #0B5AB8;
}

/* Navigation button (Details page) */
.nav-btn {
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 12px 24px;
    border: 1px solid #0D68CF;
    background: transparent;
    font-family: var(--font-primary);
    font-weight: 400;
    font-size: 16px;
    line-height: 19px;
    color: #0D68CF;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.nav-btn:hover {
    background-color: #0D68CF;
    color: #FFFFFF;
}

.nav-btn.disabled {
    border-color: #666666;
    color: #666666;
    cursor: not-allowed;
    pointer-events: none;
}

/* ============================= */
/* Results Page                  */
/* ============================= */
.results-container {
    max-width: 1281px;
    margin: 0 auto;
    padding: 32px 64px;
    background: #FFFFFF;
    min-height: 60vh; /* Prevent layout shift */
}

/* Sort and Export row */
.results-controls {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 32px;
    gap: 16px;
    flex-wrap: wrap;
}

.sort-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.sort-label {
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: 16px;
    line-height: 140%;
    color: #1A1A1A;
}

.sort-select {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    padding: 0 16px;
    gap: 8px;
    width: 264px;
    height: 40px;
    background: #FFFFFF;
    border: 1px solid #CCCCCC;
    font-family: var(--font-primary);
    font-size: 16px;
    line-height: 150%;
    color: #1A1A1A;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9L12 15L18 9' stroke='%231A1A1A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 48px;
}

.export-btn {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 8px 16px;
    gap: 8px;
    background: transparent;
    border: none;
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: 16px;
    line-height: 140%;
    color: #0D68CF;
    text-decoration: none;
    cursor: pointer;
}

.export-btn:hover {
    color: #0A56AC;
    text-decoration: underline;
}

.export-btn svg {
    width: 24px;
    height: 24px;
}

/* Results Table */
.results-table-container {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overflow-y: visible;
}

.results-table {
    width: max(100%, 1000px);
    min-width: 1000px;
    border-collapse: collapse;
    table-layout: fixed;
}

.results-table th {
    box-sizing: border-box;
    padding: 8px;
    background: #F8F8F8;
    border-bottom: 1px solid #CCCCCC;
    font-family: var(--font-primary);
    font-weight: 400;
    font-size: 14px;
    line-height: 140%;
    color: #666666;
    text-align: left;
    vertical-align: middle;
    height: 40px;
}

/* Column widths and min-widths so columns don't collapse on narrow viewports */
.results-table th:nth-child(1),
.results-table td:nth-child(1) { width: 63px; min-width: 63px; }   /* Box */
.results-table th:nth-child(2),
.results-table td:nth-child(2) { width: 62px; min-width: 62px; }   /* Folio */
.results-table th:nth-child(3),
.results-table td:nth-child(3) { width: 181px; min-width: 100px; }  /* Penner */
.results-table th:nth-child(4),
.results-table td:nth-child(4) { width: 91px; min-width: 70px; }   /* Creator */
.results-table th:nth-child(5),
.results-table td:nth-child(5) { width: 184px; min-width: 100px; }  /* Main headings */
.results-table th:nth-child(6),
.results-table td:nth-child(6) { width: 200px; min-width: 120px; }   /* Sub headings */
.results-table th:nth-child(7),
.results-table td:nth-child(7) { width: 115px; min-width: 90px; }    /* Date */
.results-table th:nth-child(8),
.results-table td:nth-child(8) { width: 95px; min-width: 95px; }    /* Image */

.results-table tbody tr {
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.results-table tbody tr:hover {
    background-color: #EBEBEB;
}

.results-table tbody tr:hover td {
    background-color: #EBEBEB;
}

.results-table td {
    box-sizing: border-box;
    padding: 16px 8px;
    background: #FFFFFF;
    border-bottom: 1px solid #CCCCCC;
    font-family: var(--font-primary);
    font-weight: 400;
    font-size: 16px;
    line-height: 150%;
    color: #1A1A1A;
    vertical-align: top;
    height: 80px;
}

.results-table td a {
    color: #1A1A1A;
    text-decoration: none;
}

.results-table td a:hover {
    text-decoration: underline;
}

/* Pagination */
.results-pagination {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0;
    margin-top: 40px;
    gap: 16px;
    flex-wrap: wrap;
}

.pagination-left {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 80px;
}

.rows-per-page {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.rows-per-page-label {
    font-family: var(--font-primary);
    font-weight: 400;
    font-size: 16px;
    line-height: 150%;
    color: #1A1A1A;
}

.rows-per-page-select {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    padding: 0 16px;
    width: 74px;
    height: 40px;
    background: #FFFFFF;
    border: 1px solid #CCCCCC;
    font-family: var(--font-primary);
    font-size: 16px;
    line-height: 150%;
    color: #1A1A1A;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9L12 15L18 9' stroke='%231A1A1A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    padding-right: 28px;
}

.rows-info {
    font-family: var(--font-primary);
    font-weight: 400;
    font-size: 16px;
    line-height: 150%;
    color: #666666;
}

.pagination-right {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
}

.pagination-nav-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    background: transparent;
    border: none;
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: 14px;
    line-height: 140%;
    color: #0D68CF;
    text-decoration: none;
    cursor: pointer;
    padding: 0 4px;
}

.pagination-nav-btn:hover {
    text-decoration: underline;
}

.pagination-nav-btn:disabled,
.pagination-nav-btn.disabled {
    color: #666666;
    cursor: not-allowed;
}

.pagination-nav-btn:disabled:hover,
.pagination-nav-btn.disabled:hover {
    text-decoration: none;
}

.pagination-page {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    font-family: var(--font-primary);
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #1A1A1A;
    text-decoration: none;
    border-radius: 8px;
}

.pagination-page:hover {
    background: #F5F5F5;
}

.pagination-page.active {
    font-weight: 700;
    position: relative;
}

.pagination-page.active::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 22px;
    height: 3px;
    background: #1A1A1A;
}

.pagination-ellipsis {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: 16px;
    color: #666666;
}

/* No results alert */
.no-results-alert {
    padding: 24px;
    background: #FFF3CD;
    border: 1px solid #FFECB5;
    border-radius: 4px;
    font-family: var(--font-primary);
    font-size: 16px;
    color: #664D03;
    margin-top: 32px;
}

/* ============================= */
/* Details Page                  */
/* ============================= */
.details-container {
    max-width: 1281px;
    margin: 0 auto;
    padding: 40px 64px 80px;
    background: #FFFFFF;
    min-height: 60vh; /* Prevent layout shift */
}

.details-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
}

.back-link {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: 18px;
    line-height: 150%;
    color: #0D68CF;
    text-decoration: none;
}

.back-link:hover {
    text-decoration: underline;
    color: #0D68CF;
}

.nav-buttons {
    display: flex;
    gap: 16px;
}

.details-content {
    display: flex;
    gap: 32px;
}

.details-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.data-section {
    width: 100%;
}

.section-header {
    display: flex;
    align-items: center;
    padding: 8px;
    height: 40px;
    background: #F8F8F8;
    border-bottom: 1px solid #CCCCCC;
    box-sizing: border-box;
}

.section-header-text {
    font-family: var(--font-primary);
    font-weight: 400;
    font-size: 14px;
    line-height: 140%;
    color: #666666;
}

.data-row {
    display: flex;
    border-bottom: 1px solid #CCCCCC;
}

.data-cell {
    flex: 1;
    padding: 16px 8px;
    background: #FFFFFF;
    font-family: var(--font-primary);
    font-weight: 400;
    font-size: 16px;
    line-height: 150%;
    color: #1A1A1A;
    box-sizing: border-box;
}

.data-cell-label {
    flex: 0 0 50%;
}

.data-cell-value {
    flex: 0 0 50%;
}

.images-section {
    margin-top: 40px;
}

.images-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding: 16px 8px;
    border-bottom: 1px solid #CCCCCC;
}

.images-grid img {
    max-width: 220px;
    height: auto;
    border: 1px solid #CCCCCC;
}

/* ============================= */
/* Search History Page           */
/* ============================= */
.history-container {
    max-width: 1281px;
    margin: 0 auto;
    padding: 40px 64px 80px;
    background: #FFFFFF;
    min-height: 60vh; /* Prevent layout shift */
}

.clear-btn {
    box-sizing: border-box;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 12px 24px;
    border: 1px solid #0D68CF;
    background: transparent;
    font-family: var(--font-primary);
    font-weight: 400;
    font-size: 16px;
    line-height: 19px;
    color: #0D68CF;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
    margin-bottom: 48px;
}

.clear-btn:hover {
    background-color: #0D68CF;
    color: #FFFFFF;
}

.history-table {
    width: 100%;
    max-width: 1152px;
    border-collapse: collapse;
}

.history-table thead tr {
    display: flex;
}

.history-table thead th {
    display: flex;
    align-items: center;
    padding: 8px;
    height: 40px;
    background: #F8F8F8;
    border-bottom: 1px solid #CCCCCC;
    font-family: var(--font-primary);
    font-weight: 400;
    font-size: 14px;
    line-height: 140%;
    color: #666666;
    box-sizing: border-box;
}

.history-table thead th:nth-child(1) { width: 67px; flex: 0 0 67px; }
.history-table thead th:nth-child(2) { width: 296px; flex: 0 0 296px; }
.history-table thead th:nth-child(3) { width: 296px; flex: 0 0 296px; }
.history-table thead th:nth-child(4) { width: 296px; flex: 0 0 296px; }
.history-table thead th:nth-child(5) { flex: 1; }

.history-table tbody tr {
    display: flex;
}

.history-table tbody td {
    display: flex;
    align-items: center;
    padding: 16px 8px;
    min-height: 56px;
    background: #FFFFFF;
    border-bottom: 1px solid #CCCCCC;
    font-family: var(--font-primary);
    font-weight: 400;
    font-size: 16px;
    line-height: 150%;
    color: #1A1A1A;
    box-sizing: border-box;
}

.history-table tbody td:nth-child(1) { width: 67px; flex: 0 0 67px; }
.history-table tbody td:nth-child(2) { width: 296px; flex: 0 0 296px; }
.history-table tbody td:nth-child(3) { width: 296px; flex: 0 0 296px; }
.history-table tbody td:nth-child(4) { width: 296px; flex: 0 0 296px; }
.history-table tbody td:nth-child(5) { flex: 1; }

.history-table .search-link {
    background: none;
    border: none;
    padding: 0;
    font-family: var(--font-primary);
    font-weight: 400;
    font-size: 16px;
    line-height: 150%;
    color: #0D68CF;
    cursor: pointer;
    text-decoration: none;
}

.history-table .search-link:hover {
    text-decoration: underline;
}

.empty-message {
    font-family: var(--font-primary);
    font-size: 16px;
    line-height: 150%;
    color: #666666;
    padding: 24px 0;
}

/* ============================= */
/* Popovers (Bootstrap override) */
/* ============================= */
.popover {
    max-width: 400px;
}

.popover-body {
    white-space: normal;
    font-size: 0.9rem;
    line-height: 1.4;
}

/* ============================= */
/* Responsive Styles             */
/* ============================= */

/* Header responsive */
@media (max-width: 768px) {
    .ucl-header__top {
        height: auto;
        min-height: 72px;
    }

    .ucl-header__inner {
        padding: 15px 20px;
        display: flex;
        align-items: center;
        position: static;
    }

    .ucl-logo {
        position: static;
        width: auto;
        height: 40px;
    }

    .ucl-logo::before {
        width: 100%;
        height: 100%;
    }

    .site-title {
        position: static;
        width: auto;
        height: auto;
        margin-left: auto;
        font-size: 18px;
        left: auto;
    }

    .site-navbar {
        height: auto;
        padding: 16px 20px;
    }

    .site-navbar__inner {
        height: auto;
        flex-direction: column;
    }

    .mobile-menu-toggle {
        display: block;
    }

    .site-nav {
        display: none;
        flex-direction: column;
        gap: 0;
        width: 100%;
        height: auto;
    }

    .site-nav.is-open {
        display: flex;
    }

    .site-nav li {
        height: auto;
        width: 100%;
        align-items: flex-start;
    }

    .site-nav__link {
        display: block;
        padding: 0.75rem 0;
        border-bottom: 1px solid #e5e5e5;
        height: auto;
        width: 100%;
        justify-content: flex-start;
    }
}

/* Home page responsive */
@media (max-width: 900px) {
    .home-content {
        flex-direction: column;
        padding: 24px 20px;
    }

    .home-main {
        max-width: 100%;
    }

    .home-sidebar {
        width: 100%;
        max-width: 280px;
    }

    .page-title,
    .search-title,
    .results-heading,
    .details-heading,
    .history-heading {
        font-size: 36px;
        max-width: 100%;
    }

    .lead-text {
        font-size: 18px;
        max-width: 100%;
    }

    .body-text {
        font-size: 16px;
        max-width: 100%;
    }
}

/* Search page responsive */
@media (max-width: 768px) {
    .search-content,
    .advanced-search-content {
        padding: 24px 20px;
    }

    .search-form {
        max-width: 100%;
    }
}

/* Advanced search responsive */
@media (max-width: 1100px) {
    .condition-row {
        flex-wrap: wrap;
        gap: 16px;
    }

    .form-group-inline.field-col,
    .form-group-inline.operator-col,
    .form-group-inline.value-col,
    .form-group-inline.boolean-col {
        width: 100%;
        max-width: 300px;
    }

    .form-group-inline.truncation-col {
        width: auto;
    }
}

/* Results page responsive */
@media (max-width: 768px) {
    .results-container {
        padding: 24px 16px;
    }
    
    .results-controls {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .sort-select {
        width: 100%;
    }
    
    .results-pagination {
        flex-direction: column;
        gap: 24px;
    }
    
    .pagination-left {
        flex-direction: column;
        gap: 16px;
        width: 100%;
    }
}

/* Details page responsive */
@media (max-width: 991px) {
    .details-container {
        padding: 24px;
    }
    
    .details-content {
        flex-direction: column;
    }
    
    .details-nav {
        flex-direction: column;
        gap: 16px;
        align-items: flex-start;
    }
    
    .nav-buttons {
        width: 100%;
        justify-content: flex-start;
    }
}

@media (max-width: 576px) {
    .page-title,
    .search-title,
    .results-heading,
    .details-heading,
    .history-heading {
        font-size: 28px;
    }
    
    .data-row {
        flex-direction: column;
    }
    
    .data-cell-label,
    .data-cell-value {
        flex: 1;
    }
    
    .data-cell-label {
        padding-bottom: 4px;
        font-weight: 700;
    }
    
    .nav-buttons {
        flex-wrap: wrap;
    }
    
    .nav-btn {
        padding: 8px 16px;
        font-size: 14px;
    }
    
    .clear-btn {
        padding: 8px 16px;
        font-size: 14px;
    }
}

/* History table responsive */
@media (max-width: 991px) {
    .history-container {
        padding: 24px;
    }
    
    .history-table {
        display: block;
        overflow-x: auto;
    }
    
    .history-table thead tr,
    .history-table tbody tr {
        display: table-row;
    }
    
    .history-table thead th,
    .history-table tbody td {
        display: table-cell;
        width: auto !important;
        flex: none !important;
    }
}