/**
 * Styles for local_library plugin.
 *
 * @package     local_library
 * @copyright   2026 Edu Excellence
 * @license     https://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
 */

/* ============================================
   Visual Identity System (Variables)
   ============================================ */
/* CACHE BUSTER: 20260207-CSS-Cleanup */
:root {
    /* ===== Colors (Overridden by styles.php for dynamic branding) ===== */
    --ll-primary: var(--primary, #667eea);
    --ll-primary-hover: var(--primary-hover, #5a67d8);
    --ll-secondary: var(--secondary, #764ba2);

    /* Gradients */
    --ll-gradient: linear-gradient(135deg, var(--ll-primary) 0%, var(--ll-secondary) 100%);

    /* Success Colors (Dynamic - can be overridden) */
    --ll-success: #28a745;
    --ll-success-light: #20c997;
    --ll-gradient-success: linear-gradient(135deg, var(--ll-success) 0%, var(--ll-success-light) 100%);

    /* Text colors */
    --ll-text-dark: #343a40;
    --ll-text-muted: #6c757d;
    --ll-text-light: #f8f9fa;

    /* ===== Border Radius System ===== */
    --ll-radius-sm: 8px;
    --ll-radius-md: 12px;
    --ll-radius-lg: 16px;
    --ll-radius-xl: 25px;
    --ll-radius-pill: 50px;

    /* ===== Shadow System ===== */
    --ll-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.02);
    --ll-shadow-sm: 0 2px 5px rgba(0, 0, 0, 0.04);
    --ll-shadow-md: 0 4px 15px rgba(0, 0, 0, 0.08);
    --ll-shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.1);
    --ll-shadow-xl: 0 12px 30px rgba(0, 0, 0, 0.15);

    /* ===== Transitions ===== */
    --ll-transition-fast: 0.2s ease;
    --ll-transition: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    --ll-transition-slow: 0.4s ease-out;

    /* ===== Card System ===== */
    --ll-card-min-height: 380px;
    --ll-card-img-height: 240px;
    --ll-card-radius: var(--ll-radius-lg);

    /* ===== Spacing ===== */
    --ll-toolbar-padding: 0.75rem 1.25rem;
    --ll-btn-height: 40px;
    --ll-btn-padding: 0 1rem;

    /* ===== Modal ===== */
    --ll-modal-thumbnail-max-height: 250px;
    --ll-modal-description-max-height: 200px;

    /* ===== QR Code ===== */
    --ll-qr-size: 150px;

    /* ===== Unified Button System (UBS v2.0) ===== */
    --ll-btn-height-sm: 32px;
    --ll-btn-height-md: 40px;
    --ll-btn-height-lg: 48px;
    --ll-btn-radius-normal: 8px;
    --ll-btn-radius-pill: 50px;
}


/* ============================================
   Library Container
   ============================================ */
.local-library-container {
    padding: 1rem 0;
}

/* Remove underline from all library links on hover */
.local-library-container a,
.local-library-container a:hover,
.local-library-container a:focus,
.local-library-container .btn,
.local-library-container .btn:hover {
    text-decoration: none !important;
}

/* ============================================
   Toolbar Button System
   ============================================ */

/* Base Library Button */
.library-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: var(--ll-radius-sm);
    font-weight: 500;
    font-size: 0.875rem;
    transition: var(--ll-transition-fast);
    border: 1px solid #dee2e6;
    background: #fff;
    color: var(--ll-text-dark);
    cursor: pointer;
}

.library-btn:hover {
    background: #f8f9fa;
    border-color: #adb5bd;
    color: var(--ll-text-dark);
}

.library-btn.active {
    background: var(--ll-primary);
    border-color: var(--ll-primary);
    color: #fff;
}

/* Ghost Button Variants - DARK TEXT for light backgrounds */
.btn-primary-ghost {
    background: rgba(102, 126, 234, 0.1);
    /* fallback */
    background: color-mix(in srgb, var(--ll-primary) 10%, transparent);
    border: 1px solid var(--ll-primary);
    color: var(--ll-primary) !important;
}

.btn-primary-ghost:hover {
    background: var(--ll-primary);
    color: #fff !important;
}

.btn-danger-ghost {
    background: rgba(220, 53, 69, 0.1);
    border: 1px solid #dc3545;
    color: #dc3545 !important;
}

.btn-danger-ghost:hover {
    background: #dc3545;
    color: #fff !important;
}

/* ============================================
   Unified Button System (UBS v2.0) Classes
   ============================================ */

/* 1. Primary Action Button (Download, Main CTA) */
.ll-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: var(--ll-btn-height-md);
    padding: 0 1.25rem;
    background: var(--ll-gradient);
    border: none;
    border-radius: var(--ll-btn-radius-pill);
    color: #fff !important;
    font-weight: 600;
    font-size: 0.875rem;
    transition: var(--ll-transition-fast);
    cursor: pointer;
    text-decoration: none !important;
}

.ll-btn-primary:hover {
    filter: brightness(1.1);
    transform: translateY(-2px);
    box-shadow: var(--ll-shadow-md);
    color: #fff !important;
    text-decoration: none !important;
}

/* 2. Secondary Action Button (Preview, Cancel) */
.ll-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: var(--ll-btn-height-md);
    padding: 0 1.25rem;
    background: #fff;
    border: 1px solid var(--ll-primary);
    border-radius: var(--ll-btn-radius-pill);
    color: var(--ll-primary) !important;
    font-weight: 500;
    font-size: 0.875rem;
    transition: var(--ll-transition-fast);
    cursor: pointer;
    text-decoration: none !important;
}

.ll-btn-secondary:hover {
    background: rgba(102, 126, 234, 0.1);
    background: color-mix(in srgb, var(--ll-primary) 10%, transparent);
    color: var(--ll-primary) !important;
    text-decoration: none !important;
}

/* 3. Success Button (Upload) - Uses dynamic success gradient */
.ll-btn-success {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: var(--ll-btn-height-md);
    padding: 0 1.25rem;
    background: var(--ll-gradient-success);
    border: none;
    border-radius: var(--ll-btn-radius-pill);
    color: #fff !important;
    font-weight: 600;
    font-size: 0.875rem;
    transition: var(--ll-transition-fast);
    cursor: pointer;
    text-decoration: none !important;
}

.ll-btn-success:hover {
    filter: brightness(1.1);
    transform: translateY(-2px);
    box-shadow: var(--ll-shadow-md);
    color: #fff !important;
    text-decoration: none !important;
}

/* Size Variants */
.ll-btn-sm {
    height: var(--ll-btn-height-sm) !important;
    padding: 0 1rem !important;
    font-size: 0.8rem !important;
}

.ll-btn-lg {
    height: var(--ll-btn-height-lg) !important;
    padding: 0 1.75rem !important;
    font-size: 1rem !important;
}

/* ============================================
   Resource Card Button Normalization
   Both buttons are now structured as <a> tags for 100% consistency
   User requested strict sizing: min-height 38px, font 0.875rem
   ============================================ */
.resource-card .card-footer .ll-btn-primary,
.resource-card .card-footer .ll-btn-secondary {
    flex: 1 1 0 !important;
    /* Equal width distribution */
    width: 0 !important;
    /* Force flex basis to work */
    min-width: 0 !important;
    max-width: none !important;

    /* Strict sizing as requested */
    min-height: 38px !important;
    height: 38px !important;
    /* Fixed height for exact alignment */
    line-height: 1.5 !important;
    font-size: 0.875rem !important;

    padding: 0 0.5rem !important;
    margin: 0 !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    box-sizing: border-box !important;
    text-decoration: none !important;
    appearance: none !important;
}

/* Mobile Breadcrumb Dropdown - Fix text color */
.library-toolbar .dropdown-toggle,
.library-toolbar .btn-light {
    color: var(--ll-text-dark) !important;
    background: #fff;
    border-color: #dee2e6;
}

.library-toolbar .dropdown-toggle:hover,
.library-toolbar .btn-light:hover {
    background: #f8f9fa;
    color: var(--ll-text-dark) !important;
}

/* ============================================
   Folder Cards (Category Cards)
   ============================================ */
.folder-card-clean {
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    cursor: pointer;
}

/* Title uses primary color */
.folder-card-clean .folder-card-title {
    color: var(--ll-primary);
    transition: color 0.3s ease;
}

/* Hover effect: primary background + white text */
.folder-card-clean:hover {
    background: var(--ll-primary) !important;
    border-color: var(--ll-primary) !important;
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
}

.folder-card-clean:hover .folder-card-title {
    color: #fff !important;
}

.folder-card-clean:hover .text-muted {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* Icon wrapper sizing */
.folder-card-clean .folder-icon-wrapper {
    height: 120px;
}

.folder-card-clean .folder-icon-wrapper img,
.folder-card-clean .folder-icon-wrapper svg {
    max-height: 100px;
    max-width: 100%;
    transition: transform 0.3s ease;
}

.folder-card-clean:hover .folder-icon-wrapper img,
.folder-card-clean:hover .folder-icon-wrapper svg {
    transform: scale(1.05);
}

/* ============================================
   Sidebar Styles
   ============================================ */
.library-sidebar {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 12px;
    padding: 1.5rem;
    /* Sticky positioning */
    position: sticky;
    top: 80px;
    /* Below navbar */
    height: fit-content;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    /* Smooth scroll */
    scrollbar-width: thin;
    scrollbar-color: var(--ll-primary) transparent;
}

/* Webkit scrollbar for sidebar */
.library-sidebar::-webkit-scrollbar {
    width: 6px;
}

.library-sidebar::-webkit-scrollbar-track {
    background: transparent;
}

.library-sidebar::-webkit-scrollbar-thumb {
    background: var(--ll-primary);
    border-radius: 3px;
}

.category-tree-container h5 {
    color: #495057;
    font-weight: 600;
    border-bottom: 2px solid #dee2e6;
    padding-bottom: 0.75rem;
}

.category-tree-container h5 i {
    color: var(--ll-primary);
}

/* Category Tree */
.category-tree {
    margin: 0;
    padding: 0;
}

.category-tree .category-item {
    margin-bottom: 0.25rem;
}

.category-tree .category-item>a {
    display: block;
    padding: 0.5rem 0.75rem;
    color: #495057;
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.category-tree .category-item>a:hover {
    background: color-mix(in srgb, var(--ll-primary) 10%, transparent);
    /* Ideally usage of variable here is complex unless we use color-mix, but fallback is okay or we assume purple tint. 
       Let's assume primary tint: */
    background: color-mix(in srgb, var(--ll-primary) 10%, transparent);
    color: var(--ll-primary);
    transform: translateX(3px);
}

.category-tree .category-item.active>a,
.category-tree .category-item>a.active {
    background: var(--ll-gradient);
    color: #fff;
    font-weight: 500;
}

.category-tree .category-item>a i {
    margin-right: 0.5rem;
    width: 1rem;
    text-align: center;
}

/* ============================================
   Folder Cards (UX-001)
   ============================================ */
/* ============================================
   Folder Cards (Redesigned - Clean)
   ============================================ */
.folder-card-clean {
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    border: 1px solid #e9ecef;
}

.folder-card-clean:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05) !important;
    border-color: var(--ll-primary);
}

/* Use high specificity to override .img-fluid */
.folder-icon-wrapper .category-icon-image,
.folder-icon-wrapper img {
    height: 120px;
    /* Fixed visual height */
    width: auto;
    /* Maintain aspect ratio */
    max-width: 100%;
    /* Prevent overflow */
    object-fit: contain;
    /* Ensure full image is visible */
}

.folder-icon-wrapper i {
    font-size: 7rem;
    /* ~112px to match image height */
    color: var(--ll-primary);
}

/* Hover Icon Logic */
.folder-icon-wrapper {
    position: relative;
    /* Ensure stacking context */
}

.folder-icon-wrapper .icon-main,
.folder-icon-wrapper .icon-hover {
    transition: all 0.3s ease;
    backface-visibility: hidden;
}

/* Icon-hover: Hidden by default, positioned exactly over the main icon */
.folder-icon-wrapper .icon-hover {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Make hover icon image match main icon image styling exactly */
.folder-icon-wrapper .icon-hover img.category-icon-image {
    height: 100px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

/* ONLY hide main icon when card HAS a hover icon */
.folder-card-clean.has-hover-icon:hover .icon-main {
    opacity: 0;
    transform: scale(0.95);
}

/* Show hover icon ONLY when card has one */
.folder-card-clean.has-hover-icon:hover .icon-hover {
    opacity: 1;
    transform: scale(1);
}

.rounded-lg {
    border-radius: 1rem !important;
}

.folder-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1) !important;
    border-color: var(--ll-primary);
}

/* ============================================
   Resource Cards (Cinematic Mode)
   ============================================ */
.card-cinematic-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #f8f9fa;
    /* Fallback light gray */
}

.cinematic-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background-image is set inline */
    background-size: cover;
    background-position: center;
    filter: blur(20px) contrast(0.8) brightness(1.1);
    transform: scale(1.2);
    /* Prevent white edges from blur */
    opacity: 0.6;
    /* Soften the effect */
    z-index: 0;
}

.cinematic-front {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 1;
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.resource-card:hover .cinematic-front {
    transform: scale(1.03);
    /* Subtle zoom on hover */
}

.folder-icon {
    opacity: 0.8;
}

.folder-card:hover .folder-icon {
    opacity: 1;
}

/* Nested categories */

.category-children {
    margin-left: 1.25rem;
    border-left: 2px solid #dee2e6;
    padding-left: 0.5rem;
}

.category-item.depth-1>a {
    padding-left: 1rem;
}

.category-item.depth-2>a {
    padding-left: 1.5rem;
}

.category-item.depth-3>a {
    padding-left: 2rem;
}

/* ============================================
   AJAX-DRILL: Dynamic Zone Transitions
   ============================================ */

.library-dynamic-zone {
    transition: opacity 0.25s ease;
    min-height: 100px;
}

.library-dynamic-zone.ll-loading {
    opacity: 0.35;
    pointer-events: none;
}

/* Loading spinner overlay */
.library-dynamic-zone.ll-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 36px;
    height: 36px;
    border: 3px solid #e9ecef;
    border-top-color: var(--ll-primary);
    border-radius: 50%;
    animation: ll-spin 0.8s linear infinite;
}

@keyframes ll-spin {
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* Fade-in animation for new content */
.ll-fade-in {
    animation: llFadeIn 0.3s ease forwards;
}

@keyframes llFadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================
   ARC LAYOUT: Parent Card + SVG Connectors
   ============================================ */

.arc-layout {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 1rem;
}

/* Parent Card Row */
.arc-parent-row {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-bottom: 0;
    z-index: 2;
    position: relative;
}

.arc-parent-card-wrapper {
    width: 25%;
    min-width: 200px;
    max-width: 300px;
}

/* Parent card accent - subtle gradient top border */
.arc-parent-card {
    position: relative;
    border-top: 3px solid var(--ll-primary) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08) !important;
}

/* SVG Connectors - absolute overlay spanning from parent to children */
.arc-connectors {
    width: 100%;
    overflow: visible;
    z-index: 1;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
}

.arc-connectors .arc-path {
    fill: none;
    stroke: var(--ll-primary);
    stroke-width: 2;
    stroke-linecap: round;
    opacity: 0.5;
    transition: opacity 0.3s ease;
}

.arc-connectors .arc-dot {
    fill: var(--ll-primary);
    opacity: 0.6;
}

/* Children row - full width + gap for connectors */
.arc-children-row {
    justify-content: center;
    padding-top: 60px;
    position: relative;
    width: 100%;
}

/* Stagger entrance animation for children */
.arc-child-col {
    animation: arcChildIn 0.4s ease forwards;
    opacity: 0;
}

.arc-child-col:nth-child(1) {
    animation-delay: 0.05s;
}

.arc-child-col:nth-child(2) {
    animation-delay: 0.1s;
}

.arc-child-col:nth-child(3) {
    animation-delay: 0.15s;
}

.arc-child-col:nth-child(4) {
    animation-delay: 0.2s;
}

.arc-child-col:nth-child(5) {
    animation-delay: 0.25s;
}

.arc-child-col:nth-child(6) {
    animation-delay: 0.3s;
}

.arc-child-col:nth-child(7) {
    animation-delay: 0.35s;
}

.arc-child-col:nth-child(8) {
    animation-delay: 0.4s;
}

@keyframes arcChildIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* SVG path drawing animation */
.arc-connectors .arc-path {
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
    animation: arcDraw 0.6s ease forwards;
}

@keyframes arcDraw {
    to {
        stroke-dashoffset: 0;
    }
}

/* Mobile: hide SVG, stack parent + children vertically */
@media (max-width: 767.98px) {
    .arc-connectors {
        display: none;
    }

    .arc-parent-card-wrapper {
        max-width: 100%;
    }

    .arc-parent-row {
        margin-bottom: 1rem;
    }
}


/* ============================================
   Main Content Area
   ============================================ */
.library-content {
    padding-left: 2rem;
}

.library-content h4 {
    color: #343a40;
    font-weight: 600;
}

.library-content h4 i {
    color: var(--ll-primary);
    margin-right: 0.5rem;
}

/* ============================================
   Resources Grid
   ============================================ */
.resources-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1.5rem;
}

/* Resource Card */
.resource-card {
    border: none;
    border-radius: 16px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    background: #fff;
}

.resource-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
    /* Neutral shadow to avoid color clash */
}

.resource-card .card-body {
    padding: 1.5rem;
    text-align: center;
}

.resource-card .resource-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 1rem;
    background: var(--ll-gradient);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.resource-card .resource-icon i {
    color: #fff;
    font-size: 1.75rem;
}

.resource-card .resource-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: #343a40;
    margin-bottom: 0.5rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.resource-card .resource-description {
    font-size: 0.8rem;
    line-height: 1.4;
    max-height: 2.8em;
    overflow: hidden;
}

.resource-card .resource-meta {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid #eee;
}

.resource-card .resource-meta span i {
    margin-right: 0.25rem;
}

.resource-card .card-footer {
    background: #f8f9fa;
    border-top: none;
    padding: 1rem;
}

.resource-card .card-footer .btn {
    border-radius: 25px;
    font-weight: 500;
    background: var(--ll-gradient);
    border: none;
    padding: 0.5rem 1.5rem;
    color: #ffffff !important;
    /* Force equal sizing */
    font-size: 0.875rem !important;
    line-height: 1.5 !important;
    height: auto;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.resource-card .card-footer .btn:hover {
    /* We use filter for generic hover state since gradient modification is hard */
    filter: brightness(0.9);
    transform: scale(1.02);
    color: #ffffff !important;
}

/* Uniform icon size in card buttons */
.resource-card .card-footer .btn i {
    font-size: 1rem;
    width: 1rem;
    text-align: center;
}

.resource-card .resource-badge {
    position: absolute;
    top: 10px;
    right: 10px;
}

.resource-card .resource-badge .badge {
    padding: 0.4rem 0.6rem;
    border-radius: 8px;
}

/* ============================================
   File Type Icons Colors
   ============================================ */
.resource-card .resource-icon.pdf-icon {
    background: linear-gradient(135deg, #e53935 0%, #c62828 100%);
}

.resource-card .resource-icon.word-icon {
    background: linear-gradient(135deg, #1976d2 0%, #1565c0 100%);
}

.resource-card .resource-icon.excel-icon {
    background: linear-gradient(135deg, #43a047 0%, #388e3c 100%);
}

.resource-card .resource-icon.ppt-icon {
    background: linear-gradient(135deg, #f57c00 0%, #ef6c00 100%);
}

.resource-card .resource-icon.image-icon {
    background: linear-gradient(135deg, #8e24aa 0%, #7b1fa2 100%);
}

.resource-card .resource-icon.video-icon {
    background: linear-gradient(135deg, #d32f2f 0%, #c62828 100%);
}

.resource-card .resource-icon.audio-icon {
    background: linear-gradient(135deg, #00897b 0%, #00796b 100%);
}

/* ============================================
   Empty State & Alerts
   ============================================ */
.library-content .alert {
    border-radius: 12px;
    border: none;
    padding: 2rem;
    text-align: center;
}

.library-content .alert i {
    font-size: 2rem;
    margin-bottom: 1rem;
    display: block;
    opacity: 0.7;
}

/* ============================================
   Search Box
   ============================================ */
.category-tree-container .input-group {
    border-radius: 25px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.category-tree-container .input-group .form-control {
    border: none;
    padding: 0.75rem 1rem;
}

.category-tree-container .input-group .btn {
    border: none;
    padding: 0.75rem 1.25rem;
    background: var(--ll-gradient);
}

/* ============================================
   Upload Button
   ============================================ */
.btn-success {
    background: linear-gradient(135deg, #43a047 0%, #388e3c 100%);
    border: none;
    border-radius: 25px;
    padding: 0.5rem 1.5rem;
    font-weight: 500;
}

.btn-success:hover {
    background: linear-gradient(135deg, #388e3c 0%, #2e7d32 100%);
}

/* ============================================
   Dark Mode Support
   ============================================ */
body.dark-mode .library-sidebar,
.pagelayout-standard[data-theme="dark"] .library-sidebar {
    background: linear-gradient(135deg, #2d3436 0%, #1e272e 100%);
}

body.dark-mode .category-tree .category-item>a,
.pagelayout-standard[data-theme="dark"] .category-tree .category-item>a {
    color: #dfe6e9;
}

body.dark-mode .resource-card,
.pagelayout-standard[data-theme="dark"] .resource-card {
    background: #2d3436;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

body.dark-mode .resource-card .resource-title,
.pagelayout-standard[data-theme="dark"] .resource-card .resource-title {
    color: #dfe6e9;
}

body.dark-mode .resource-card .card-footer,
.pagelayout-standard[data-theme="dark"] .resource-card .card-footer {
    background: #1e272e;
}

/* ============================================
   Responsive Design
   ============================================ */
@media (max-width: 991px) {
    .library-sidebar {
        margin-bottom: 2rem;
    }

    .library-content {
        padding-left: 0;
    }
}

@media (max-width: 576px) {
    .resources-grid {
        grid-template-columns: 1fr;
    }

    .resource-card {
        margin: 0 auto;
        max-width: 300px;
    }
}

/* ============================================
   Animations & Micro-interactions
   ============================================ */

/* --- Core Keyframes --- */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

@keyframes heart-pop {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.3);
    }
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

@keyframes pulse-soft {

    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.05);
        opacity: 0.9;
    }
}

/* --- Resource Card Staggered Animation (Extended to 20) --- */
.resource-card {
    animation: fadeInUp 0.4s ease-out forwards;
    opacity: 0;
    /* Start hidden for animation */
}

.resource-card:nth-child(1) {
    animation-delay: 0.05s;
}

.resource-card:nth-child(2) {
    animation-delay: 0.1s;
}

.resource-card:nth-child(3) {
    animation-delay: 0.15s;
}

.resource-card:nth-child(4) {
    animation-delay: 0.2s;
}

.resource-card:nth-child(5) {
    animation-delay: 0.25s;
}

.resource-card:nth-child(6) {
    animation-delay: 0.3s;
}

.resource-card:nth-child(7) {
    animation-delay: 0.35s;
}

.resource-card:nth-child(8) {
    animation-delay: 0.4s;
}

.resource-card:nth-child(9) {
    animation-delay: 0.45s;
}

.resource-card:nth-child(10) {
    animation-delay: 0.5s;
}

.resource-card:nth-child(11) {
    animation-delay: 0.55s;
}

.resource-card:nth-child(12) {
    animation-delay: 0.6s;
}

.resource-card:nth-child(n+13) {
    animation-delay: 0.65s;
}

/* Cap at 0.65s for 13+ */

/* --- Skeleton Loading --- */
.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: var(--ll-radius-sm);
}

.skeleton-text {
    height: 16px;
    margin-bottom: 8px;
}

.skeleton-title {
    height: 24px;
    width: 80%;
    margin-bottom: 12px;
}

.skeleton-thumbnail {
    height: 200px;
    border-radius: var(--ll-radius-md);
}

/* --- Button Loading State --- */
.btn-loading {
    position: relative;
    pointer-events: none;
    opacity: 0.7;
    color: transparent !important;
}

.btn-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

.btn-outline-danger.btn-loading::after,
.btn-outline-secondary.btn-loading::after {
    border-color: rgba(0, 0, 0, 0.1);
    border-top-color: var(--ll-primary);
}

/* --- Heart Pop Animation --- */
.animate-heart-pop {
    animation: heart-pop 0.4s ease-out;
}

/* --- Float Animation (for Empty States) --- */
.animate-float {
    animation: float 3s ease-in-out infinite;
}

/* --- Pulse Soft (for attention) --- */
.animate-pulse {
    animation: pulse-soft 2s ease-in-out infinite;
}

/* --- Hover Transitions (Enhanced) --- */
.resource-card {
    transition: transform var(--ll-transition), box-shadow var(--ll-transition);
}

.resource-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--ll-shadow-lg);
}

.folder-card {
    transition: transform var(--ll-transition), box-shadow var(--ll-transition);
}

.folder-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--ll-shadow-md);
}

/* --- Button Hover Enhancements --- */
.library-btn,
.btn-favorite,
.quick-view-btn {
    transition: all var(--ll-transition-fast);
}

.btn-favorite:hover:not(.btn-loading) {
    transform: scale(1.1);
}

.btn-favorite.active i {
    animation: heart-pop 0.4s ease-out;
}

/* ============================================
   Dashboard Styles
   ============================================ */
.library-dashboard {
    padding: 1rem 0;
}

/* Statistics Cards */
.dashboard-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.stat-card {
    background: #fff;
    border-radius: 16px;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}

.stat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

.stat-card .stat-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #fff;
}

.stat-categories .stat-icon {
    background: var(--ll-gradient);
}

.stat-resources .stat-icon {
    background: linear-gradient(135deg, #43a047 0%, #388e3c 100%);
}

.stat-pending .stat-icon {
    background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%);
}

.stat-downloads .stat-icon {
    background: linear-gradient(135deg, #2196f3 0%, #1976d2 100%);
}

.stat-card .stat-info {
    display: flex;
    flex-direction: column;
}

.stat-card .stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: #343a40;
    line-height: 1.2;
}

.stat-card .stat-label {
    font-size: 0.85rem;
    color: #6c757d;
}

.stat-card.has-pending {
    background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
    border: 2px solid #ff9800;
}

.stat-card.has-pending .stat-value {
    color: #e65100;
}

/* Pending Alert */
.pending-alert {
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    padding: 1rem 1.5rem;
}

.pending-alert i {
    font-size: 1.25rem;
}

/* Dashboard Tabs */
.dashboard-tabs {
    border-bottom: 2px solid #dee2e6;
    margin-bottom: 0;
}

.dashboard-tabs .nav-link {
    border: none;
    border-bottom: 3px solid transparent;
    color: #6c757d;
    font-weight: 500;
    padding: 1rem 1.5rem;
    transition: all 0.2s ease;
}

.dashboard-tabs .nav-link:hover {
    border-color: transparent;
    color: var(--ll-primary);
}

.dashboard-tabs .nav-link.active {
    border-color: transparent;
    border-bottom-color: var(--ll-primary);
    color: var(--ll-primary);
    background: transparent;
}

.dashboard-tabs .nav-link i {
    margin-right: 0.5rem;
}

/* Dashboard Content */
.dashboard-content {
    background: #fff;
    border-radius: 0 0 16px 16px;
    padding: 2rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    margin-bottom: 2rem;
}

.dashboard-content .tab-pane {
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Quick Actions */
.quick-actions .btn {
    margin-bottom: 0.75rem;
    border-radius: 10px;
    padding: 0.75rem 1rem;
    font-weight: 500;
    text-align: left;
}

.quick-actions .btn i {
    margin-right: 0.75rem;
    width: 1.25rem;
    text-align: center;
}

/* Table Enhancements */
.dashboard-content .table {
    border-radius: 12px;
    overflow: hidden;
}

.dashboard-content .table thead th {
    background: #f8f9fa;
    border-bottom: 2px solid #dee2e6;
    font-weight: 600;
    color: #495057;
    padding: 1rem;
}

.dashboard-content .table tbody td {
    padding: 1rem;
    vertical-align: middle;
}

.dashboard-content .table tbody tr:hover {
    background: color-mix(in srgb, var(--ll-primary) 5%, transparent);
}

/* Card Enhancements */
.dashboard-content .card {
    border: none;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.dashboard-content .card-header {
    background: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
    font-weight: 600;
    padding: 1rem 1.25rem;
}

.dashboard-content .card-header i {
    margin-right: 0.5rem;
    color: var(--ll-primary);
}

/* Responsive Dashboard */
@media (max-width: 768px) {
    .dashboard-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .dashboard-tabs .nav-link {
        padding: 0.75rem 1rem;
        font-size: 0.9rem;
    }

    .dashboard-tabs .nav-link span {
        display: none;
    }

    .dashboard-content {
        padding: 1rem;
    }
}

@media (max-width: 576px) {
    .dashboard-stats {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   PREMIUM UX PACK (UX-002) - COMPACT HARMONY
   ============================================ */

/* 1. Cohesive Toolbar Container - Balanced Size */
.library-toolbar {
    background: #ffffff;
    border: 1px solid #dee2e6;
    border-radius: 12px;
    padding: 0.75rem 1.25rem;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.04);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    transition: all 0.3s ease;
}

/* 2. Unified Button Style (.library-btn) - Balanced Size */
.library-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 1rem;
    font-size: 0.9rem;
    font-weight: 500;
    color: #495057;
    background: #ffffff;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
    text-decoration: none;
    cursor: pointer;
}

.library-btn:hover,
.library-btn:focus {
    color: var(--ll-primary);
    background: #f8f9fa;
    border-color: var(--ll-primary);
    transform: translateY(-1px);
}

.library-btn.active {
    background: color-mix(in srgb, var(--ll-secondary) 10%, transparent);
    /* Subtle Secondary Tint */
    color: var(--ll-secondary);
    border-color: var(--ll-secondary);
    font-weight: 600;
}

/* Ghost Buttons (Transparent with color) */
.library-btn.btn-primary-ghost {
    color: var(--ll-primary);
    border-color: transparent;
    background: transparent;
    box-shadow: none;
}

.library-btn.btn-primary-ghost:hover {
    background: color-mix(in srgb, var(--ll-primary) 5%, transparent);
}

.library-btn.btn-danger-ghost {
    color: #dc3545;
    /* Keep red for favorites standard/heart */
    border-color: transparent;
    background: transparent;
    box-shadow: none;
}

.library-btn.btn-danger-ghost:hover {
    background: rgba(220, 53, 69, 0.05);
}



.library-btn i {
    font-size: 1.1rem;
    /* Muted icon color by default */
    margin-right: 0.5rem;
    /* Space for LTR */
    margin-left: 0.5rem;
    /* Space for RTL support logic handled by HTML/DIR */
}

/* RTL Support for Moodle */
body[dir="rtl"] .library-btn i {
    margin-right: 0;
    margin-left: 0.5rem;
}

.library-btn:hover i {
    color: var(--ll-primary);
    /* Highlight icon on hover */
}

/* Specific variants reusing the base .library-btn */
.library-btn.btn-primary-ghost {
    color: var(--ll-primary);
    border-color: rgba(var(--ll-primary-rgb, 100, 100, 255), 0.3);
}

.library-btn.btn-danger-ghost {
    color: #e53935;
    border-color: rgba(229, 57, 53, 0.3);
}

.library-btn.btn-danger-ghost:hover {
    background: #ffebee;
    border-color: #e53935;
}

/* 3. Custom Breadcrumbs (The "Refined" Style) */
.library-breadcrumbs {
    display: flex;
    align-items: center;
    padding: 0;
    margin: 0;
    list-style: none;
    font-size: 0.9rem;
    /* Keep text compact */
    font-weight: 500;
}

.library-breadcrumbs .breadcrumb-item {
    display: flex;
    align-items: center;
}

/* The Separator (Circle) - Visual Interest */
.library-breadcrumbs .breadcrumb-item+.breadcrumb-item::before {
    content: "\f111";
    /* fa-circle */
    font-family: FontAwesome;
    color: var(--ll-primary);
    /* Primary Color */
    opacity: 0.4;
    /* Softness */
    font-weight: 900;
    margin: 0 0.5rem;
    font-size: 0.4rem;
    /* Small dot separator */
    padding: 0;
    display: flex;
    align-items: center;
}

.library-breadcrumbs .breadcrumb-link {
    display: inline-flex;
    align-items: center;
    color: var(--ll-primary);
    /* Use Theme Primary */
    text-decoration: none;
    transition: color 0.2s;
}

.library-breadcrumbs .breadcrumb-link:hover,
.home-icon-link:hover {
    color: var(--ll-primary);
    text-decoration: none !important;
}

/* Home Icon Special Styling */
.library-breadcrumbs .home-icon-link {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    /* Match button height */
    color: var(--ll-primary);
    font-size: 1.25rem;
    /* Larger Icon */
    transition: all 0.2s;
    margin-left: 0.25rem;
}

.library-breadcrumbs .home-icon-link:hover {
    transform: scale(1.1);
}

/* Active Item */
.library-breadcrumbs .breadcrumb-item.active {
    color: var(--ll-secondary);
    /* Use Theme Secondary */
    font-weight: 600;
}



/* 4. Statistics Clean-up */
.library-stats-group {
    display: flex;
    gap: 0.75rem;
}

.library-stat-badge {
    display: inline-flex;
    align-items: center;
    height: 42px;
    padding: 0 1rem;
    border-radius: 8px;
    background: #ffffff;
    border: 1px solid #e9ecef;
    color: #6c757d;
    font-size: 0.9rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}

.library-stat-badge strong {
    color: #343a40;
    margin-right: 0.25rem;
}

.library-stat-badge i {
    margin-left: 0.5rem;
    color: #adb5bd;
}

.library-toolbar .breadcrumb-item.active {
    color: #343a40;
    font-weight: 600;
}

/* Resource Thumbnail (Card) */
.resource-card .resource-thumbnail-img {
    width: 100%;
    height: 140px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 1rem;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.resource-card.has-thumbnail .resource-icon {
    display: none;
}

/* Resource View Page */
.local-library-resource-view {
    max-width: 1000px;
    margin: 0 auto;
}

.resource-detail-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    padding: 2.5rem;
    animation: fadeInUp 0.5s ease-out;
}

.resource-header {
    display: flex;
    gap: 2.5rem;
    margin-bottom: 2rem;
}

.resource-thumbnail {
    flex: 0 0 240px;
}

.resource-thumbnail img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.resource-info {
    flex: 1;
}

.resource-title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: #2d3436;
}

.resource-title-secondary {
    font-size: 1.4rem;
    color: #636e72;
    margin-bottom: 1rem;
    font-weight: 400;
}

.resource-meta {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #636e72;
    font-size: 1rem;
    background: #f8f9fa;
    padding: 0.4rem 0.8rem;
    border-radius: 8px;
}

.resource-actions {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid #f1f2f6;
}

.btn-favorite {
    transition: all 0.2s;
}

.btn-favorite.active {
    color: #e74c3c;
    border-color: #e74c3c;
    background: rgba(231, 76, 60, 0.1);
}

/* Rating Section */
.star-rating .fa-star {
    font-size: 1.5rem;
    color: #dfe6e9;
    cursor: pointer;
    transition: color 0.2s;
    margin-right: 0.25rem;
}

.star-rating .fa-star:hover,
.star-rating .fa-star.filled {
    color: #f1c40f;
}

/* Quick View Modal Premium Styles */
#resourceQuickViewModal .modal-content {
    border-radius: 16px;
    border: none;
    overflow: hidden;
}

#resourceQuickViewModal .modal-header {
    border-bottom: 1px solid #f1f2f6;
    padding: 1.5rem;
    background: #fff;
}

#resourceQuickViewModal .modal-body {
    padding: 2rem;
}

.resource-quick-view .resource-modal-thumbnail img {
    width: 100%;
    max-height: 250px;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.resource-modal-stats {
    background: #f8f9fa;
    padding: 1rem;
    border-radius: 12px;
    margin-bottom: 1rem;
}

/* Preview Section */
.resource-preview-section {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid #eee;
}

.pdf-preview-container {
    height: 600px;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    overflow: hidden;
}

.pdf-iframe {
    width: 100%;
    height: 100%;
}

.img-preview {
    max-width: 100%;
    max-height: 600px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Responsive */
@media (max-width: 768px) {
    .resource-header {
        flex-direction: column;
    }

    .resource-thumbnail {
        flex: none;
        max-width: 100%;
        text-align: center;
    }

    .resource-thumbnail img {
        max-width: 250px;
    }
}


.folders-grid.list-view .folder-card {
    flex-direction: row;
    align-items: center;
    padding: 0.5rem 1.5rem;
    min-height: auto;
}

.folders-grid.list-view .folder-card .card-body {
    flex-direction: row !important;
    padding: 0.5rem;
    width: 100%;
    justify-content: flex-start !important;
}

.folders-grid.list-view .folder-icon {
    margin-bottom: 0 !important;
    margin-right: 1.5rem;
    font-size: 0.8rem;
    /* Scale down icon */
}

.folders-grid.list-view .folder-icon i {
    font-size: 1.5rem;
    /* Smaller icon in list */
}

.folders-grid.list-view .card-title {
    margin-bottom: 0;
    font-size: 1rem;
}

.folders-grid.list-view .list-details {
    display: block !important;
    margin-left: auto;
}

/* Resource List View */
.resources-grid.list-view {
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

.resources-grid.list-view .resource-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0.5rem 1rem;
    max-height: 80px;
}

.resources-grid.list-view .resource-card .card-body {
    padding: 0.5rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    text-align: left;
    width: 100%;
}

.resources-grid.list-view .resource-icon {
    width: 40px;
    height: 40px;
    margin: 0 1rem 0 0;
    flex-shrink: 0;
}

.resources-grid.list-view .resource-icon i {
    font-size: 1rem;
}

.resources-grid.list-view .resource-title {
    margin: 0;
    font-size: 1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 40%;
}

.resources-grid.list-view .resource-description {
    display: none;
    /* Hide description in list view */
}

.resources-grid.list-view .resource-meta {
    margin: 0 1rem;
    padding: 0;
    border: 0;
    font-size: 0.8rem;
    margin-left: auto;
    /* Push to right */
}

.resources-grid.list-view .card-footer {
    padding: 0.5rem;
    background: transparent;
}

.resources-grid.list-view .resource-badge {
    position: static;
    margin-left: 1rem;
}

/* CSS Fix for Modal Z-Index */
#resourceQuickViewModal {
    z-index: 1055 !important;
}

/* ============================================
   UX-003: Full Page / Immersive Mode (Zero-Gap "Flush" Fit)
   ============================================ */

/* 1. Reset Body: Standard background */
body#page-local-library-index,
body.path-local-library {
    background-color: var(--light, #f8f9fa) !important;
}

/* 2. Hide specific page headers (Titles/Breadcrumbs) but KEEP the Navbar */
body#page-local-library-index .page-header-headings,
body.path-local-library .page-header-headings,
body#page-local-library-index .page-header-image,
body.path-local-library .page-header-image,
body#page-local-library-index .page-context-header,
body.path-local-library .page-context-header,
body#page-local-library-index .secondary-navigation,
body.path-local-library .secondary-navigation,
body#page-local-library-index .breadcrumb,
body.path-local-library .breadcrumb,
body#page-local-library-index #page-header,
body.path-local-library #page-header {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* 3. Main Region: Absolute Zero Spacing */
body#page-local-library-index #region-main,
body.path-local-library #region-main {
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* 4. Toolbar: Flush to top (Zero Gap) */
body#page-local-library-index .library-toolbar,
body.path-local-library .library-toolbar {
    margin-top: 0 !important;
    /* STICK TO TOP */
    border-radius: 0 0 12px 12px;
    /* Keep bottom rounded only */
    border-top: none;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

/* 5. Footer: Keep theme styling, only adjust spacing */
body#page-local-library-index #page-footer,
body.path-local-library #page-footer {
    /* DO NOT set background - let theme handle it */
    margin-top: 0 !important;
    padding-top: 10px !important;
}

/* 6. AGGRESSIVE Full Width Containers */
body#page-local-library-index .container,
body.path-local-library .container,
body#page-local-library-index .container-fluid,
body.path-local-library .container-fluid,
body#page-local-library-index #page,
body.path-local-library #page,
body#page-local-library-index #page-content,
body.path-local-library #page-content,
body#page-local-library-index #region-main-box,
body.path-local-library #region-main-box {
    max-width: 100% !important;
    width: 100% !important;
    flex: 0 0 100%;
    /* CRITICAL: Remove vertical spacing on wrappers too */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* 7. Inner Container: Adjust for "Edge to Edge" feel */
.local-library-container {
    width: 100%;
    max-width: 100%;
    padding: 0 15px;
    /* Side padding only */
    padding-bottom: 20px;
    min-height: 80vh;
}

/* ============================================
   UX-005: Advanced Icon Sizing System
   ============================================ */

/* 1. Default (Sidebar & Header): Small & Compact */
.category-icon-image {
    width: 24px;
    height: 24px;
    object-fit: cover;
    border-radius: 4px;
}

.category-icon-emoji {
    font-size: 1.25rem;
    line-height: 1;
    display: inline-block;
}

/* 2. Folder Cards (Main Content): Large & Prominent */
.folder-card .category-icon-image {
    width: 64px;
    height: 64px;
    margin-bottom: 0.5rem;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.folder-card .category-icon-emoji {
    font-size: 3.5rem;
    /* Matches existing fa-3x */
    line-height: 1.2;
    display: block;
    margin-bottom: 0.5rem;
}

/* 3. Header Title Adjustment */
.d-flex h4 .category-icon-image {
    width: 32px;
    height: 32px;
    margin-right: 0.5rem;
}

.d-flex h4 .category-icon-emoji {
    font-size: 1.75rem;
    margin-right: 0.5rem;
}

/* ============================================
   Utility Classes (Replacing Inline Styles)
   ============================================ */

/* --- Card System --- */
.resource-card {
    border-radius: var(--ll-card-radius);
    min-height: var(--ll-card-min-height);
    overflow: hidden;
    transition: transform var(--ll-transition), box-shadow var(--ll-transition);
}

.card-img-top-wrapper {
    height: var(--ll-card-img-height);
    overflow: hidden;
}

/* --- Badge Overlay --- */
.badges-overlay-top {
    top: 0;
    pointer-events: none;
}

/* --- Card Title --- */
.card-title-lg {
    font-size: 1.1rem;
    line-height: 1.4;
}

/* --- Font Weight --- */
.font-weight-semibold {
    font-weight: 600;
}

/* --- Modal Thumbnail --- */
.modal-thumbnail-img {
    width: 100%;
    max-height: var(--ll-modal-thumbnail-max-height);
    object-fit: cover;
}

/* --- Modal Description --- */
.modal-description-scroll {
    max-height: var(--ll-modal-description-max-height);
    overflow-y: auto;
    line-height: 1.6;
}

/* --- Rating Label --- */
.rating-label {
    font-size: 0.8rem;
    letter-spacing: 1px;
}

/* --- Star Button (inline style replacement) --- */
.star-rating .star-btn {
    cursor: pointer;
    font-size: 1.5rem;
    margin: 0 5px;
    transition: color var(--ll-transition-fast);
}

/* --- Disabled/Locked Button --- */
.btn-locked {
    cursor: not-allowed;
    opacity: 0.7;
}

/* --- QR Code Image --- */
.qr-code-img {
    max-width: var(--ll-qr-size);
}

/* --- Guest CTA Gradient --- */
.guest-cta-gradient {
    background: var(--ll-gradient);
}

/* --- Empty State Icon --- */
.empty-state-icon {
    opacity: 0.3;
}

/* --- Notification Badge Floating --- */
.notification-badge-floating {
    top: -5px;
    right: -5px;
    animation: pulse 2s infinite;
}

/* --- Cinematic Backdrop (dynamic bg handled by JS, but base style in CSS) --- */
.cinematic-backdrop {
    background-size: cover;
    background-position: center;
}

/* ============================================
   Responsive Design - Mobile First
   ============================================ */

/* Touch Targets - 44px minimum (Apple HIG) */
.library-btn,
.btn-favorite,
.quick-view-btn {
    min-height: 44px;
    min-width: 44px;
}

/* Increase tap area for stars */
.star-rating .star-btn {
    padding: 8px;
}

/* ========== Extra Small Devices (< 576px) ========== */
@media (max-width: 575.98px) {

    /* Toolbar: Stack vertically on mobile */
    .library-toolbar {
        flex-direction: column;
        gap: 1rem;
        padding: 1rem;
    }

    .library-toolbar>div {
        width: 100%;
    }

    .library-toolbar .d-flex.align-items-center {
        justify-content: center;
    }

    /* Breadcrumbs: Compact on mobile */
    .library-breadcrumbs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 0.5rem;
    }

    .library-breadcrumbs .breadcrumb-item {
        white-space: nowrap;
    }

    /* Hide text on buttons, show only icons */
    .library-btn span:not(.badge),
    .btn-primary-ghost span,
    .btn-danger-ghost span {
        display: none !important;
    }

    /* Ensure icon-only buttons are centered */
    .library-btn {
        justify-content: center;
        padding: 0 0.75rem;
    }

    /* Card adjustments for mobile */
    .resource-card {
        min-height: 300px;
    }

    .card-img-top-wrapper {
        height: 160px;
    }

    .card-title-lg {
        font-size: 0.95rem;
    }

    /* Folder cards: smaller padding */
    .folder-card-clean {
        padding: 1rem !important;
    }

    .folder-card-clean h5 {
        font-size: 0.85rem;
        margin-bottom: 0.25rem;
    }

    .folder-card-clean .folder-icon-wrapper {
        margin-bottom: 0.5rem !important;
    }

    /* Modal full-width on mobile */
    .modal-dialog {
        margin: 0.5rem;
        max-width: calc(100% - 1rem);
    }

    /* Header and title adjustments */
    .library-content>.d-flex.justify-content-between {
        flex-direction: column;
        gap: 1rem;
    }

    .library-content h4 {
        font-size: 1.1rem;
    }

    /* Resource view adjustments */
    .resource-detail-card .row {
        flex-direction: column;
    }

    /* Quick actions full width */
    .library-actions {
        width: 100%;
        justify-content: center;
    }

    /* View toggle centered */
    .btn-group[role="group"] {
        width: 100%;
        justify-content: center;
    }

    /* Mobile Breadcrumb Hamburger Menu */
    #mobileBreadcrumbMenu {
        min-height: 44px;
        padding: 0.5rem 1rem;
        background: #fff;
        color: var(--ll-text-dark, #343a40) !important;
    }

    #mobileBreadcrumbMenu .fa-bars {
        font-size: 1rem;
    }

    .dropdown-menu {
        min-width: 250px;
        border-radius: var(--ll-radius-md);
    }

    .dropdown-item {
        padding: 0.75rem 1rem;
    }

    .dropdown-item.active {
        font-weight: 600;
    }
}

/* ========== Small Devices (576px - 767.98px) ========== */
@media (min-width: 576px) and (max-width: 767.98px) {

    /* Toolbar: Wrap on tablets */
    .library-toolbar {
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    /* Card image height */
    .card-img-top-wrapper {
        height: 200px;
    }

    /* Folder cards medium padding */
    .folder-card-clean {
        padding: 1.25rem !important;
    }
}

/* ========== Medium Devices (768px - 991.98px) ========== */
@media (min-width: 768px) and (max-width: 991.98px) {

    /* Sidebar visible but narrower feel */
    .library-sidebar {
        padding: 1rem;
    }

    /* Card image height */
    .card-img-top-wrapper {
        height: 220px;
    }
}

/* ========== RTL Support for Mobile ========== */
@media (max-width: 575.98px) {
    body[dir="rtl"] .library-breadcrumbs {
        padding-right: 0;
    }

    body[dir="rtl"] .library-btn {
        margin-left: 0;
        margin-right: 0;
    }
}

/* ========== Landscape Mode Adjustments ========== */
@media (max-height: 500px) and (orientation: landscape) {
    .resource-card {
        min-height: 250px;
    }

    .card-img-top-wrapper {
        height: 120px;
    }

    .modal-dialog {
        margin: 0.25rem;
    }
}

/* ============================================
   Mobile Categories Bottom Sheet & FAB
   ============================================ */

/* FAB (Floating Action Button) */
.library-fab {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--ll-gradient);
    border: none;
    color: #fff;
    font-size: 1.5rem;
    box-shadow: 0 4px 20px rgba(102, 126, 234, 0.4);
    cursor: pointer;
    z-index: 1040;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.library-fab:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 25px rgba(102, 126, 234, 0.5);
}

.library-fab:active {
    transform: scale(0.95);
}

.library-fab.hidden {
    transform: scale(0);
    opacity: 0;
    pointer-events: none;
}

/* RTL Support for FAB */
body[dir="rtl"] .library-fab {
    right: auto;
    left: 24px;
}

/* Bottom Sheet Backdrop */
.library-bottom-sheet-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1045;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.library-bottom-sheet-backdrop.active {
    opacity: 1;
    visibility: visible;
}

/* Bottom Sheet Container */
.library-bottom-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 80vh;
    background: #fff;
    border-radius: 20px 20px 0 0;
    z-index: 1050;
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: flex;
    flex-direction: column;
    box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.15);
}

.library-bottom-sheet.active {
    transform: translateY(0);
}

/* Bottom Sheet Handle (swipe indicator) */
.bottom-sheet-handle {
    width: 40px;
    height: 5px;
    background: #dee2e6;
    border-radius: 3px;
    margin: 12px auto 0;
    cursor: grab;
}

.bottom-sheet-handle:active {
    cursor: grabbing;
}

/* Bottom Sheet Header */
.bottom-sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #e9ecef;
}

.bottom-sheet-header h5 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--ll-text-dark);
    font-weight: 600;
    margin: 0;
}

.bottom-sheet-close {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: #f1f3f4;
    color: #5f6368;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}

.bottom-sheet-close:hover {
    background: #e8eaed;
}

/* Bottom Sheet Content */
.bottom-sheet-content {
    flex: 1;
    overflow-y: auto;
    padding: 1rem 1.25rem 1.5rem;
    -webkit-overflow-scrolling: touch;
}

/* Category tree inside Bottom Sheet */
.library-bottom-sheet .category-tree .category-item a {
    padding: 0.85rem 1rem;
    font-size: 1rem;
    border-radius: var(--ll-radius-md);
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.library-bottom-sheet .category-tree .category-item.active>a {
    background: var(--ll-gradient);
    color: #fff;
}

/* Search inside Bottom Sheet */
.library-bottom-sheet .input-group {
    border-radius: var(--ll-radius-pill);
    overflow: hidden;
}

.library-bottom-sheet .form-control {
    border-radius: var(--ll-radius-pill) 0 0 var(--ll-radius-pill);
    padding: 0.75rem 1.25rem;
}

.library-bottom-sheet .input-group-append .btn {
    border-radius: 0 var(--ll-radius-pill) var(--ll-radius-pill) 0;
    padding: 0.75rem 1.25rem;
}

/* Prevent body scroll when sheet is open */
body.bottom-sheet-open {
    overflow: hidden;
}

/* ============================================
   Premium UI & Action Buttons (Global)
   ============================================ */
.resource-actions-container {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border-color, #f0f0f0);
}

.primary-action-area {
    flex: 1;
    min-width: 320px;
}

.secondary-actions {
    display: flex;
    gap: 1rem;
    flex-shrink: 0;
}

/* Premium Lock Card */
.premium-lock-card {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 16px;
    padding: 2rem;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
    transition: all 0.3s ease;
}

.premium-lock-card:hover {
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.06);
    transform: translateY(-2px);
}

.premium-lock-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--ll-gradient, linear-gradient(135deg, #667eea 0%, #764ba2 100%));
}

.lock-content {
    position: relative;
    z-index: 2;
}

.badge-warning {
    background-color: #fff3cd !important;
    color: #856404 !important;
    font-size: 0.85rem;
    padding: 0.5em 0.8em;
}

.lock-message {
    font-size: 1.1rem;
    margin: 1rem 0 1.5rem;
    line-height: 1.6;
    color: #6c757d;
}

.btn-premium-cta {
    background: var(--ll-gradient, linear-gradient(135deg, #667eea 0%, #764ba2 100%));
    border: none;
    border-radius: 50px;
    color: #fff !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.btn-premium-cta:hover {
    background: var(--ll-gradient);
    filter: brightness(1.1);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    transform: translateY(-1px);
}

/* Subscribe CTA Button - Uses dynamic success gradient */
.btn-gradient-green {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: var(--ll-gradient-success);
    border: none;
    border-radius: var(--ll-btn-radius-pill);
    color: #ffffff !important;
    font-weight: 600;
    font-size: 1rem;
    transition: var(--ll-transition-fast);
    text-decoration: none !important;
}

.btn-gradient-green:hover,
.btn-gradient-green:focus {
    filter: brightness(1.1);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(40, 167, 69, 0.4);
    color: #ffffff !important;
    text-decoration: none !important;
}

.btn-gradient-green:active,
.btn-gradient-green:visited {
    color: #ffffff !important;
}

@media (max-width: 768px) {
    .resource-actions-container {
        flex-direction: column;
    }

    .secondary-actions {
        width: 100%;
    }

    .secondary-actions .btn {
        flex: 1;
    }
}

/* ============================================
   Full-Width Library Page Override
   Makes the library page full-width while keeping header/footer
   ============================================ */

/* Main content area - full width */
body.ll-fullwidth-page #page-content,
body.ll-fullwidth-page #region-main-box,
body.ll-fullwidth-page #maincontent,
body.ll-fullwidth-page .main-inner,
body.ll-fullwidth-page #region-main {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* IMPORTANT: Do NOT affect role="main" globally as it may include header/footer regions */
body.ll-fullwidth-page #region-main-box [role="main"] {
    max-width: 100% !important;
    width: 100% !important;
}

/* Hide sidebars/drawers on library page */
body.ll-fullwidth-page #page.drawers .drawer,
body.ll-fullwidth-page .drawer-left,
body.ll-fullwidth-page .drawer-right,
body.ll-fullwidth-page #block-region-side-pre,
body.ll-fullwidth-page #block-region-side-post,
body.ll-fullwidth-page aside[data-region="blocks-column"] {
    display: none !important;
}

/* Container full width - BUT exclude header and footer */
body.ll-fullwidth-page #page-content .container-fluid,
body.ll-fullwidth-page #page-content .container,
body.ll-fullwidth-page #region-main-box .container-fluid,
body.ll-fullwidth-page #region-main-box .container {
    max-width: 100% !important;
    width: 100% !important;
}

/* Page wrapper full width */
body.ll-fullwidth-page #page-wrapper,
body.ll-fullwidth-page #page {
    max-width: 100% !important;
    width: 100% !important;
}

/* Boost theme specific */
body.ll-fullwidth-page.theme-boost #page.drawers,
body.ll-fullwidth-page.theme-boost #page {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Force drawer toggles to hide */
body.ll-fullwidth-page .drawer-toggler,
body.ll-fullwidth-page [data-toggler="drawers"] {
    display: none !important;
}

/* Library content padding - with top padding for moove/allama themes */
body.ll-fullwidth-page .local-library-container {
    padding: 1rem 2rem;
    margin-top: 0;
}

/* Moove/Allama theme specific fixes */
body.ll-fullwidth-page.theme-moove .local-library-container,
body.ll-fullwidth-page.theme-allama .local-library-container,
body.ll-fullwidth-page[class*="theme-moove"] .local-library-container,
body.ll-fullwidth-page[class*="theme-allama"] .local-library-container {
    padding-top: 1rem;
    margin-top: 0;
}

/* CRITICAL: Preserve header styling - do NOT affect header containers */
body.ll-fullwidth-page #page-header,
body.ll-fullwidth-page #page-header .container,
body.ll-fullwidth-page #page-header .container-fluid,
body.ll-fullwidth-page header,
body.ll-fullwidth-page nav.navbar,
body.ll-fullwidth-page .navbar {
    /* Reset any accidental overrides */
    background: unset;
    color: unset;
}

/* CRITICAL: Preserve footer styling - do NOT affect footer background/color */
/* Only allow max-width overrides for containers inside footer */
body.ll-fullwidth-page #page-footer .container,
body.ll-fullwidth-page #page-footer .container-fluid {
    max-width: none;
    width: auto;
}

/* RTL Support */
[dir="rtl"] body.ll-fullwidth-page .local-library-container,
body.ll-fullwidth-page[dir="rtl"] .local-library-container {
    padding: 1rem 2rem;
}

/* ============================================
   Moove/Allama Theme Specific Fixes
   Fixes for fixed navbar and footer styling
   Based on actual HTML structure analysis:
   - Navbar is inside div.fixed-top
   - Body has class: allamah-net (not theme-allama)
   - #page is the main content container
   ============================================ */

/* CRITICAL FIX: The fixed-top navbar causes content overlap */
/* The navbar is approximately 60-70px high */
html body.ll-fullwidth-page #page,
html body.ll-fullwidth-page #page.drawers,
html body.ll-fullwidth-page.allamah-net #page {
    padding-top: 70px !important;
    margin-top: 0 !important;
}

/* Alternative: if #page doesn't receive the padding, try #page-wrapper */
html body.ll-fullwidth-page #page-wrapper {
    padding-top: 70px !important;
}

/* Make sure the content inside isn't being pulled up */
html body.ll-fullwidth-page #page #topofscroll,
html body.ll-fullwidth-page #page .main-inner {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Ensure page-header is visible and not hidden behind navbar */
html body.ll-fullwidth-page #page-header {
    position: relative !important;
    z-index: 1 !important;
    background: #fff !important;
    padding: 1rem 2rem !important;
    margin-top: 0 !important;
}

/* The actual fixed-top navbar - don't interfere with it */
html body.ll-fullwidth-page .fixed-top {
    /* Keep theme styling */
    position: fixed !important;
    top: 0 !important;
    z-index: 1030 !important;
}

/* ============================================
   Footer Fixes
   DO NOT override footer background/color
   Let the theme styles apply naturally
   ============================================ */

/* Only fix container max-width issues, NOT colors */
html body.ll-fullwidth-page #page-footer .container,
html body.ll-fullwidth-page #page-footer .container-fluid,
html body.ll-fullwidth-page #page-footer .moove-container-fluid {
    max-width: none !important;
    width: auto !important;
}