/* ============================
   Colour Mode Customisation
   ============================ */

/* Light mode customisation - slightly off-white background */
/* [data-bs-theme="light"] {
    --bs-body-bg: #f5f5f5;
    --bs-body-bg-rgb: 245, 245, 245;
} */

/* Dark mode customisation - pure black background */
/* [data-bs-theme="dark"] {
    --bs-body-bg: #000000;
    --bs-body-bg-rgb: 0, 0, 0;
    --bs-body-color: #dee2e6;
    --bs-body-color-rgb: 222, 226, 230;
} */

/* ============================
   Collapsible Card Header Fix
   ============================ */

/* Fix collapsible card header hover/focus to not override color mode */
.card-header[data-bs-toggle="collapse"] {
    transition: background-color 0.15s ease-in-out;
}

.card-header[data-bs-toggle="collapse"]:hover,
.card-header[data-bs-toggle="collapse"]:focus {
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
}

/* ============================
   Typography - Heading Word Wrap
   ============================ */

h1,
h2,
h3,
h4,
h5,
h6 {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* ============================
   Custom Bootstrap Breakpoints
   ============================ */

/* UL Breakpoint at 1800px for 2K screens */
@media (min-width: 1800px) {
    .col-ul-1 {
        flex: 0 0 auto;
        width: 8.33333333%;
    }

    .col-ul-2 {
        flex: 0 0 auto;
        width: 16.66666667%;
    }

    .col-ul-3 {
        flex: 0 0 auto;
        width: 25%;
    }

    .col-ul-4 {
        flex: 0 0 auto;
        width: 33.33333333%;
    }

    .col-ul-5 {
        flex: 0 0 auto;
        width: 41.66666667%;
    }

    .col-ul-6 {
        flex: 0 0 auto;
        width: 50%;
    }

    .col-ul-7 {
        flex: 0 0 auto;
        width: 58.33333333%;
    }

    .col-ul-8 {
        flex: 0 0 auto;
        width: 66.66666667%;
    }

    .col-ul-9 {
        flex: 0 0 auto;
        width: 75%;
    }

    .col-ul-10 {
        flex: 0 0 auto;
        width: 83.33333333%;
    }

    .col-ul-11 {
        flex: 0 0 auto;
        width: 91.66666667%;
    }

    .col-ul-12 {
        flex: 0 0 auto;
        width: 100%;
    }
}

/* 3K Breakpoint at 2700px for 3K screens */
@media (min-width: 2700px) {
    .col-qhd-1 {
        flex: 0 0 auto;
        width: 8.33333333%;
    }

    .col-qhd-2 {
        flex: 0 0 auto;
        width: 16.66666667%;
    }

    .col-qhd-3 {
        flex: 0 0 auto;
        width: 25%;
    }

    .col-qhd-4 {
        flex: 0 0 auto;
        width: 33.33333333%;
    }

    .col-qhd-5 {
        flex: 0 0 auto;
        width: 41.66666667%;
    }

    .col-qhd-6 {
        flex: 0 0 auto;
        width: 50%;
    }

    .col-qhd-7 {
        flex: 0 0 auto;
        width: 58.33333333%;
    }

    .col-qhd-8 {
        flex: 0 0 auto;
        width: 66.66666667%;
    }

    .col-qhd-9 {
        flex: 0 0 auto;
        width: 75%;
    }

    .col-qhd-10 {
        flex: 0 0 auto;
        width: 83.33333333%;
    }

    .col-qhd-11 {
        flex: 0 0 auto;
        width: 91.66666667%;
    }

    .col-qhd-12 {
        flex: 0 0 auto;
        width: 100%;
    }
}

/* 4K Breakpoint at 3600px for 4K screens */
@media (min-width: 3600px) {
    .col-4k-1 {
        flex: 0 0 auto;
        width: 8.33333333%;
    }

    .col-4k-2 {
        flex: 0 0 auto;
        width: 16.66666667%;
    }

    .col-4k-3 {
        flex: 0 0 auto;
        width: 25%;
    }

    .col-4k-4 {
        flex: 0 0 auto;
        width: 33.33333333%;
    }

    .col-4k-5 {
        flex: 0 0 auto;
        width: 41.66666667%;
    }

    .col-4k-6 {
        flex: 0 0 auto;
        width: 50%;
    }

    .col-4k-7 {
        flex: 0 0 auto;
        width: 58.33333333%;
    }

    .col-4k-8 {
        flex: 0 0 auto;
        width: 66.66666667%;
    }

    .col-4k-9 {
        flex: 0 0 auto;
        width: 75%;
    }

    .col-4k-10 {
        flex: 0 0 auto;
        width: 83.33333333%;
    }

    .col-4k-11 {
        flex: 0 0 auto;
        width: 91.66666667%;
    }

    .col-4k-12 {
        flex: 0 0 auto;
        width: 100%;
    }
}

/* Custom site styles */

.col-max-width-sm {
    max-width: 450px;
}

.col-max-width-md {
    max-width: 600px;
}

.col-max-width-lg {
    max-width: 800px;
}

.breadcrumb-item+.breadcrumb-item::before {
    font-family: 'bootstrap-icons';
    content: "\f285";
}

.flash-messages {
    position: fixed;
    width: 80%;
    top: 100px;
    right: 10%;
    left: 10%;
    z-index: 1110;
}

.flash-messages-ajax {
    position: relative;
    width: 80%;
    right: 10%;
    left: 10%;
    z-index: 1110;
}

/* Toast container z-index */
.toast-container,
#toast-container {
    z-index: 1110 !important;
}

/* Bootstrap Modal z-index override */
.modal {
    z-index: 1100 !important;
}

.modal-backdrop {
    z-index: 1099 !important;
}

/* Breadcrumb Styling */
.breadcrumb-wrapper {
    overflow-x: auto;
    overflow-y: hidden;
    display: block;
    background: rgba(128, 128, 128, 0.2);
}

.breadcrumb-wrapper .breadcrumb {
    flex-wrap: nowrap !important;
    white-space: nowrap;
    display: inline-flex;
    min-width: 100%;
    margin-bottom: 0;
    background: transparent;
    padding: 0;
}

.breadcrumb-wrapper .breadcrumb-item {
    white-space: nowrap;
    flex-shrink: 0;
}

/* Custom scrollbar for breadcrumbs */
.breadcrumb-wrapper::-webkit-scrollbar {
    height: 4px;
}

.breadcrumb-wrapper::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 3px;
}

.breadcrumb-wrapper::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}

.breadcrumb-wrapper::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3);
}

.wrap {
    min-height: 100%;
    height: auto;
    margin: 0 auto -60px;
    padding: 0 0 60px;
}

.wrap>.container {
    padding: 70px 15px 20px;
}

.footer {
    height: 60px;
    padding-top: 20px;
}

.not-set {
    color: #c55;
    font-style: italic;
}

/* add sorting icons to gridview sort links */
a.asc:after,
a.desc:after {
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: 'bootstrap-icons';
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    padding-left: 5px;
}

a.asc:after {
    content: "\F148";
}

a.desc:after {
    content: "\F128";
}

.sort-numerical a.asc:after {
    content: "\F58A";
}

.sort-numerical a.desc:after {
    content: "\F587";
}

.sort-ordinal a.asc:after {
    content: "\F148";
}

.sort-ordinal a.desc:after {
    content: "\F128";
}

.grid-view th {
    white-space: nowrap;
}

.hint-block {
    display: block;
    margin-top: 5px;
    color: #999;
}

.error-summary {
    color: #a94442;
    background: #fdf7f7;
    border-left: 3px solid #eed3d7;
    padding: 10px 20px;
    margin: 0 0 15px 0;
}

.bg-black {
    background: #000000;
}


/* Auth pages (login, signup, password reset) */
.auth-container {
    display: flex;
    align-items: center;
}

/* Folder access code entry page */
.folder-enter-code {
    padding: 2rem 0;
    min-height: 60vh;
    display: flex;
    align-items: center;
}

.folder-enter-code .card {
    border: none;
    border-radius: 1rem;
}

.folder-enter-code input#code {
    font-size: 1.5rem;
    font-weight: 600;
}

.folder-enter-code input#code:focus {
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}

/* Folder and File Card Styles - Used across multiple views (public and admin) */
.folder-card,
.file-card {
    position: relative;
    overflow: hidden;
}

.folder-card .card-img-top,
.file-card .card-img-top {
    background: var(--bs-body-bg);
}


.folder-card-wrapper,
.file-card-wrapper {
    position: relative;
}

.file-card {
    position: relative;
    overflow: hidden;
}

/* Grid items containing cards need elevated z-index when dropdown is open */
/* This uses :has() to detect when any dropdown is open within a grid column */
/* and elevates that column above its siblings */
/* DISABLED: For masonry layout, don't set any styles - let masonry handle positioning
#files-container[data-layout="masonry"] > .col-6:has(.file-card-wrapper .dropdown.show),
#files-container[data-layout="masonry"] > .col-md-3:has(.file-card-wrapper .dropdown.show),
#files-container[data-layout="masonry"] > .col-lg-2:has(.file-card-wrapper .dropdown.show),
#files-container[data-layout="masonry"] > .col-qhd-1:has(.file-card-wrapper .dropdown.show) {
    z-index: 1000 !important;
}
*/

/* For non-masonry layouts (grid, folders), set both z-index and position:relative */
#files-container:not([data-layout="masonry"])>[class*="col-"]:has(.file-card-wrapper .dropdown.show),
#subfolders-container>[class*="col-"]:has(.folder-card-wrapper .dropdown.show),
#featured-container>[class*="col-"]:has(.folder-card-wrapper .dropdown.show) {
    z-index: 1000 !important;
    position: relative;
}

/* Folder card gradient overlay - extends from bottom up */
/* Fades from page background colour at bottom to transparent at top */
.folder-card-gradient-overlay {
    padding-top: 15vh;
    background: linear-gradient(to top,
            rgb(var(--bs-body-bg-rgb), 1) 2.5%,
            rgb(var(--bs-body-bg-rgb), 0.95) 20%,
            rgb(var(--bs-body-bg-rgb), 0.7) 45%,
            rgb(var(--bs-body-bg-rgb), 0.4) 65%,
            rgb(var(--bs-body-bg-rgb), 0.05) 90%,
            transparent);
}

.folder-card .card-img-overlay {
    pointer-events: none;
    z-index: 10;
}

.folder-card .card-img-overlay>* {
    pointer-events: auto;
}

.folder-card .carousel,
.folder-card .carousel-inner,
.folder-card .carousel-item {
    height: 100%;
}

.folder-card .carousel-item img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    /* object-fit and object-position set inline by widget to respect focal points */
}

/* Context menu containers and dropdowns */
.context-menu-container {
    z-index: 100;
}

/* Ensure context menu is above card overlays */
.folder-card-wrapper .context-menu-container,
.file-card-wrapper .context-menu-container {
    z-index: 100;
}

.folder-card-wrapper:has(.dropdown.show) .context-menu-container,
.file-card-wrapper:has(.dropdown.show) .context-menu-container {
    z-index: 1000;
}

/* Elevate the entire large folder card wrapper when dropdown is open */
/* This ensures it appears above subsequent cards on the page */
.folder-card-wrapper-large {
    position: relative;
    z-index: 5;
}

.folder-card-wrapper-large:has(.dropdown.show) {
    z-index: 1000;
}

/* List view: elevate file-card-wrapper when dropdown is open */
/* List items don't have column wrappers, so we target the wrapper directly */
.list-group>.file-card-wrapper {
    position: relative;
    z-index: 5;
}

.list-group>.file-card-wrapper:has(.dropdown.show) {
    z-index: 1000;
}

/* Ensure card-img-overlay doesn't compete with context menu */
.folder-card-wrapper .card-img-overlay,
.file-card-wrapper .card-img-overlay {
    z-index: 10;
}

.dropdown-menu {
    z-index: 1070 !important;
}

.folder-card-wrapper .dropdown-menu,
.file-card-wrapper .dropdown-menu {
    z-index: 1070 !important;
    position: absolute !important;
}

.folder-card-wrapper .dropdown,
.file-card-wrapper .dropdown {
    position: relative;
}

.folder-card-title {
    line-height: 1.3;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Context menu container within cards needs proper z-index */
.folder-card .card-body,
.file-card .card-body,
.folder-card .card-footer,
.file-card .card-footer {
    position: relative;
    z-index: 10;
    overflow: visible;
}

/* Thumbnail Styles */
.thumbnail-link {
    display: block;
    text-decoration: none;
}

.thumbnail-container {
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease;
}

.thumbnail-container::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0);
    transition: background 0.3s ease;
}

/* Only apply thumbnail overlay to file cards, not folder cards */
.file-card .thumbnail-link:hover .thumbnail-container::after {
    background: rgba(0, 0, 0, 0.1);
}

/* Aspect Ratio Utilities */
.aspect-ratio {
    position: relative;
    width: 100%;
    overflow: hidden;
}

/* Bootstrap 5 custom ratio for 2x1 landscape */
.ratio-2x1::before {
    padding-top: 50%;
    /* 2:1 Landscape */
}

/* Bootstrap 5 custom ratio for 3x1 landscape */
.ratio-3x1::before {
    padding-top: 33.333333%;
    /* 3:1 Landscape */
}

/* Bootstrap 5 custom ratio for 3x2 */
.ratio-3x2::before {
    padding-top: 66.666667%;
    /* 3:2 */
}

/* Bootstrap 5 custom ratio for 2x3 portrait */
.ratio-2x3::before {
    padding-top: 150%;
    /* 2:3 Portrait */
}

/* Bootstrap 5 custom ratio for 3x4 portrait */
.ratio-3x4::before {
    padding-top: 133.333333%;
    /* 3:4 Portrait */
}


/* Ensure images inside ratio containers fill properly */
.ratio>img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Ensure carousels inside ratio containers fill properly */
.ratio>.carousel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.ratio>.carousel .carousel-inner,
.ratio>.carousel .carousel-item {
    height: 100%;
}

.ratio>.carousel .carousel-item img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* object-fit and object-position set inline by widget */
}

/* Object-fit utilities (Bootstrap 5.3+ feature, backported for 5.2.3) */
.object-fit-contain {
    object-fit: contain !important;
}

.object-fit-cover {
    object-fit: cover !important;
}

.object-fit-fill {
    object-fit: fill !important;
}

.object-fit-scale {
    object-fit: scale-down !important;
}

.object-fit-none {
    object-fit: none !important;
}

/* Folder Carousel Header */
.folder-carousel-header {
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    margin-top: -1rem;
    margin-bottom: 2rem;
}

.folder-carousel-header .carousel {
    border-radius: 0;
}

.folder-carousel-header .carousel-item img {
    width: 100%;
    /* object-fit and object-position set inline by widget to respect focal points */
}

/* Cover Management Styles */
.cover-badge {
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.file-card[data-in-cover="true"] {
    border: 2px solid #0dcaf0 !important;
}

/* ============================
   Justified Gallery Customisations
   ============================ */

/* Container styling */
.justified-gallery {
    width: 100%;
    margin: 0;
    padding: 0;
}

/* Remove the lightbox icon from justified gallery */
.justified-gallery .lightbox-gallery::after {
    display: none;
}

/* Overlays container - positioned absolutely over the image */
.justified-gallery .jg-overlays {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 10;
}

/* Allow interaction with overlay elements */
.justified-gallery .jg-overlays>* {
    pointer-events: auto;
}

/* Badges top left */
.justified-gallery .jg-badges-top-left {
    position: absolute;
    top: 8px;
    left: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Context menu top right */
.justified-gallery .jg-context-menu-top-right {
    position: absolute;
    top: 4px;
    right: 4px;
}

/* Hover effect for justified gallery images */
.justified-gallery a:hover {
    opacity: 0.95;
}

/* Grid Gallery (justified layout) styles */
/* Grid Gallery handles all layout internally via its own CSS */

/* ============================
   Heroes Section (Home Page)
   ============================ */

.hero-image {
    transition: transform 0.3s ease, filter 0.3s ease;
}

.hero-link:hover .hero-image {
    transform: scale(1.05);
    filter: brightness(1.1);
}

/* ============================
   Soft-Deleted Item Styles
   ============================ */

/* Overlay for soft-deleted items (files, folders) */
.soft-deleted-overlay {
    background: rgba(220, 53, 69, 0.3);
    z-index: 5;
    pointer-events: none;
    border-radius: inherit;
}

/* Subtle styling for soft-deleted item containers */
.soft-deleted-item {
    opacity: 0.85;
}

/* ============================
   Modal Responsive Override
   ============================ */

/* Make modal-xl behave like fullscreen on md and smaller screens (up to 991px) */
/* This overrides Bootstrap's modal-xl sizing to be near-fullscreen on tablets */
@media (max-width: 991.98px) {
    .modal-dialog.modal-responsive {
        max-width: calc(100% - 1rem);
        margin: 1.5rem;
    }
}