/* File Picker — modal reutilizable (fm-*) */

.fm-filepicker-modal {
    --fm-fp-media-bg: var(--bs-secondary-bg);
    --fm-fp-card-radius: 0.375rem;
    --fm-fp-tile: 4.75rem;
    --fm-fp-side-w: 15rem;
}

.fm-filepicker-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0.5rem 0.75rem;
}

.fm-filepicker-search {
    flex: 1 1 14rem;
    min-width: 0;
}

.fm-filepicker-filters {
    flex: 0 0 auto;
    align-self: stretch;
}

.fm-filepicker-filters .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    padding-left: 0.65rem;
    padding-right: 0.65rem;
}

.fm-filepicker-toolbar .input-group-text,
.fm-filepicker-toolbar .form-control,
.fm-filepicker-toolbar .input-group .btn {
    min-height: 2.5rem;
}

.fm-filepicker-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    margin-bottom: 0.5rem;
}

.fm-filepicker-nav .breadcrumb {
    margin-bottom: 0;
}

.fm-filepicker-legend {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0;
}

.fm-filepicker-legend-item {
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

.fm-filepicker-legend-item .ri {
    font-size: 1.05rem;
    line-height: 1;
}

.fm-filepicker-legend-item--private .ri {
    color: #e0a800;
}

.fm-filepicker-legend-item--shared .ri {
    color: #0dcaf0;
}

.fm-filepicker-workspace {
    display: flex;
    align-items: stretch;
    gap: 0.75rem;
    min-height: 18rem;
}

.fm-filepicker-browser {
    flex: 1 1 auto;
    min-width: 0;
}

.fm-filepicker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--fm-fp-tile), 1fr));
    gap: 0.35rem 0.4rem;
    align-content: start;
    min-height: 8rem;
}

.fm-filepicker-side {
    flex: 0 0 var(--fm-fp-side-w);
    width: var(--fm-fp-side-w);
    display: flex;
    flex-direction: column;
    padding: 0.75rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--fm-fp-card-radius);
    background: var(--bs-body-bg);
}

.fm-filepicker-side.d-none {
    display: none !important;
}

.fm-filepicker-side-frame {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    flex: 1 1 auto;
    min-height: 12rem;
    border-radius: 0.35rem;
    background: var(--fm-fp-media-bg);
    overflow: hidden;
    margin-bottom: 0.65rem;
}

.fm-filepicker-side-frame img {
    width: 100%;
    height: 100%;
    max-height: 16rem;
    object-fit: contain;
    display: block;
    padding: 0.5rem;
    box-sizing: border-box;
}

.fm-filepicker-side-placeholder {
    font-size: 2rem;
    color: var(--bs-secondary-color);
    line-height: 1;
}

.fm-filepicker-side-name {
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.35;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    word-break: break-word;
}

.fm-filepicker-side-meta {
    margin-top: 0.25rem;
    font-size: 0.75rem;
    color: var(--bs-secondary-color);
}

.fm-filepicker-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    border-top: 1px solid var(--bs-border-color);
    background: var(--bs-body-bg);
}

.fm-filepicker-modal .modal-body {
    min-height: 18rem;
    padding-bottom: 1rem;
}

.fm-filepicker-empty-icon {
    font-size: 2rem;
    line-height: 1;
}

.fm-filepicker-modal .fm-filepicker-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.15rem;
    width: 100%;
    margin: 0;
    padding: 0.3rem;
    border: 1px solid transparent;
    border-radius: var(--fm-fp-card-radius);
    background: transparent;
    color: inherit;
    text-align: center;
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.12s ease, background 0.12s ease;
}

.fm-filepicker-modal .fm-filepicker-card:hover,
.fm-filepicker-modal .fm-filepicker-card:focus-visible {
    background: rgba(var(--bs-primary-rgb), 0.06);
    border-color: rgba(var(--bs-primary-rgb), 0.25);
    outline: none;
}

.fm-filepicker-modal .fm-filepicker-card.is-selected {
    background: rgba(var(--bs-primary-rgb), 0.1);
    border-color: var(--bs-primary);
}

.fm-filepicker-modal .fm-filepicker-media {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1;
    border-radius: 0.3rem;
    background: var(--fm-fp-media-bg);
    overflow: hidden;
}

.fm-filepicker-modal .fm-filepicker-card--folder .fm-filepicker-media {
    background: transparent;
}

.fm-filepicker-modal .fm-filepicker-thumb {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
    padding: 0.15rem;
    box-sizing: border-box;
}

.fm-filepicker-modal .fm-filepicker-icon {
    font-size: 1.75rem;
    line-height: 1;
}

.fm-filepicker-modal .fm-filepicker-icon--private {
    color: #e0a800;
}

.fm-filepicker-modal .fm-filepicker-icon--shared {
    color: #0dcaf0;
}

.fm-filepicker-modal .fm-filepicker-icon--file {
    color: var(--bs-secondary-color);
    font-size: 1.35rem;
}

.fm-filepicker-modal .fm-filepicker-caption {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 0 0.1rem;
}

.fm-filepicker-modal .fm-filepicker-name {
    display: block;
    width: 100%;
    font-size: 0.6875rem;
    font-weight: 500;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fm-filepicker-modal .fm-filepicker-crumb-link {
    color: var(--bs-primary);
    text-decoration: none;
    font-weight: 500;
}

.fm-filepicker-modal .fm-filepicker-crumb-link:hover {
    color: var(--bs-link-hover-color, var(--fm-brand-dark, var(--bs-primary)));
    text-decoration: underline;
}

.fm-filepicker-modal .breadcrumb-item + .breadcrumb-item::before {
    content: "›";
    color: var(--bs-secondary-color);
    font-weight: bold;
}

.fm-filepicker-modal .breadcrumb-item.active {
    color: var(--bs-body-color);
    font-weight: 600;
}

.fm-filepicker-modal #filePickerSummary {
    margin-bottom: 0.5rem !important;
}

@media (max-width: 767.98px) {
    .fm-filepicker-modal {
        --fm-fp-side-w: 100%;
        --fm-fp-tile: 4.5rem;
    }

    .fm-filepicker-workspace {
        flex-direction: column;
    }

    .fm-filepicker-side {
        width: 100%;
        max-width: none;
        min-height: auto;
    }

    .fm-filepicker-side-frame {
        min-height: 10rem;
        max-height: 12rem;
        flex: 0 0 auto;
    }
}