/*Write your custom css in this file.*/

.app-modal.has-sidebar .app-modal-previous-button {
    left: 5px;
}

.app-modal.has-sidebar .app-modal-next-button {
    right: 465px;
}

.app-modal-sidebar {
    width: 460px;
    border-left: 1px solid #f1f1f5;
    height: 100%;
    display: table-cell;
    vertical-align: top;
}

.app-modal .expand {
    display: block;
    right: 470px !important;
}

.app-modal.has-sidebar .app-modal-zoom-in-button {
    right: 560px;
    display: none;
}

.app-modal.has-sidebar .app-modal-zoom-out-button {
    right: 515px;
    display: none;
}

.filter-sub-task-button {
    display: none !important;
}

/* Add transition for smooth effect */
.dashboard-image {
    transition: filter 0.3s ease;
    filter: brightness(1) invert(0);
}

/* Apply filter when dark mode is active */
.dark-mode .dashboard-image {
    filter: brightness(0) invert(1);
}

.brand-logo-mini img {
    filter: brightness(1) invert(0) !important;
}

.app-modal-content {
    background: #2f3541;
}

.timeline-images .file-mockup {
    width: 100%;
    height: 200px !important;
}

.comment-file p {
    max-width: 90%;
}

.general-form textarea {
    height: 100px;
}

.modal-header {
    align-items: center !important;
    padding: 2rem 2rem !important;
}

.modal-close {
    position: absolute !important;
    right: 25px;
    top: 25px;
    font-size: 16px;
    z-index: 999;
}

.content-sidebar {
    width: 150px;
}

/* Hover effect for nav icons */
.nav-item .nav-link:hover .feather {
    transform: scale(1.1);
    transition: all 0.2s ease;
    stroke: #3c8dbc;  /* Change color on hover */
}

/* If you want a more subtle effect, you could use this alternative */
.nav-item .nav-link:hover .feather.icon {
    opacity: 0.8;
    filter: brightness(1.2);
    transition: all 0.2s ease;
}

/* Ensure smooth transition for both states */
.nav-item .nav-link .feather {
    transition: all 0.2s ease;
}

/* If you specifically want to target the plus-circle icon */
.nav-item .nav-link:hover .feather-plus-circle {
    stroke: #3c8dbc;
    transform: rotate(90deg);
    transition: all 0.3s ease;
}

.bg-custom-success {
    background-color: #26b60d; /* Light green */
}

.bg-custom-light-green {
    background-color: #95c55d; /* Light green */
}

.bg-custom-orange {
    background-color: #e48b1d; /* Orange */
}

.kanban-item-list {
    max-height: 800px;
    height: 830px !important;
    overflow: hidden;
}

.kanban-container {
    margin-top: 0;
    margin-bottom: 0;
    padding: 0px;
    padding-top: 15px;
    padding-bottom: 15px;
    background: #f2f4f6;
    border: 1px solid #f2f4f6;
    border-top: none;
    height: 850px;
}

.kanban-col {
    list-style-type: none;
    float: left;
    margin: 0 15px;
    width: 305px;
    height: 840px;
}

.task-preview {
    max-width: 1300px;
    min-width: 400px;
    margin: auto;
  }

.custom-modal-lg {
    max-width: 1200px;
    transition: all 300ms ease !important;
}

/* Fix file preview comment container height issue */
#file-preview-comment-container {
    height: auto !important;
    max-height: calc(100vh - 300px) !important;
    overflow-y: auto !important;
    margin-top: 0 !important;
    padding-top: 15px !important;
    padding-bottom: 50px;
}

/* Ensure the file preview content area uses full available space */
.app-modal-content {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

/* Fix any unwanted margins on the file preview container */
#file-preview-container {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Ensure image and GLB viewers center properly without top margin */
#file-preview-container img,
#file-preview-container canvas,
#file-preview-container iframe {
    margin-top: 0 !important;
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
}