/* ============================================================================
   UCL Læringsobjekter - Custom Styles
   
   PURPOSE: UCL-specific features NOT covered by Bootstrap 5.3.3
   PRINCIPLE: Bootstrap-first, DRY, modular, cross-file validated
   COMPLIANCE: README.md - responsive, incremental DOM, actually used styles only
   
   ARCHITECTURE:
   - Modular CSS custom properties for DRY
   - Component-based organization 
   - Cross-validated against HTML/JS usage
   - Eliminated duplicate Bootstrap overrides
   ============================================================================ */

:root {
    /* UCL Component Sizing (comprehensive DRY system) */
    --card-img-height: 10rem;
    --search-card-img-height: 7.5rem;
    --touch-target-min: 44px;
    --btn-hover-lift: -1px;
    --transition-smooth: 0.2s ease;
    --border-radius-card: 0.5rem;
    --box-shadow-card: 0 2px 4px rgba(0,0,0,0.1);
    
    /* Responsive font scaling (DRY across components) */
    --font-size-responsive: clamp(0.75rem, 1.5vw, 0.95rem);
    --font-size-title-responsive: clamp(1.1rem, 2.5vw, 1.25rem);
    
    /* UCL gradient overlay system */
    --ucl-gradient-overlay: linear-gradient(to bottom, rgba(0,69,78,0.7) 20%, rgba(0,69,78,0.8) 50%, rgba(0,69,78,0.7) 100%);
    
    /* Spacing system for consistency */
    --spacing-card-padding: 0.75rem 0.5rem;
    --spacing-button-gap: 0.35rem;
    
    /* Modal Hero Section */
    --modal-hero-height: 14.875rem;
    --modal-hero-height-sm: 10.625rem;
    --modal-hero-overlay: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.5));
    
    /* Modal Hero Overlay Padding (Responsive) */
    --modal-hero-overlay-padding: 3rem;
    --modal-hero-overlay-padding-md: 2rem;
    --modal-hero-overlay-padding-sm: 1.25rem;
    
    /* Modal Content Padding (Responsive) */
    --modal-content-padding-x: 2.4rem;
    --modal-content-padding-x-md: 1.8rem;
    --modal-content-padding-x-sm: 1.25rem;
    
    /* Modal Typography */
    --modal-hero-title-size: 2.5rem;
    --modal-hero-title-size-sm: 1.875rem;
    --modal-section-label-size: 0.75rem;
    
    /* Modal Spacing */
    --modal-section-spacing: 2rem;
    --modal-section-spacing-sm: 1.5rem;
    
    /* Modal Colors */
    --modal-divider-color: var(--midnight-green);
    
    /* Modal padding variables (DRY - used across multiple modal components) */
    --modal-padding-x: 2.4rem;
    --modal-padding-x-sm: 1.8rem;
}

/* ===================== */
/* 1. LAYOUT ESSENTIALS  */
/* ===================== */

/* Sticky footer layout using CSS Grid approach (more modern than flexbox) */
body {
    min-height: 100vh;
    display: grid;
    grid-template-rows: auto 1fr auto;
}

/* 5-column responsive grid extension */
@media (min-width: 1400px) {
    .col-xxl-2-4 { width: 20%; }
}

/* Responsive hero title */
.hero-main-title {
    font-size: clamp(2.5rem, 4vw, 4.5rem);
    font-weight: 800; /* Use Proxima Nova Alt Extrabold */
}

/* Header elements (separation of concerns compliance) */
.ucl-logo {
    height: 45px;
}

.version-text {
    font-size: 1rem;
}

/* Search container (full width like object rows) */
.search-container {
    border-radius: 0;
}

/* Search input styling */
#searchInput {
    font-size: 1rem;
    padding: 0.75rem 1rem;
    border-radius: 0;
    border: none;
}

#searchInput:focus {
    outline: none;
    box-shadow: none;
    border: none;
}

/* Search button styling */
#searchBtn {
    align-self: stretch;
    flex-shrink: 0;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background-color: #fce662 !important;
}

#searchBtn:focus {
    outline: none;
    box-shadow: none;
}

/* Search icon styling */
#searchBtn .bi-search {
    font-size: 1.375rem;
    line-height: 1;
}

/* ===================== */
/* 2. UCL BUTTON SYSTEM  */
/* ===================== */

/* Button Architecture: .btn-ucl-maize (base), .ucl-card-btn (compact), .ucl-touch-btn (44px min-height) */

/* UCL Maize button - Bootstrap extension using CSS custom properties */
.btn-ucl-maize {
    --bs-btn-bg: var(--maize);
    --bs-btn-border-color: var(--maize);
    --bs-btn-color: var(--midnight-green);
    --bs-btn-hover-bg: #f5dd4d;
    --bs-btn-hover-border-color: #f5dd4d;
    --bs-btn-hover-color: var(--midnight-green);
    transition: transform var(--transition-smooth);
}

.btn-ucl-maize:hover,
.btn-ucl-maize:focus {
    transform: translateY(var(--btn-hover-lift));
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

/* UCL System Action Button variants (DRY using CSS custom properties) */
.btn-ucl-primary {
    --bs-btn-bg: var(--midnight-green);
    --bs-btn-border-color: var(--midnight-green);
    --bs-btn-color: white;
    --bs-btn-hover-bg: var(--verdigris);
    --bs-btn-hover-border-color: var(--verdigris);
    --bs-btn-hover-color: var(--midnight-green);
    --bs-btn-active-bg: var(--verdigris);
    --bs-btn-active-border-color: var(--verdigris);
    --bs-btn-active-color: var(--midnight-green);
}

.btn-ucl-secondary {
    --bs-btn-bg: var(--dusty-green);
    --bs-btn-border-color: var(--dusty-green);
    --bs-btn-color: white;
    --bs-btn-hover-bg: var(--midnight-green);
    --bs-btn-hover-border-color: var(--midnight-green);
    --bs-btn-hover-color: white;
}

.btn-ucl-warning {
    --bs-btn-bg: var(--terra-cotta);
    --bs-btn-border-color: var(--terra-cotta);
    --bs-btn-color: white;
    --bs-btn-hover-bg: var(--midnight-green);
    --bs-btn-hover-border-color: var(--midnight-green);
    --bs-btn-hover-color: white;
}

.btn-ucl-info {
    --bs-btn-bg: var(--blue-ivory);
    --bs-btn-border-color: var(--blue-ivory);
    --bs-btn-color: white;
    --bs-btn-hover-bg: var(--midnight-green);
    --bs-btn-hover-border-color: var(--midnight-green);
    --bs-btn-hover-color: white;
}

/* Verdigris Button Variant */
.btn-ucl-verdigris {
    background-color: var(--verdigris);
    border-color: var(--verdigris);
    color: #fff;
    font-weight: 500;
}

.btn-ucl-verdigris:hover,
.btn-ucl-verdigris:focus {
    background-color: var(--midnight-green);
    border-color: var(--midnight-green);
    color: #fff;
}

.btn-ucl-verdigris:active {
    background-color: var(--midnight-green);
    border-color: var(--midnight-green);
    color: #fff;
}

/* Remove Bootstrap's default uppercase on buttons and dropdown items */
.btn-ucl-verdigris.dropdown-toggle,
.btn-ucl-verdigris + .dropdown-menu .dropdown-item {
    text-transform: none;
}

/* Sort toggle buttons - inactive state (default) */
.btn-ucl-sort {
    background-color: transparent;
    border: 1px solid var(--midnight-green) !important;
    color: var(--midnight-green);
    transition: all var(--transition-smooth);
}

.btn-ucl-sort:hover {
    background-color: rgba(0, 69, 78, 0.1);
    border-color: var(--midnight-green) !important;
    color: var(--midnight-green);
}

/* Sort toggle buttons - inactive icons with reduced opacity */
.btn-ucl-sort:not(.active) i {
    opacity: 0.5;
    transition: opacity var(--transition-smooth);
}

.btn-ucl-sort:not(.active):hover i {
    opacity: 0.7;
}

/* Sort toggle buttons - active state */
.btn-ucl-sort.active {
    background-color: var(--midnight-green);
    border-color: var(--midnight-green) !important;
    color: white;
}

.btn-ucl-sort.active:hover {
    background-color: var(--midnight-green);
    border-color: var(--midnight-green) !important;
    color: white;
}

/* Sort toggle buttons - active icons at full opacity */
.btn-ucl-sort.active i {
    opacity: 1;
}

/* Search view toggle buttons - consistent border styling and centering */
#searchViewToggle .btn {
    border: 1px solid var(--midnight-green) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.375rem 0.5rem;
}

/* Search view toggle - inactive button icons with reduced opacity */
#searchViewToggle .btn:not(.bg-ucl-midnight-green) i {
    opacity: 0.5;
    transition: opacity var(--transition-smooth);
}

#searchViewToggle .btn:not(.bg-ucl-midnight-green):hover i {
    opacity: 0.7;
}

/* Search view toggle - active button icons at full opacity */
#searchViewToggle .btn.bg-ucl-midnight-green i {
    opacity: 1;
}

/* Card buttons */
.ucl-card-btn {
    padding: clamp(0.25rem, 1.5vw, 0.375rem) clamp(0.5rem, 2vw, 0.75rem);
    font-size: var(--font-size-responsive);
    white-space: nowrap;
    line-height: 1.2;
    transition: all var(--transition-smooth);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Arrow button for modal trigger */
.arrow-modal-trigger {
    position: absolute;
    bottom: 0;
    left: 0;
    min-width: 38px;
    min-height: 36px;
    width: 38px;
    height: 36px;
    border-radius: 0;
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.4);
    border-right: 1px solid rgba(255, 255, 255, 0.4);
    background-color: var(--midnight-green);
    color: white;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    padding: 0;
    font-size: 1rem;
    font-weight: 800;
    cursor: pointer;
    transition: width var(--transition-smooth), gap var(--transition-smooth), padding var(--transition-smooth), box-shadow var(--transition-smooth);
    z-index: 10;
    overflow: hidden;
    white-space: nowrap;
}

.arrow-modal-trigger i {
    -webkit-text-stroke: 0.1rem;
    flex-shrink: 0;
    margin-left: calc((38px - 1rem) / 2);
    transition: margin-left var(--transition-smooth);
}

.arrow-modal-trigger:hover i {
    margin-left: 0;
}

.arrow-modal-text {
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-width var(--transition-smooth), opacity 0.05s ease;
    font-size: 0.875rem;
    font-weight: 600;
    flex-shrink: 0;
}

.arrow-modal-trigger:hover {
    width: auto;
    padding: 0.3rem 0.6rem;
    gap: 0.35rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.arrow-modal-trigger:hover .arrow-modal-text {
    max-width: 100px;
    opacity: 1;
    transition: max-width var(--transition-smooth), opacity var(--transition-smooth);
}

.arrow-modal-trigger:focus {
    outline: 2px solid var(--verdigris);
    outline-offset: 2px;
}

/* Arrow button compact variant (for list view - 75% scale) */
.arrow-modal-trigger--compact {
    width: 28.5px;
    height: 27px;
    min-width: 28.5px;
    min-height: 27px;
    font-size: 0.75rem;
}

.arrow-modal-trigger--compact i {
    margin-left: calc((28.5px - 0.75rem) / 2);
}

.arrow-modal-trigger--compact:hover {
    width: 28.5px;
    height: 27px;
    padding: 0;
    gap: 0;
    box-shadow: none;
}

.arrow-modal-trigger--compact:hover i {
    margin-left: calc((28.5px - 0.75rem) / 2);
}

.arrow-modal-trigger--compact:hover .arrow-modal-text {
    max-width: 0;
    opacity: 0;
}

/* Arrow button table variant (inline, centered, no hover expansion like compact) */
.arrow-modal-trigger--table {
    position: static;
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    font-size: 0.8rem;
    display: inline-flex;
}

.arrow-modal-trigger--table i {
    margin-left: calc((32px - 0.8rem) / 2);
}

.arrow-modal-trigger--table:hover {
    width: 32px;
    height: 32px;
    padding: 0;
    gap: 0;
    box-shadow: none;
}

.arrow-modal-trigger--table:hover i {
    margin-left: calc((32px - 0.8rem) / 2);
}

.arrow-modal-trigger--table:hover .arrow-modal-text {
    max-width: 0;
    opacity: 0;
}

/* Touch-friendly buttons for main actions (accessibility compliant) */
.ucl-touch-btn {
    min-height: var(--touch-target-min);
    padding: clamp(0.375rem, 2vw, 0.5rem) clamp(0.5rem, 2vw, 1.25rem);
    font-size: var(--font-size-responsive);
    white-space: nowrap;
    line-height: 1.2;
    border-radius: 0;
    transition: all var(--transition-smooth);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Responsive button adjustments (consolidated breakpoint system) */
@media (min-width: 576px) and (max-width: 767px) {
    .ucl-card-btn { font-size: 0.75rem; padding: 0.2rem 0.5rem; }
}
@media (min-width: 768px) and (max-width: 991px) {
    .ucl-card-btn { font-size: 0.8rem; padding: 0.25rem 0.6rem; }
}
@media (min-width: 992px) and (max-width: 1399px) {
    .ucl-card-btn { font-size: 0.75rem; padding: 0.2rem 0.55rem; }
}
@media (min-width: 1400px) {
    .ucl-card-btn { font-size: 0.8rem; padding: 0.25rem 0.6rem; }
}

/* UCL Color Preset Buttons (DRY using CSS variables) */
.ucl-color-midnight-green {
    background-color: var(--midnight-green);
    color: var(--white);
}

.ucl-color-verdigris {
    background-color: var(--verdigris);
    color: var(--white);
}

.ucl-color-blue-ivory {
    background-color: var(--blue-ivory);
    color: var(--white);
}

.ucl-color-dusty-green {
    background-color: var(--dusty-green);
    color: var(--white);
}

.ucl-color-terra-cotta {
    background-color: var(--terra-cotta);
    color: var(--white);
}

.ucl-color-violet-shine {
    background-color: var(--violet-shine);
    color: var(--white);
}

/* ===================== */
/* 3. CARD SYSTEM (DRY)  */
/* ===================== */

/* Access badge overlay on card images */
.access-badge {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    min-width: 1.8rem;
    min-height: 1.8rem;
    width: 1.8rem;
    height: 1.8rem;
    background-color: var(--midnight-green);
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 0;
    z-index: 2;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    transition: width var(--transition-smooth), border-radius var(--transition-smooth), gap var(--transition-smooth), padding var(--transition-smooth), box-shadow var(--transition-smooth), justify-content var(--transition-smooth);
    overflow: hidden;
    white-space: nowrap;
}

.access-badge i {
    font-size: 0.8125rem;
    color: white;
    line-height: 1;
    flex-shrink: 0;
    transition: margin-right var(--transition-smooth);
}

.access-badge:hover i {
    margin-right: 0.35rem;
}

.access-badge-text {
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-width var(--transition-smooth), opacity var(--transition-smooth);
    font-size: 0.8125rem;
    font-weight: 600;
    color: white;
    flex-shrink: 0;
}

.access-badge:hover {
    width: auto;
    height: 1.8rem;
    border-radius: 0.9rem;
    justify-content: flex-end;
    gap: 0.35rem;
    padding: 0.3rem 0.6rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.access-badge:hover .access-badge-text {
    max-width: 150px;
    opacity: 1;
}

.access-badge:focus {
    outline: 2px solid var(--verdigris);
    outline-offset: 2px;
}

/* Access badge compact variant (for list view) */
.access-badge--compact {
    right: 0.25rem;
    top: 0.25rem;
    min-width: 1.35rem;
    min-height: 1.35rem;
    width: 1.35rem;
    height: 1.35rem;
}

.access-badge--compact i {
    font-size: 0.65rem;
}

.access-badge--compact:hover {
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
    justify-content: center;
    gap: 0;
    padding: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.access-badge--compact:hover i {
    margin-right: 0;
}

.access-badge--compact:hover .access-badge-text {
    max-width: 0;
    opacity: 0;
}

/* Access badge inline variant (for table view) */
.access-badge--inline {
    position: static;
    display: inline-flex;
    width: auto;
    height: auto;
    min-width: auto;
    min-height: auto;
    border-radius: 0;
    padding: 0.25rem 0.5rem;
    gap: 0.35rem;
    font-size: 0.75rem;
    box-shadow: none;
    border: 1px solid rgba(255, 255, 255, 0.3);
    cursor: pointer;
    transition: none;
}

.access-badge--inline .access-badge-text {
    max-width: none;
    opacity: 1;
    font-size: 0.75rem;
    transition: none;
}

.access-badge--inline i {
    font-size: 0.75rem;
    margin-right: 0;
    transition: none;
}

/* Remove hover and active effects for inline badges */
.access-badge--inline:hover,
.access-badge--inline:active,
.access-badge--inline:focus {
    width: auto;
    height: auto;
    border-radius: 0;
    padding: 0.25rem 0.5rem;
    gap: 0.35rem;
    box-shadow: none;
    justify-content: flex-start;
}

.access-badge--inline:hover .access-badge-text,
.access-badge--inline:active .access-badge-text,
.access-badge--inline:focus .access-badge-text {
    max-width: none;
    opacity: 1;
}

.access-badge--inline:hover i,
.access-badge--inline:active i,
.access-badge--inline:focus i {
    margin-right: 0;
}

/* Responsive: Icon-only on small screens (like compact view) */
@media (max-width: 991px) {
    .access-badge--inline {
        width: 1.5rem;
        height: 1.5rem;
        min-width: 1.5rem;
        min-height: 1.5rem;
        padding: 0;
        border-radius: 50%;
        gap: 0;
        justify-content: center;
        align-items: center;
        transition: none;
    }
    
    .access-badge--inline .access-badge-text {
        display: none;
    }
    
    .access-badge--inline i {
        font-size: 0.7rem;
        margin-right: 0;
        transition: none;
    }
    
    /* Prevent expansion on hover/active/focus in responsive mode */
    .access-badge--inline:hover,
    .access-badge--inline:active,
    .access-badge--inline:focus {
        width: 1.5rem;
        height: 1.5rem;
        padding: 0;
        border-radius: 50%;
        gap: 0;
        box-shadow: none;
    }
}

/* Responsive sizing for access badge */
@media (max-width: 576px) {
    .access-badge {
        min-width: 1.6rem;
        min-height: 1.6rem;
        width: 1.6rem;
        height: 1.6rem;
        padding: 0;
        border-radius: 50%;
        top: 0.5rem;
        right: 0.5rem;
    }
    
    .access-badge i {
        font-size: 0.75rem;
    }
    
    .access-badge-text {
        font-size: 0.75rem;
    }
    
    .access-badge:hover {
        width: auto;
        height: 1.6rem;
        border-radius: 0.8rem;
        padding: 0.25rem 0.5rem;
    }
    
    .access-badge:hover .access-badge-text {
        max-width: 130px;
    }
}

.card-img-fixed {
    height: var(--card-img-height);
    object-fit: cover;
    width: 100%;
    display: block;
    border-radius: 0;
}

/* Background image for dynamic search card content */
.card-img-bg {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: var(--card-img-height);
    display: block;
}

/* Clickable image wrapper for navigation */
.card-image-link {
    display: block;
    position: relative;
    cursor: pointer;
    transition: transform var(--transition-smooth);
}

#lazy-load-sentinel {
    height: 1px;
    overflow: hidden;
}

.tag-filter-control {
    font-size: 0.8rem;
}

.tag-filter-dropdown-toggle::after {
    color: var(--verdigris) !important;
    border-top-color: var(--verdigris) !important;
}

.qr-url-text {
    word-break: break-all;
}

/* Hover overlay with "Åbn" text */
.card-image-link::after {
    content: 'Åbn';
    position: absolute;
    inset: 0;
    background-color: rgba(0, 69, 78, 0);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    opacity: 0;
    transition: background-color var(--transition-smooth), opacity var(--transition-smooth);
    pointer-events: none;
}



.card-image-link:hover::after {
    background-color: rgba(0, 69, 78, 0.9);
    opacity: 1;
}

/* Compact variant for smaller thumbnails in list view */
.card-image-link--compact::after {
    font-size: 1rem;
}

/* Title below image in card body */
.card-title-link {
    display: block;
    color: var(--midnight-green);
    text-decoration: none;
    font-weight: 700;
    font-size: clamp(1rem, 2vw, 1.125rem);
    line-height: 1.2;
    margin-bottom: 0.125rem;
    cursor: pointer;
    transition: color var(--transition-smooth);
}

.card-title-link:hover,
.card-title-link:focus {
    color: var(--verdigris);
    text-decoration: underline;
}

/* Section headers styled like larger card titles */
.section-header-card-style {
    color: var(--midnight-green);
    font-weight: 700;
    font-size: clamp(1.25rem, 2.5vw, 1.5rem);
    line-height: 1.2;
    margin-bottom: 1rem;
}

/* Lesson title styling */
.lesson-title-link {
    display: inline-block;
    color: var(--midnight-green);
    text-decoration: none;
    font-weight: 700;
    font-size: 0.9rem;
    line-height: 1.2;
    transition: color var(--transition-smooth);
}

.lesson-title-link:hover,
.lesson-title-link:focus {
    color: var(--verdigris);
    text-decoration: underline;
}

/* Lesson hit count badge */
.lesson-hit-badge {
    display: inline-block;
    font-weight: 700;
    font-size: 0.9rem;
    line-height: 1.2;
    padding: 0.15rem 0.5rem;
    border-radius: 0.25rem;
    background-color: var(--maize);
    color: var(--midnight-green);
    vertical-align: middle;
}

/* UCL Card Base */
.card {
    border: 0;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
}

[data-lessons-container],
[data-lessons-container] .list-group-item {
    background: transparent;
}

/* Lesson items */
.list-group-flush .list-group-item {
    padding-left: 0;
    padding-right: 0;
}

/* Dividing line after enhanced lesson results */
.list-group-flush.border-top {
    border-bottom: 1px solid rgba(0, 0, 0, 0.125) !important;
}

/* Search result cards (compact variant) */
.search-result-card .card-img-fixed {
    height: var(--search-card-img-height);
}

.search-result-card .card-img-overlay {
    justify-content: center;
}

.search-result-card .card-img-title-overlay {
    pointer-events: none;
}

/* Search results container border compensation */
#searchResultsContainer {
    margin-left: calc(-1rem - 2px) !important;
    margin-right: calc(-1rem - 2px) !important;
}

@media (min-width: 768px) {
    #searchResultsContainer {
        margin-left: calc(-1.5rem - 2px) !important;
        margin-right: calc(-1.5rem - 2px) !important;
    }
}

/* Compact list view - Bootstrap list-group with minimal overrides */
#searchResults .row.g-2 {
    margin-left: -20px;
    margin-top: 12px !important;
}

/* Top-align both image and text columns for consistent layout */
#searchResults .row.g-2 .list-group-item {
    align-items: start !important;
}

.list-group-item img[data-field="thumbnail"] {
    width: clamp(5.5rem, 11vw, 6.6rem);
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* Line-clamp title to 2 lines (inherits responsive font-size from .card-title-link) */
.list-group-item .card-title-link {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Table view - Bootstrap table with minimal overrides */
/* Column widths: minimal utility columns, primary expansion to title, secondary to tags */
.table .col-title {
    width: 40%;
    min-width: 200px;
}

.table .col-lessons {
    width: 8%;
    min-width: 70px;
}

.table .col-hits {
    width: 8%;
    min-width: 70px;
}

.table .col-access {
    width: 10%;
    min-width: 90px;
}

.table .col-tags {
    width: 26%;
    min-width: 140px;
    vertical-align: middle;
}

.table .col-actions {
    width: 8%;
    min-width: 55px;
}

/* Compact tag display in table cells - use base styling with smaller font */
.table .col-tags .tag-badge-responsive {
    font-size: 0.7rem;
}

/* Consistent badge sizing in table view - match lesson count to hit count */
.table .col-lessons .badge {
    font-size: 0.9rem;
}

/* Scale down access badge and modal button in table view */
.table .col-access .access-badge--inline {
    font-size: 0.85em;
}

.table .col-actions .arrow-modal-trigger--table {
    font-size: 0.85em;
    width: 27px;
    height: 27px;
    min-width: 27px;
    min-height: 27px;
    align-items: center;
    justify-content: center;
}

.table .col-actions .arrow-modal-trigger--table i {
    margin-left: 0;
}

.table .col-actions .arrow-modal-trigger--table:hover i {
    margin-left: 0;
}

/* Table row borders - horizontal dividers */
.table tbody tr td {
    border-bottom: 1px dashed var(--columbia-blue, #E6F1F0) !important;
}

/* Table row hover enhancement */
.table-hover tbody tr:hover {
    background-color: var(--columbia-blue, #E6F1F0);
}

/* Table row expansion pattern */
.table-row-clickable {
    cursor: pointer;
}

.table-row-clickable .table-expand-icon {
    font-size: 0.875rem;
    color: var(--ucl-midnight-green, #00342E);
    transition: transform 0.2s ease;
    display: inline-block;
    vertical-align: middle;
}

.table-row-clickable[aria-expanded="true"] .table-expand-icon {
    transform: rotate(90deg);
}

/* Lessons expansion row */
.table-lessons-row td {
    border-top: none;
    background-color: var(--light-grey, #F5F5F5);
}

.table-lessons-container {
    padding: 1rem 1.5rem;
}

.table-lessons-container .list-group {
    margin-top: 0;
    border-top: none;
}

/* Lesson item columns aligned with table columns */
/* Neutralize Bootstrap flexbox behavior in table view */
.table-lessons-container .row {
    display: block;
}

.table-lessons-container .col-lesson-title,
.table-lessons-container .col-lesson-hits {
    display: inline-block;
    flex: none;
    max-width: none;
    padding-left: 0;
    padding-right: 0;
    vertical-align: top;
}

.table-lessons-container .col-lesson-title {
    width: 48%;
    padding-right: 1rem;
}

.table-lessons-container .col-lesson-hits {
    width: 8%;
    min-width: 70px;
    text-align: center;
}

/* Table view top margin matches grid/compact views */
#searchResults .table-responsive {
    margin-top: 28px !important;
}

/* Table header typography */
.table thead th {
    font-weight: 600;
    line-height: 1.3;
    vertical-align: middle;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

/* Responsive header adjustments */
@media (max-width: 1199px) {
    .table .col-title {
        width: 35%;
        min-width: 180px;
    }
    
    .table .col-tags {
        width: 28%;
    }
    
    .table .col-lessons,
    .table .col-hits,
    .table .col-access {
        min-width: 60px;
    }
    
    .table thead th.small {
        font-size: 0.775rem;
    }
}

@media (max-width: 991px) {
    .table .col-title {
        width: 30%;
        min-width: 150px;
    }
    
    .table .col-tags {
        width: 30%;
    }
    
    .table .col-actions {
        width: 10%;
    }
}

/* Responsive table behavior - horizontal scroll on mobile */
@media (max-width: 991px) {
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ===================== */
/* 4. SEARCH & FILTERING */
/* ===================== */

/* Tag filtering system */
.tag-dropdown-menu {
    min-width: 18rem;
    max-height: 22rem;
    overflow-y: auto;
    padding: 0.5rem 0.75rem;
}

/* Tag dropdown content sizing */
.tag-dropdown-menu .tag-item-responsive {
    font-size: 0.8125rem !important;
    padding: 0.25rem 0.5rem !important;
}

.tag-dropdown-menu .tag-category-header {
    font-size: 0.75rem !important;
}

/* Tag system */
.tag-category-header {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--bs-secondary);
    margin: 0.5rem 0 0.3rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.tag-category-header:first-child { margin-top: 0; }

.tag-category-container {
    margin-bottom: 0.75rem;
}

.tag-category-container:last-child {
    margin-bottom: 0;
}

/* Responsive tag components */
.tag-badge-responsive,
.tag-item-responsive {
    display: inline;
    line-height: 1.2;
    margin: 0;
    padding: 0;
    font-size: 0.875rem;
}

/* Tag item button styling */
.tag-item-responsive {
    font-size: 0.8125rem;
    padding: 0.3rem 0.6rem;
}

/* UCL Blue background */
.bg-ucl-blue {
    background-color: var(--blue-ivory) !important;
}

/* UCL Verdigris background utility */
.bg-ucl-verdigris {
    background-color: var(--verdigris) !important;
}

/* UCL Badge utility classes for status indicators */
.bg-ucl-dusty-green {
    background-color: var(--dusty-green) !important;
    color: white !important;
}

.bg-ucl-emerald {
    background-color: #0da678 !important;
    color: white !important;
}

.bg-ucl-terra-cotta {
    background-color: var(--terra-cotta) !important;
    color: white !important;
}

.bg-ucl-midnight-green {
    background-color: var(--midnight-green) !important;
    color: white !important;
}

.bg-ucl-blue-ivory {
    background-color: var(--blue-ivory) !important;
    color: white !important;
}

.bg-ucl-violet-shine {
    background-color: var(--violet-shine) !important;
    color: white !important;
}

/* Desktop tag sizing */
@media (min-width: 768px) {
    .tag-badge-responsive,
    .tag-item-responsive {
        margin: 0;
        padding: 0;
    }
}

/* Selected tags with interactive X buttons */
.selected-tags-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    min-height: 1.5rem;
}

.selected-tag-item {
    position: relative;
    transition: all var(--transition-smooth);
}

.selected-tag-item .selected-tag-text {
    position: relative;
    padding: 0.25rem 0.5rem;
    transition: all var(--transition-smooth);
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    overflow: hidden;
    background-color: var(--midnight-green);
    color: white;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
}

.selected-tag-item .btn-close {
    position: absolute;
    right: 0.3rem;
    top: 50%;
    transform: translateY(-50%) scale(0);
    opacity: 0;
    transition: all var(--transition-smooth);
    width: 0.75rem;
    height: 0.75rem;
    background-size: 0.5rem;
    pointer-events: none;
}

.selected-tag-item:hover .selected-tag-text,
.selected-tag-item:focus-within .selected-tag-text {
    padding-right: 1.6rem;
    filter: brightness(0.95);
}

.selected-tag-item:hover .btn-close,
.selected-tag-item:focus-within .btn-close {
    transform: translateY(-50%) scale(1);
    opacity: 0.8;
    pointer-events: auto;
}

.selected-tag-item:focus-within .selected-tag-text {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

.selected-tag-item .btn-close:hover {
    opacity: 1;
    transform: translateY(-50%) scale(1.1);
}

/* Search highlighting */
mark {
    /* Override Bootstrap default padding for search result highlighting */
    padding: 0;
    background-color: color-mix(in srgb, var(--maize) 60%, transparent);
    border-radius: 0.12rem;
}

mark.bg-warning {
    background-color: color-mix(in srgb, var(--maize) 60%, transparent) !important;
    padding: 0 0.12rem;
    border-radius: 0.12rem;
}

/* Expanded tag display */
.card-visible-tags-expanded {
    display: block;
    margin: 0;
    padding: 0.25rem 0;
    line-height: 1.3;
    cursor: pointer;
    user-select: none;
    border-radius: var(--border-radius-card);
    transition: background-color 0.2s ease;
}

.card-visible-tags-expanded:hover {
    background-color: var(--bs-light);
}

.card-visible-tags-expanded .tag-badge-responsive {
    font-size: 0.75rem;
    padding: 0;
    margin: 0;
    opacity: 0.85;
    pointer-events: none;
}

.tag-overflow-indicator {
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0;
    margin-left: 0.35rem;
    background-color: transparent;
    color: var(--verdigris);
    border-radius: 0;
    transition: all 0.2s ease;
    pointer-events: none;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.tag-overflow-indicator .bi {
    font-size: 0.7rem;
    transition: transform 0.2s ease;
}

.card-visible-tags-expanded[data-expanded="true"] .tag-overflow-indicator .bi {
    transform: rotate(180deg);
}

/* Lesson context snippet */
.lesson-context-snippet {
    font-size: 0.75rem;
    opacity: 0.85;
    line-height: 1.3;
    margin-top: 0.25rem;
    color: var(--bs-secondary);
}

.show-more-tags-btn {
    border: none !important;
    text-decoration: none !important;
    transition: color 0.2s ease;
    margin-top: 0.25rem;
    background: none !important;
}

.show-more-tags-btn:hover {
    color: var(--midnight-green) !important;
    text-decoration: underline !important;
}

.show-more-tags-btn:focus {
    outline: 2px solid var(--midnight-green);
    outline-offset: 2px;
    border-radius: 0.25rem;
}

/* Bootstrap tooltip styling with UCL colors */
.tooltip {
    font-size: 0.875rem;
}

.tooltip .tooltip-inner {
    background-color: var(--columbia-blue) !important;
    color: var(--midnight-green) !important;
    padding: 0.5rem 0.75rem;
    border-radius: 0.25rem;
    font-weight: 500;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.tooltip.bs-tooltip-top .tooltip-arrow::before,
.tooltip.bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before {
    border-top-color: var(--columbia-blue) !important;
}

.tooltip.bs-tooltip-bottom .tooltip-arrow::before,
.tooltip.bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow::before {
    border-bottom-color: var(--columbia-blue) !important;
}

.tooltip.bs-tooltip-start .tooltip-arrow::before,
.tooltip.bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow::before {
    border-left-color: var(--columbia-blue) !important;
}

.tooltip.bs-tooltip-end .tooltip-arrow::before,
.tooltip.bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow::before {
    border-right-color: var(--columbia-blue) !important;
}

/* ===================== */
/* 5. UTILITIES & ADMIN  */
/* ===================== */

/* Modal shared classes */
.modal-section-heading {
    font-size: 0.9rem;
    color: var(--midnight-green);
    font-weight: 600;
    letter-spacing: 0.05em;
    font-style: italic;
    line-height: 1.0;
    margin-bottom: 0.35rem;
}

.modal-body-text {
    font-size: 0.875rem;
    line-height: 1.4;
    color: #212529;
}

/* Access banner custom styling */
.modal-access-banner {
    background-color: #E6F1F0;
    border-color: #d0e5e3;
}

/* Utility classes (Bootstrap extensions) */
.cursor-pointer {
    cursor: pointer;
}

/* Show more lessons button - interactive list item */
button.list-group-item.cursor-pointer {
    transition: background-color var(--transition-smooth), color var(--transition-smooth);
    border: none;
    text-align: left;
}

button.list-group-item.cursor-pointer:hover {
    background-color: var(--verdigris) !important;
    color: white !important;
}

button.list-group-item.cursor-pointer:focus {
    outline: 2px solid var(--verdigris);
    outline-offset: 2px;
    background-color: var(--verdigris) !important;
    color: white !important;
}

.ucl-sortable-header {
    cursor: pointer;
}

/* Progress bar */
.progress-bar {
    width: var(--progress-width, 0%);
}

/* Search results header font size normalization */
#searchResultsHeader {
    font-size: clamp(1rem, 3vw, 1.5rem);
}

#searchResultsHeader .lesson-hit-badge {
    font-size: clamp(0.85rem, 2vw, 1.05rem);
    line-height: 1;
    vertical-align: 0.1em;
    padding: 0.05rem 0.4rem;
    display: inline-block;
}

/* Authentication badge sizing */
.auth-user-badge {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    line-height: 1.5;
    vertical-align: middle;
    border-radius: 0;
    border: 1px solid transparent;
    height: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

/* Ensure icon doesn't add extra height */
.auth-user-badge i {
    font-size: 0.875rem;
    line-height: 1;
}

/* Authentication dropdown button hover/focus states */
.auth-user-badge.dropdown-toggle:hover,
.auth-user-badge.dropdown-toggle:focus {
    opacity: 0.9;
    box-shadow: 0 0 0 0.2rem rgba(0, 69, 78, 0.25);
}

/* Authentication dropdown menu */
#auth-dropdown-menu {
    min-width: 12rem;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 0;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.175);
    padding: 0.5rem 0;
    font-size: 0.875rem;
}

#auth-dropdown-menu .dropdown-item {
    padding: 0.25rem 1rem;
    color: var(--midnight-green);
    transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
    font-size: 0.875rem;
    line-height: 1;
}

#auth-dropdown-menu .dropdown-item:hover,
#auth-dropdown-menu .dropdown-item:focus {
    background-color: var(--columbia-blue);
    color: var(--midnight-green);
}

#auth-dropdown-menu .dropdown-item i {
    width: 1.25rem;
    text-align: center;
}

#auth-dropdown-menu .dropdown-divider {
    margin: 0.5rem 0;
    border-top: 1px solid rgba(0, 0, 0, 0.15);
}

/* Admin component styles */
.admin-stats-card {
    background: var(--light-grey);
    border: none;
    border-radius: 0;
    box-shadow: none;
}

/* Table column sizing */
.col-checkbox {
    width: 40px;
}

.col-status {
    width: 60px;
}

.col-actions {
    width: 120px;
}

/* ===================== */
/* 6. ERROR PAGE STYLES  */
/* ===================== */

/* Error page background */
body.error-page {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    min-height: 100vh;
}

/* Error container */
.error-container {
    background: white;
    border-radius: 0;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    padding: 3rem 2.5rem;
    max-width: 600px;
    margin: 0 auto;
}

/* Error icon */
.error-icon {
    font-size: 3.5rem;
    line-height: 1;
    margin-bottom: 1rem;
}

/* Error heading */
.error-heading {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    line-height: 1.3;
}

/* Error details list */
.error-details {
    background: rgba(0, 69, 78, 0.03);
    border-radius: 8px;
    padding: 1.25rem;
    margin: 1.5rem 0;
}

.error-details p {
    margin-bottom: 0.75rem;
}

.error-details p:last-child {
    margin-bottom: 0;
}

/* Error page alert variants */
.error-alert-terra-cotta {
    border-left: 5px solid var(--ucl-terra-cotta) !important;
}

.error-alert-midnight-green {
    border-left: 5px solid var(--ucl-midnight-green) !important;
}

.error-alert-blue-ivory {
    border-left: 5px solid var(--ucl-blue-ivory) !important;
}

.error-alert-violet-shine {
    border-left: 5px solid var(--ucl-violet-shine) !important;
}

/* Responsive error page adjustments */
@media (max-width: 768px) {
    .error-container {
        padding: 2rem 1.5rem;
    }
    
    .error-icon {
        font-size: 2.5rem;
    }
    
    .error-heading {
        font-size: 1.5rem;
    }
}

/* Upload and interaction components */
.upload-dropzone {
    min-height: 200px;
    cursor: pointer;
}

.event-log-container {
    height: 500px;
    overflow-y: auto;
    background-color: #1a1a1a;
    color: #e0e0e0;
    font-family: 'Courier New', monospace;
    font-size: 0.875rem;
    line-height: 1.4;
    border-radius: 0.375rem;
}

/* Responsive height matching for wider screens */
@media (min-width: 992px) {
    .event-log-container {
        height: calc(100vh - 400px);
        min-height: 600px;
        max-height: 800px;
    }
    
    /* Ensure equal height columns for consistent layout */
    #system-info-panel .row {
        align-items: stretch;
    }
    
    /* Make left column content fill available height */
    #system-info-panel .col-lg-8 {
        display: flex;
        flex-direction: column;
    }
    
    /* Event log card should expand to fill column */
    #system-info-panel .col-lg-8 .card:last-child {
        flex: 1;
        display: flex;
        flex-direction: column;
    }
    
    /* Card body should expand within the card */
    #system-info-panel .col-lg-8 .card:last-child .card-body {
        flex: 1;
        display: flex;
        flex-direction: column;
    }
    
    /* Event log container should fill the card body */
    #system-info-panel .col-lg-8 .card:last-child .event-log-container {
        flex: 1;
        height: auto;
        min-height: 500px;
    }
}

/* Log entry styling */
.log-entry:last-child {
    border-bottom: none !important;
}

/* Log message styling for readability */
.log-entry .log-message {
    font-family: 'Courier New', monospace;
    font-size: 0.875rem;
    word-break: break-word;
}

/* Log category background colors */
.log-entry[data-log-category="error"] {
    background-color: rgba(220, 53, 69, 0.1);
    border-left: 3px solid #dc3545;
}

.log-entry[data-log-category="warning"] {
    background-color: rgba(255, 193, 7, 0.1);
    border-left: 3px solid #ffc107;
}

.log-entry[data-log-category="security"] {
    background-color: rgba(13, 202, 240, 0.1);
    border-left: 3px solid #0dcaf0;
}

.log-entry[data-log-category="transfer"],
.log-entry[data-log-category="success"] {
    background-color: rgba(25, 135, 84, 0.1);
    border-left: 3px solid #198754;
}

.log-entry[data-log-category="admin"] {
    background-color: rgba(13, 110, 253, 0.1);
    border-left: 3px solid #0d6efd;
}

.log-entry[data-log-category="system"],
.log-entry[data-log-category="info"] {
    background-color: rgba(108, 117, 125, 0.1);
    border-left: 3px solid #6c757d;
}

/* Log level background colors for error cases */
.log-entry[data-log-level="error"] {
    background-color: rgba(220, 53, 69, 0.15);
}

.log-entry[data-log-level="warn"] {
    background-color: rgba(255, 193, 7, 0.15);
}



/* Progress indicators */
.upload-progress {
    height: 4px;
}

.upload-progress-bar {
    width: 100%;
}

/* Admin loading spinners - UCL brand color */
#tags-list .spinner-border {
    color: var(--verdigris) !important;
}

.admin-loading-spinner {
    color: var(--verdigris) !important;
}

/* Modal containers (responsive scrolling) */
.file-list-container {
    max-height: 400px;
    overflow-y: auto;
}

.tag-categories-container {
    max-height: 400px;
    overflow-y: auto;
}

/* Modal responsive overflow prevention */
.modal-body {
    overflow-x: hidden;
    overflow-y: hidden;
}

.modal-body.scrollable {
    overflow-y: auto;
}

.modal-body * {
    max-width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.modal-body img,
.modal-body canvas,
.modal-body svg {
    max-width: 100%;
    height: auto;
}

.modal-body pre,
.modal-body code {
    white-space: pre-wrap;
    word-break: break-word;
}

.modal-content {
    overflow: hidden;
}

/* Admin panel tab styling with UCL colors */
.nav-tabs .nav-link {
    color: var(--midnight-green);
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
    color: var(--midnight-green);
    border-color: var(--verdigris);
}

.nav-tabs .nav-link.active {
    background-color: var(--light-grey);
    border-bottom-color: transparent;
}

/* Admin panel UCL brand compliance - comprehensive text color override */
main.container,
main.container label,
main.container .form-label,
main.container .card-body,
main.container .list-group-item,
main.container .alert,
main.container .modal-body,
main.container .modal-header {
    color: var(--midnight-green) !important;
}

/* Preserve white text where intended */
main.container .text-white,
main.container .badge.text-white,
main.container [style*="color: white"],
main.container .btn .text-white,
main.container .bg-ucl-primary,
main.container .bg-dark,
main.container .footer {
    color: var(--white) !important;
}

/* Admin table styling */
#objects-table th {
    color: var(--midnight-green) !important;
    font-weight: 600;
}

#objects-table td strong,
#objects-table td [data-field="title"] {
    color: var(--midnight-green) !important;
}

/* Admin table text colors */
.table td.text-muted,
.table th.text-muted {
    color: var(--bs-secondary) !important;
    font-size: 0.875rem;
}

/* Admin mobile card styling */
#objects-mobile-cards .card {
    transition: var(--transition-smooth);
    border: 1px solid rgba(0,69,78,0.1);
}

#objects-mobile-cards .card:hover {
    transform: translateY(var(--btn-hover-lift));
    box-shadow: var(--box-shadow-card);
}

#objects-mobile-cards .card-title {
    color: var(--midnight-green) !important;
    font-weight: 600;
    font-size: var(--font-size-title-responsive);
}

#objects-mobile-cards .btn.ucl-touch-btn {
    min-height: var(--touch-target-min);
    min-width: var(--touch-target-min);
    padding: 0.5rem;
}

/* Responsive typography for mobile cards */
#objects-mobile-cards small {
    font-size: var(--font-size-responsive);
    line-height: 1.4;
}

/* Admin panel log system */
.log-entry {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 0.5rem;
    font-size: 0.6em;
    transition: background-color 0.2s ease;
}

.log-entry:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

.log-entry:first-child {
    animation: logFadeIn 0.3s ease-in;
}

@keyframes logFadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.log-header { margin-bottom: 0.25rem; }

.log-time {
    font-family: monospace;
    color: rgba(255, 255, 255, 0.6);
}

.log-component,
.log-category {
    font-size: 0.4rem;
}

.log-message code {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.6rem;
    line-height: 1.4;
    display: block;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* Log level styling */
.log-error .log-message code {
    background: rgba(220, 53, 69, 0.2);
    border-left: 3px solid #dc3545;
}

.log-warn .log-message code {
    background: rgba(255, 193, 7, 0.2);
    border-left: 3px solid #ffc107;
    color: #212529;
}

.log-info .log-message code {
    background: rgba(13, 202, 240, 0.2);
    border-left: 3px solid #0dcaf0;
}

.log-log .log-message code {
    background: rgba(255, 255, 255, 0.1);
    border-left: 3px solid rgba(255, 255, 255, 0.3);
}

/* Admin log categories */
.log-category-error { background: rgba(220, 53, 69, 0.1); border-left: 3px solid #dc3545; }
.log-category-warning { background: rgba(255, 193, 7, 0.1); border-left: 3px solid #ffc107; }
.log-category-security { background: rgba(13, 110, 253, 0.1); border-left: 3px solid #0d6efd; }
.log-category-success { background: rgba(25, 135, 84, 0.1); border-left: 3px solid #198754; }
.log-category-transfer { background: rgba(102, 16, 242, 0.1); border-left: 3px solid #6610f2; }
.log-category-admin { background: rgba(255, 99, 132, 0.1); border-left: 3px solid #ff6384; }
.log-category-system { background: rgba(75, 192, 192, 0.1); border-left: 3px solid #4bc0c0; }
.log-category-info { background: rgba(108, 117, 125, 0.1); border-left: 3px solid #6c757d; }

/* Admin commit history */
.commit-body {
    white-space: pre-wrap;
    word-break: break-word;
}

/* Dark theme scrollbar */
#event-log-container::-webkit-scrollbar { width: 8px; }
#event-log-container::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.1); }
#event-log-container::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.3); border-radius: 4px; }
#event-log-container::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.5); }

/* ===================== */
/* 6. QUEUE SYSTEM       */
/* ===================== */

/* Queue card styling */

/* Queue cards container — responsive card grid */
.queue-cards-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
    align-items: start;
}

/* Empty state spans all columns */
.queue-cards-container .queue-empty-state {
    grid-column: 1 / -1;
}

/* Analytics chart card period stamp */
.analytics-period-stamp {
    font-weight: normal;
    font-style: italic;
    font-size: 0.8em;
    opacity: 0.75;
}

/* Queue card base styling */
.queue-card {
    border-color: var(--bs-border-color) !important;
    transition: border-color var(--transition-smooth), box-shadow var(--transition-smooth);
}

/* Queue card status styling */
.queue-card[data-queue-status="processing"] {
    border-color: var(--bs-warning) !important;
    box-shadow: 0 0 0 0.125rem rgba(var(--bs-warning-rgb), 0.25);
}

.queue-card[data-queue-status="completed"] {
    border-color: var(--bs-success) !important;
}

.queue-card[data-queue-status="failed"] {
    border-color: var(--bs-danger) !important;
}

/* Progress bar smooth animations */
.queue-card .progress-bar {
    transition: width 0.5s ease;
}

/* ===================== */
/* UCL COLOR PRESETS    */
/* ===================== */

/* Tag management color presets */
.ucl-color-midnight-green { background-color: #00454e !important; }
.ucl-color-verdigris { background-color: #47b9b3 !important; }
.ucl-color-blue-ivory { background-color: #007090 !important; }
.ucl-color-dusty-green { background-color: #85b57b !important; }
.ucl-color-terra-cotta { background-color: #ee866f !important; }
.ucl-color-violet-shine { background-color: #d56e8f !important; }

/* Hide/show utility classes */
.ucl-hidden { display: none !important; }
.ucl-visible { display: block !important; }
.ucl-visible-flex { display: flex !important; }
.ucl-visible-inline { display: inline !important; }
.ucl-visible-inline-block { display: inline-block !important; }

/* ===================== */
/* 6. MODAL SYSTEM       */
/* ===================== */

/* Modal scrollable behavior */
.modal-dialog-scrollable {
    max-height: calc(100vh - 3.5rem);
}

.modal-dialog-scrollable .modal-body {
    overflow-y: auto;
    max-height: calc(100vh - 210px);
}

/* Learning Object Detail Modal - Hero Section */

/* Modal Hero Section */
.modal-hero-container {
    position: relative;
    height: var(--modal-hero-height);
    overflow: hidden;
}

.modal-hero-image {
    object-fit: cover;
    object-position: center;
}

.modal-hero-overlay {
    background: var(--modal-hero-overlay);
    padding: var(--modal-hero-overlay-padding);
}

.modal-hero-title {
    color: #fff;
    font-size: var(--modal-hero-title-size);
    font-weight: 700;
    font-style: italic;
    margin: 0;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
    line-height: 1.2;
    max-height: 5.5em; /* ~4-5 lines */
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    line-clamp: 5;
    -webkit-box-orient: vertical;
}

/* Access Banner */
#objectDetailModal [data-container="modal-access-banner"] .alert {
    margin: 0 !important;
    padding: 0.5625rem var(--modal-padding-x);
    border: none !important;
    border-top: 1px solid rgba(0,0,0,.1) !important;
    border-radius: 0 !important;
    font-size: 0.875rem;
    font-weight: 500;
    text-align: center;
}

/* Modal Two-Column Layout */
.modal-content-grid {
    padding-left: var(--modal-content-padding-x);
    padding-right: var(--modal-content-padding-x);
}

/* Expandable Description */
.modal-description-text {
    font-size: 0.95rem;
}

.modal-description-wrapper {
    margin-bottom: 0;
}

.modal-description-collapsed {
    max-height: 9em;
    overflow: hidden;
    position: relative;
}

.modal-description-collapsed::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2em;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
    pointer-events: none;
}

.modal-description-expanded {
    max-height: none;
}

.modal-description-toggle {
    background: none;
    border: none;
    color: var(--verdigris);
    font-size: 0.875rem;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: color 0.2s ease;
    font-weight: 700;
    font-style: italic;
    text-transform: uppercase;
    text-decoration: none;
    margin-top: -0.5rem;
}

.modal-description-toggle:hover {
    color: var(--midnight-green);
    text-decoration: none;
}

.modal-description-toggle .bi {
    transition: transform 0.3s ease;
    font-size: 0.75rem;
    position: relative;
}

/* Custom bolder chevron icons */
.modal-description-toggle .bi-chevron-down::before,
.modal-description-toggle .bi-chevron-up::before {
    content: '';
    display: inline-block;
    width: 0.75rem;
    height: 0.75rem;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.modal-description-toggle .bi-chevron-down::before {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2347b9b3' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='2 5 8 11 14 5'/%3e%3c/svg%3e");
}

.modal-description-toggle .bi-chevron-up::before {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2347b9b3' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='14 11 8 5 2 11'/%3e%3c/svg%3e");
}

.modal-description-toggle:hover .bi-chevron-down::before,
.modal-description-toggle:hover .bi-chevron-up::before {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2300454e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='2 5 8 11 14 5'/%3e%3c/svg%3e");
}

.modal-description-toggle:hover .bi-chevron-up::before {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2300454e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='14 11 8 5 2 11'/%3e%3c/svg%3e");
}

.modal-description-toggle[aria-expanded="true"] .bi {
    transform: rotate(180deg);
}

/* Tags Sidebar */
.modal-sidebar-tags {
    height: fit-content;
}

.modal-sidebar-tags li {
    margin-bottom: 0.3rem;
    padding-left: 0;
    position: relative;
    display: block;
}

.modal-sidebar-tags li span {
    display: block;
    color: var(--verdigris);
}

.modal-sidebar-tags li:last-child {
    margin-bottom: 0;
}

/* Simplified Metadata Row - Now using Bootstrap grid */
/* When inside accordion, remove extra spacing - dividers handle it */
.modal-advanced-accordion .modal-metadata-simple {
    padding: 0;
    margin-bottom: 0;
}

.modal-metadata-simple-subvalue {
    margin-top: 0.25rem;
}

/* Advanced Accordion Section */
.modal-advanced-accordion {
    border: none;
}

.modal-advanced-accordion .accordion-item {
    border: none;
    background-color: transparent;
}

.modal-advanced-accordion .accordion-button {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--midnight-green);
    padding: 0.65rem var(--modal-padding-x);
    border: none;
    min-height: auto;
    height: auto;
}

.modal-advanced-accordion .accordion-button:not(.collapsed) {
    background-color: #e9ecef;
    color: var(--midnight-green);
    box-shadow: none;
}

.modal-advanced-accordion .accordion-button:focus {
    box-shadow: none;
    border-color: transparent;
}

.modal-advanced-accordion .accordion-button::after {
    margin-left: auto;
}

.modal-advanced-accordion .accordion-body {
    padding: 1.5rem var(--modal-padding-x);
    border: none;
}

/* Version Grid */

/* Accordion content styling */
.modal-advanced-section div[data-field] p,
.modal-advanced-section div[data-container] p {
    margin: 0 0 0.5rem 0;
}

.modal-advanced-section div[data-field] p:last-child,
.modal-advanced-section div[data-container] p:last-child {
    margin-bottom: 0;
}

/* Version history and metrics lists */
.modal-advanced-section ul,
.modal-advanced-section ol {
    padding-left: 1.2rem;
    margin: 0;
}

.modal-advanced-section li {
    margin-bottom: 0.3rem;
}

.modal-advanced-section li:last-child {
    margin-bottom: 0;
}

/* Strong/bold text in accordion */
.modal-advanced-section strong {
    font-weight: 600;
    color: var(--midnight-green);
}

/* Section Dividers */
.modal-section-divider,
.modal-divider {
    height: 0.5px;
    background-color: var(--modal-divider-color);
    opacity: 1;
}

/* Modal Body - Remove default padding for full-width hero */
#objectDetailModal .modal-body {
    padding: 0;
}

#objectDetailModal .modal-body > *:first-child {
    margin-top: 0;
}

/* Modal close button - floating over hero image */
.modal-close-floating {
    z-index: 1055;
    background-color: var(--midnight-green) !important;
    border: none !important;
    width: 2.2275rem !important;
    height: 2.2275rem !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    opacity: 1 !important;
    font-size: 0.759375rem;
    box-shadow: none !important;
}

.modal-close-floating::before,
.modal-close-floating::after {
    color: var(--verdigris) !important;
}

.modal-close-floating {
    filter: none !important;
    background: var(--midnight-green) url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' stroke='%2347b9b3' stroke-width='4' stroke-linecap='round'%3e%3cline x1='2' y1='2' x2='14' y2='14'/%3e%3cline x1='14' y1='2' x2='2' y2='14'/%3e%3c/svg%3e") center/0.759375rem auto no-repeat !important;
}

.modal-close-floating:hover {
    background-color: var(--midnight-green) !important;
    opacity: 0.9 !important;
    filter: none !important;
}

/* Modal Content */
#objectDetailModal .modal-content {
    border-radius: 0 !important;
    border: 1px solid rgba(0,0,0,.2);
}

#objectDetailModal .modal-dialog {
    border-radius: 0;
}

/* Modal footer */
#objectDetailModal .modal-footer {
    border-top: none;
    padding: 1.25rem var(--modal-content-padding-x);
    background-color: #fff;
}

/* Modal footer button common styling */
#objectDetailModal .modal-footer [data-container="modal-actions"] button,
#objectDetailModal .modal-footer [data-container="modal-actions"] .btn-group {
    font-size: 0.875rem;
    padding: 0;
    font-weight: 600;
    font-style: italic;
    border-radius: 0;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#objectDetailModal .modal-footer [data-container="modal-actions"] .btn-group {
    display: flex;
}

#objectDetailModal .modal-footer [data-container="modal-actions"] .btn-group button {
    border-radius: 0;
    height: 48px;
    flex: 1;
    padding: 0;
}

#objectDetailModal .modal-footer [data-container="modal-actions"] button i {
    font-size: 1rem;
    margin-right: 0.5rem;
}

/* QR Code Section */
#objectDetailModal [data-container="modal-qr"] img {
    max-width: 100%; /* Ensure QR code doesn't overflow on small screens */
    height: auto;
}

/* Modal toast container */
.modal-toast-container,
.modal-toast-qr-container {
    z-index: 1060;
    min-width: 300px;
    max-width: 90%;
    pointer-events: none;
}

.modal-toast-qr-container {
    left: 33%;
}

.modal-toast-container .toast,
.modal-toast-qr-container .toast {
    pointer-events: auto;
    margin: 0 auto;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

/* ============================================================================
 * RESPONSIVE BREAKPOINTS
 * ============================================================================ */

/* Tablet and below */
@media (max-width: 767.98px) {
    /* Hero section */
    .modal-hero-container {
        height: var(--modal-hero-height-sm);
    }
    
    .modal-hero-title {
        font-size: var(--modal-hero-title-size-sm);
        -webkit-line-clamp: 4;
        line-clamp: 4;
        max-height: 4.8em;
    }
    
    .modal-hero-overlay {
        padding: var(--modal-hero-overlay-padding-md);
    }
    
    /* Content grid padding */
    .modal-content-grid {
        padding-left: var(--modal-content-padding-x-md);
        padding-right: var(--modal-content-padding-x-md);
    }
    
    /* Access banner padding */
    #objectDetailModal [data-container="modal-access-banner"] .alert {
        padding: 0.5625rem var(--modal-padding-x-sm);
    }
    
    /* Footer padding */
    #objectDetailModal .modal-footer {
        padding: 1.25rem var(--modal-content-padding-x-md);
    }
    
    /* Accordion padding */
    .modal-advanced-accordion .accordion-button {
        padding: 0.65rem var(--modal-padding-x-sm);
    }
    
    .modal-advanced-accordion .accordion-body {
        padding: 1.5rem var(--modal-padding-x-sm);
    }
    
    /* Toast container */
    .modal-toast-qr-container {
        left: 50%;
        transform: translateX(-50%);
        min-width: 250px;
    }
}

/* Mobile (max-width: 576px) */
@media (max-width: 576px) {
    /* Extra small hero overlay padding */
    .modal-hero-overlay {
        padding: var(--modal-hero-overlay-padding-sm);
    }
    
    /* Extra small content padding */
    .modal-content-grid {
        padding-left: var(--modal-content-padding-x-sm);
        padding-right: var(--modal-content-padding-x-sm);
    }
    
    /* Footer padding */
    #objectDetailModal .modal-footer {
        padding: 1rem var(--modal-content-padding-x-sm);
    }
    
    /* Close button */
    .modal-close-floating {
        width: 1.875rem !important;
        height: 1.875rem !important;
        font-size: 0.625rem;
    }
    
    /* Toast containers */
    .modal-toast-container,
    .modal-toast-qr-container {
        min-width: 220px;
        max-width: 95%;
    }
    
    /* QR code scaling */
    #objectDetailModal [data-container="modal-qr"] > div {
        max-width: 160px;
        margin: 0 auto;
    }
}

/* ==========================================================================
   ANALYTICS DASHBOARD — Layer 1 (Besøgende)
   ========================================================================== */

/* Section headers with emerald visual divider */
.analytics-section-header {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--midnight-green);
    margin: 1.5rem 0 0.75rem;
    padding-bottom: 0.4rem;
    border-bottom: 2px solid #ABD1C6;
}

#analytics-content > section:first-child .analytics-section-header {
    margin-top: 0;
}

/* KPI values — 1.75rem compact size (overrides Bootstrap display-6) + brand color */
.analytics-kpi-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--midnight-green);
    margin-bottom: 0;
}

/* Trend indicators */
.trend-positive { color: #28a745; font-size: 0.75rem; }
.trend-negative { color: #dc3545; font-size: 0.75rem; }

/* Entry point type badges (Layer 4 Section 5 Indgangspunkter table) */
.badge-entry-objekt  { background-color: var(--midnight-green); color: #fff; }
.badge-entry-lektion { background-color: var(--verdigris); color: #fff; }

/* Analytics table — UCL-styled header */
#analytics-entry-table .table th {
    background-color: var(--midnight-green);
    color: #fff;
    font-size: 0.85rem;
    padding: 0.5rem;
    border: none;
}

#analytics-entry-table .table td {
    font-size: 0.85rem;
    padding: 0.4rem 0.5rem;
}

/* Analytics row highlight classes — applied to <tr> elements; target cells so Bootstrap table-striped does not override row colour */
.analytics-row--danger > td,
.analytics-row--danger > th { background-color: rgba(220, 53, 69, 0.1); }
.analytics-row--warn > td,
.analytics-row--warn > th   { background-color: rgba(255, 193, 7, 0.1); }

/* Entry points table — sortable column headers */
.analytics-sortable-th {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}
#analytics-entry-table .table th.analytics-sortable-th:hover {
    filter: brightness(1.2);
}

/* Chart canvas height cap — prevents charts from overflowing their card on large screens */
.analytics-chart-canvas { max-height: 300px; }

/* KPI card value animation on update */
@keyframes kpi-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.kpi-value-updating {
    animation: kpi-pulse 0.5s ease-in-out;
}