/* filelocker.css */
.filelocker {

    .container-fluid {
        padding: 0;
        overflow: hidden;
    }

    #filelocker-container {
        display: flex;
        border-radius: 8px;
        padding: 0;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }

    .sidebar {
        min-height: 100vh;
        height: auto;
        overflow: visible;
        background-color: var(--background-color);
        border-right: 1px solid var(--primary-color);
        padding: 10px;
        border-top-left-radius: 8px;
        border-bottom-left-radius: 8px;
    }

    .toolbar {
        background-color: var(--white-color);
        padding: 10px;
        border-radius: 8px;
        gap: 4px;
    }

    h4 {
        font-size: 1.25rem;
        /* margin-bottom: 0.75rem; */
        font-weight: 600;
        color: var(--accent-color);
        padding: 0;
    }

    .list-group-item {
        /* cursor: pointer; */
        padding: 10px;
        transition: background-color 0.3s ease, color 0.3s ease;
    }

    .list-group-item:hover,
    .list-group-item:focus {
        background-color: var(--secondary-color);
        color: var(--white-color);
        outline: none;
    }

    .folder-item.active {
        background-color: var(--primary-color);
        color: var(--white-color);
        font-weight: bold;
    }

    .file-pane {
        min-height: 100vh;
        height: auto;
        overflow: visible;
        background-color: var(--white-color);
        border-right: 1px solid var(--primary-color);
        padding: 10px;
    }

    .file-info-pane {
        min-height: 100vh;
        height: auto;
        overflow: visible;
        padding: 10px;
        background-color: var(--background-color);
        border-top-right-radius: 8px;
        border-bottom-right-radius: 8px;
        word-break: break-all;
    }

    .breadcrumb {
        background-color: transparent;
        padding: 0;
        margin-bottom: 10px;
    }

    .breadcrumb-item.active {
        font-weight: bold;
        color: var(--primary-color);
        font-size: 1.25rem;
    }

    .spinner-border {
        margin-top: 1rem;
    }

    .context-menu {
        position: absolute !important;
        z-index: 1000;
        background-color: var(--white-color);
        border: .5px solid var(--second-accent-color);
        min-width: 150px;
        max-width: 90%;
        /* Ensures it doesn’t go beyond the viewport */
        padding: 0;
        margin: 0;
        list-style: none;
        border-radius: 8px;
        animation: fadeIn 0.2s ease-in-out;
        cursor: pointer;
    }

    .cm-item {
        cursor: pointer;
        display: flex;
        align-items: center;
        padding: 10px 15px;
        font-size: 16px;
    }

    .cm-item i {
        margin-right: 10px;
    }

    .context-menu ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .context-menu ul li {
        padding: 10px;
        cursor: pointer;
        font-size: 0.95rem;
        transition: background-color 0.3s ease;
    }

    .context-menu ul li i {
        margin-right: 10px;
    }

    .file-item {
        display: flex;
        justify-content: flex-start;
        /* align-items: center; */
        flex-direction: column;
        padding: 10px;
        transition: background-color 0.3s ease;
        word-break: break-word;
    }

    .file-item i {
        margin-right: 5px;
        color: var(--second-accent-color);
        padding: 4px;
    }

    .file-actions {
        cursor: pointer;
        display: flex;
        margin-left: auto;
        /* Push actions to the end */
        align-items: center;
    }


    .file-item:hover,
    .file-item:focus {
        background-color: var(--white-color);
        color: var(--primary-color);
        outline: none;
    }

    /* .file-actions {
        cursor: pointer;
        display: flex;
    } */

    i.fas {
        margin-right: 10px;
    }

    .file-item i {
        margin-right: 5px;
        color: var(--second-accent-color);
        padding: 4px;
    }

    #upload-progress-bar-container {
        height: 1rem;
        margin-bottom: 1rem;
        /* margin-left: 10px; */
    }

    .progress-bar {
        font-size: 0.85rem;
        background-color: var(--primary-color);
        transition: width 0.3s ease;
        color: var(--white-color);
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    .modal-content {
        border-radius: 10px;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    }

    .modal-header {
        background-color: var(--primary-color);
        color: var(--white-color);
    }

    .modal-body {
        font-size: 1rem;
    }

    .file-actions .fa-link {
        margin-right: 20px;
    }

    .file-actions .fa-ellipsis-v {
        cursor: pointer;
    }

    .btn:hover,
    .btn:focus {
        background-color: var(--secondary-color) !important;
        color: var(--white-color);
        border: 1px solid var(--secondary-color) !important;
    }

    .folder-actions {
        cursor: pointer;
        color: var(--second-accent-color);
        padding: 4px;
    }

    .folder-item:hover .folder-actions {
        color: var(--white-color);
    }

    .folder-item:hover,
    .folder-item:focus {
        background-color: var(--secondary-color);
        color: var(--white-color);
        outline: none;
    }

    .shared-folder-item {
        cursor: pointer;
    }

    #new-folder-btn,
    #home-btn,
    #sub-folder-btn {
        background-color: var(--primary-color);
        border: 1px solid var(--primary-color);
        color: var(--white-color)
    }

    #go-back-btn {
        background-color: var(--white-color);
        color: var(--primary-color);
        border: none;
        font-size: 1.1rem;
    }



    /* Style for selected folder */
    .selected-folder {
        background-color: var(--primary-color);
        color: var(--white-color);
    }

    .selected-folder .folder-actions {
        color: var(--white-color);
    }

    .alert {
        font-size: 0.9rem;
        padding: 10px;
        text-align: center;
        border-radius: 5px;
        margin-top: 10px;
        width: 100%;
    }

    .file-copy-success {
        position: relative;
        background-color: var(--success-color);
        border: 1px solid var(--success-color);
        color: var(--white-color);
        padding: 0.5rem;
        margin: 0.5rem 0;
        border-radius: 5px;
        font-size: 0.9rem;
    }

    .alert-success {
        background-color: var(--success-color);
        color: var(--white-color);
        border-color: var(--success-color);
    }

    .preview-container {
        padding: 1rem;
        border-radius: 10px;
        background-color: var(--white-color);
        margin-top: 10px;
    }

    .toggleFullscreen {
        position: relative;
        border: none;
        background: var(--white-color);
        float: inline-end;
        color: var(--primary-color);
        font-size: 1.5rem;
    }

    .preview-container img {
        width: 50%;
        height: auto;
        max-height: 50vh;
        background-color: var(--white-color);
    }

    .preview-container iframe {
        background-color: var(--white-color) !important;
        border: 1px solid var(--background-color);
        border-radius: 8px;
    }

    #pdf-viewer {
        background-color: var(--white-color) !important;
        border: 1px solid var(--background-color);
        border-radius: 8px;
    }

    .preview-container pre {
        background-color: var(--white-color) !important;
        color: var(--primary-color);
        padding: 10px;
    }

    .sheet-preview-container {
        overflow-x: auto;
    }

    .sheet-preview table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 10px;
    }

    .sheet-preview th,
    .sheet-preview td {
        border: 1px solid var(--background-color);
        padding: 8px;
        text-align: left;
    }

    .sheet-buttons-container {
        text-align: center;
    }

    .sheet-btn {
        padding: 8px 16px;
        margin: 5px;
        cursor: pointer;
        background-color: var(--white-color);
        border: 1px solid var(--background-color);
        border-radius: 4px;
    }

    .sheet-btn.active {
        background-color: var(--background-color);
    }

    canvas {
        width: 100% !important;
    }

    .file-owner,
    .file-created,
    .folder-owner {
        font-style: italic;
        font-size: .7rem;
    }

    .folder-owner:hover {
        color: var(--white-color);

    }

    .file-name {
        font-size: .9rem;
    }

    @media (max-width: 576px) {
        .filelocker {
            position: relative;

            .col-md-3,
            .col-md-5,
            .col-md-4 {
                flex: 100%;
            }

            .context-menu {
                max-width: 50%;
                left: 0 !important;
                bottom: 0;
                top: auto !important;
                border-radius: 8px;
                margin-right: 2.2rem;
            }

            .cm-item {
                padding: 12px 20px;
                font-size: 18px;
            }
        }

        .folder-item:hover,
        .folder-item:focus {
            background-color: var(--primary-color);
            color: var(--white-color);
            outline: none;
        }

        .list-group-item:hover,
        .list-group-item:focus {
            background-color: var(--primary-color);
            color: var(--white-color);
            outline: none;
        }

        .file-item:hover,
        .file-item:focus {
            background-color: var(--white-color);
            color: var(--primary-color);
            outline: none;
        }
    }

    @media (max-width: 768px) {
        .filelocker {
            position: relative;

            .context-menu {
                max-width: 50%;
                left: 0 !important;
                right: 0 !important;
                top: auto !important;
                bottom: 0 !important;
                border-radius: 8px;

            }

            .cm-item {
                padding: 12px 20px;
                font-size: 18px;
            }

            h4 {
                padding: 1rem 1rem 1rem 0 !important;
            }

        }

        .folder-item:hover,
        .folder-item:focus {
            background-color: var(--primary-color);
            color: var(--white-color);
            outline: none;
        }

        .list-group-item:hover,
        .list-group-item:focus {
            background-color: var(--primary-color);
            color: var(--white-color);
            outline: none;
        }

        .file-item:hover,
        .file-item:focus {
            background-color: var(--white-color);
            color: var(--primary-color);
            outline: none;
        }

        .sidebar {
            height: auto;
            min-height: auto;
            border-right: none;
            border-bottom-left-radius: 0;
            border-top-right-radius: 8px;
        }

        .toolbar {
            display: flex !important;
            align-items: center !important;
            justify-content: space-around !important;
        }

        .file-info-pane {
            height: auto;
            min-height: auto;
            border-top-right-radius: 0;
            border-bottom-left-radius: 8px;
        }

        .file-pane {
            height: auto;
            min-height: auto;
            border-right: none;
            background-color: var(--white-color);
            border: 5px solid var(--background-color);
        }

        #filelocker-container {
            display: block;
        }

        h4 {
            font-size: 1.15rem;
        }

        .breadcrumb {
            display: block;
        }

        .select2-container {
            width: 100% !important;
        }
    }

    /* List View (default) */
    .list-view .file-item {
        display: flex;
        justify-content: space-between;
        padding: 10px;
    }

    .list-view .file-item i {
        margin-right: 10px;
    }

    /* Grid View */
    /* Grid View */
    .grid-view .file-item {
        display: inline-block;
        width: calc(33.33% - 20px);
        /* 3 items per row */
        margin: 10px;
        padding: 10px;
        box-sizing: border-box;
        text-align: center;
    }

    .grid-view .file-icon {
        font-size: 36px;
        /* Icon size */
        margin-bottom: 10px;
        /* Space between icon and file info */
    }

    .grid-view .file-info {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .grid-view .file-info .file-name {
        font-size: 14px;
    }

    .grid-view .file-actions {
        font-size: 16px;
    }

    .grid-view .file-item i {
        font-size: 24px;
    }

    .grid-view .file-item span {
        display: block;
        margin-top: 10px;
    }

    .rtl-text {
        direction: rtl;
        text-align: right;
    }

    .ltr-text {
        direction: ltr;
        text-align: left;
    }

}

#transcriptTextArea {
    max-height: 300px;
    resize: none;

    .rtl-text {
        direction: rtl;
        text-align: right;
    }

    .ltr-text {
        direction: ltr;
        text-align: left;
    }

}

#transcriptTextArea.rtl-text {
    direction: rtl;
    text-align: right;
}

#transcriptTextArea.ltr-text {
    direction: ltr;
    text-align: left;
}



#transcriptTextArea:focus {
    box-shadow: none;
    border: 1px solid var(--primary-color);
}

.btn.btn-primary {
    background-color: var(--primary-color);
    border: 1px solid var(--primary-color);
}

.btn.btn-primary:hover {
    background-color: var(--secondary-color);
    border: 1px solid var(--secondary-color);
}