/* Theme
-------------------------------------------------- */

/* Change the white to any color */
input:-webkit-autofill,
input:-webkit-autofill:hover {
    -webkit-text-fill-color: var(--text-color) !important;
    -webkit-box-shadow: 0 0 0 30px var(--color-200) inset !important;
    transition: background-color 5000s ease-in-out 0s;
}

    input:-webkit-autofill:focus,
    input:-webkit-autofill:active {
        -webkit-box-shadow: 0 0 0 30px var(--card-color) inset !important;
    }

input[type="date"]::-webkit-calendar-picker-indicator, input[type="time"]::-webkit-calendar-picker-indicator {
    filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(85%);
    color: var(--text-color); /* For fallback or reference */
}

/* For browsers that support it, use color */
input[type="date"]::-webkit-calendar-picker-indicator, input[type="time"]::-webkit-calendar-picker-indicator {
    color: var(--text-color);
}

[class="theme-indigo"] {
    --primary-color: #6789ba;/*#484c7f;*/
    --secondary-color: #6c757d/*#F19828*/;
}

[data-theme="dark"] [class="theme-indigo"] {
    --secondary-color: #6c757d/*#F19828*/;
}

.table {
    --bs-table-striped-color: #8f8f8f;
    --bs-table-striped-color: var(--text-color);
}

.table-bordered {
    --border-color: var(--color-400);
}

.table-sm > :not(caption) > * > * {
    padding: .25rem .25rem !important;
}
.page-item .page-link {
    color: #ffffff;
}

/* Sidebar
-------------------------------------------------- */
.h-link {
    /*font-size: 16px !important;*/
    padding: 5px 0 0 0 !important;
}

.logout {
    font-weight: 400;
    font-family: "Open Sans", sans-serif;
    font-size: 17px;
    color: var(--white-color);
}

.sidebar.sidebar-mini .logout span {
    display: none;
}

.menu-logo-full {
    display: inline;
}
.menu-logo-icon {
    display: none;
}

/* When sidebar-mini is active */
.sidebar.sidebar-mini .menu-logo-full {
    display: none;
}
.sidebar.sidebar-mini .menu-logo-icon {
    display: inline;
}

.sidebar .menu-list .m-link:hover, .sidebar .menu-list .m-link.active, .sidebar .menu-list .ms-link:hover, .sidebar .menu-list .ms-link.active {
    color: #F19828; /*original secondary theme colour */
}

/* Cropper
-------------------------------------------------- */
.img-container img {
    max-width: 100%;
}

.cropper-progress {
    display: none;
    margin-bottom: 1rem;
}

.alert {
    display: none;
}

/* Font
-------------------------------------------------- */
.fs-7 {
    font-size: 0.75rem !important;
}
.fs-8 {
    font-size: 0.5rem !important;
}


/* Sweetalert2
-------------------------------------------------- */
.swal2-container {
    z-index: 100000 !important;
}


/* Avatar
-------------------------------------------------- */
.avatar.no-thumbnail.sm {
    line-height: 1.5rem;
}

/* flatpickr
-------------------------------------------------- */
.flatpickr-hidden-input {
    height: 1px;
    width: 1px;
    border: none;
    background-color: transparent;
    outline: none !important;
}

.flatpickr-toggle {
    cursor: pointer;
}

/* checkbox
-------------------------------------------------- */
.form-check-input {
    background-color: var(--color-200);
    border: 0;
}

.form-check-input:checked {
    background-color: #6789ba !important;
    border: 0;
}

.form-check-input:focus, .label::after, label.form-check-label:focus, .form-check-input::after, .form-check-input:not(:disabled):not(.disabled):active:focus {
    color: black;
    outline: 0;
    border: 0;
    box-shadow: 0 0 0 0.1rem #6789ba !important;
}

.checkbox-xl {
    width: 38px;
    height: 38px;
    margin-top: 0;
}

.input-text-checkbox {
    background-color: var(--body-color) !important;
}

/* accordion
-------------------------------------------------- */

.accordion {
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000000'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='currentColor'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.pm-accordion {
    --bs-accordion-active-bg: var(--primary-color);
}

.dark-accordion {
    --bs-accordion-active-bg: var(--body-color);
}

.pm-accordion-item, .dark-accordion-item {
    color: var(--text-color);
    background-color: var(--body-color);
    border: var(--bs-accordion-border-width) solid var(--bs-accordion-border-color)
}

.pm-accordion-button {
    background: var(--primary-color) !important;
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0)) !important;
    color: white !important;
}
    .pm-accordion-button:not(.collapsed) {
        color: white !important;
        background-color: var(--body-color);
        box-shadow: inset 0 calc(-1 * var(--bs-accordion-border-width)) 0 var(--border-color);
    }

.dark-accordion-button {
    background: var(--body-color) !important;
    color: var(--text-color) !important;
}

    .dark-accordion-button:not(.collapsed) {
        color: var(--text-color) !important;
        background-color: var(--body-color);
        box-shadow: inset 0 calc(-1 * var(--bs-accordion-border-width)) 0 var(--border-color);
    }

.accordion-button{
    color: var(--text-color);
}

/* carousel
-------------------------------------------------- */
.carousel-inner {
    padding: 0 2rem;
}

.carousel-control-prev-icon {
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e")
}

.carousel-control-next-icon {
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e")
}

/* dropdown
-------------------------------------------------- */
.dropdown-header {
    padding: var(--bs-dropdown-item-padding-y) var(--bs-dropdown-item-padding-x);
}

.btn-check:checked + .btn, :not(.btn-check) + .btn:active, .btn:first-child:active, .btn.active, .btn.show {
    background-color: var(--bs-table-bg)
}

/* dragula drag and drop
-------------------------------------------------- */

.drag-container {
    overflow-x: auto;
}

.drag-list {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: flex-start;
}

@media (max-width: 690px) {
    .drag-list {
        display: block;
    }
}

.drag-column {
    flex: 1;
    margin: 0;
    padding: 0.75rem 0;
    position: relative;
    overflow: hidden;
    height: 100%;
    min-width: 250px;
}

@media (max-width: 690px) {
    .drag-column {
        margin-bottom: 30px;
    }
}

.drag-inner-list {
    list-style-type: none;
    margin: 0;
    padding: 0.75rem;
    min-height: 200px;
    height: 100%;
}

    .drag-inner-list.ex-over {
        background-color: #000;
    }

.drag-item {
    margin: 0.75rem 0;
    background: var(--color-200);
    position: relative;
}

.drag-options {
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    transform: translateX(100%);
}

    .drag-options.active {
        transform: translateX(0);
        opacity: 1;
    }

/* Dragula CSS  */
.gu-mirror {
    position: fixed !important;
    margin: 0 !important;
    z-index: 9999 !important;
    opacity: 0.8;
    list-style-type: none;
}

.gu-hide {
    display: none !important;
}

.gu-unselectable {
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
}

.gu-transit {
    opacity: 0.2;
}



/* Full Calendar
-------------------------------------------------- */

.fc * {
    color: var(--primary-color) !important;
}

.fc .fc-col-header-cell-cushion {
    color: var(--primary-color) !important;
}

.fc .fc-h-event .fc-event-title {
    color: var(--white-color) !important;
}

.fc .fc-h-event {
    background-color: var(--primary-color) !important;
    border-color: var(--border-color) !important;
}

.fc .fc-daygrid-event-dot {
    border-color: var(--secondary-color) !important;
}

.fc .fc-button-primary {
    background-color: var(--secondary-color) !important;
    color: var(--white-color) !important;
    border-color: var(--secondary-color) !important;
}

    .fc .fc-button-primary .fc-icon {
        color: var(--white-color) !important;
    }

.fc-theme-standard .fc-scrollgrid, .fc-theme-standard td, .fc-theme-standard th {
    border-color: var(--border-color) !important;
}

.fc-theme-standard .fc-list {
    border-color: var(--border-color) !important;
}

.fc-theme-standard .fc-list-day-cushion {
    /*background-color: #6c757d !important;*/
    background-color: var(--border-color) !important;
}

.fc .fc-list-event:hover td, .fc .fc-list-event:hover td a {
    background-color: var(--primary-color) !important;
    color: var(--white-color) !important;
}
    .fc .fc-list-event:hover td .fc-list-event-dot {
        border-color: var(--white-color) !important;
    }



/* tinymce
-------------------------------------------------- */
.tox-tinymce {
    border-color: var(--border-color) !important;
}

.tox:not(.tox-tinymce-inline) .tox-editor-header {
    background-color: var(--color-200) !important;
}

.tox .tox-promotion {
    display: none;
}

.tox .tox-menubar {
    background-color: var(--color-200) !important;
}

.tox .tox-toolbar-overlord {
    background-color: var(--color-200) !important;
}

.tox .tox-toolbar, .tox .tox-toolbar__overflow, .tox .tox-toolbar__primary {
    background-color: var(--color-200) !important;
}

.tox .tox-tbtn--bespoke {
    background-color: var(--color-200) !important;
}

.tox .tox-statusbar {
    background-color: var(--color-200) !important;
}

.tox .tox-sidebar {
    background-color: var(--color-200) !important;
}

.mce-content-body {
    background-color: var(--color-200) !important;
}

.tox-tinymce-aux, .tox .tox-menu {
    z-index: 999999 !important;
}

/* ticket attachments
-------------------------------------------------- */

    .ticket-attachment {
    margin: 1.5rem 1.5rem 0 0;
    border: solid 1px var(--border-color);
}

.ticket-attachment-image {
    text-align: center;
    vertical-align: middle;
    min-height: 100px;
    max-height: 100px;
    min-width: 200px;
    max-width: 200px;
}

.ticket-attachment-footer {
    background-color: var(--color-200);
    padding: 0.75rem !important;
}

/* modals
-------------------------------------------------- */

.modal-xxl {
    --bs-modal-width: 95%;
}

/* iOS-like frosted glass blur effect */
.modal-backdrop {
    backdrop-filter: blur(20px) saturate(180%) brightness(1.2);
    -webkit-backdrop-filter: blur(20px) saturate(180%) brightness(1.2);
    background-color: rgba(255, 255, 255, 0.3); /* Translucent white background */
}

/* Ensure the blur effect is applied when the modal is visible */
.modal.show .modal-backdrop {
    display: block;
    z-index: -1; /* Ensure the backdrop stays behind the modal */
}


/* datatables
-------------------------------------------------- */

.table.dataTable tbody tr > .dtfc-fixed-left, table.dataTable tbody tr > .dtfc-fixed-right,
.table.dataTable thead tr > .dtfc-fixed-left, table.dataTable thead tr > .dtfc-fixed-right, table.dataTable tfoot tr > .dtfc-fixed-left, table.dataTable tfoot tr > .dtfc-fixed-right {
    background-color: var(--body-color) !important;
}

div.dtfc-left-top-blocker, div.dtfc-right-top-blocker {
    background-color: var(--bs-table-bg) !important;
}

div.dataTables_scrollBody {
    border-left: 1px solid var(--bs-table-bg) !important;

    scroll-behavior: smooth;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

    div.dataTables_scrollBody::-webkit-scrollbar {
        width: 4px;
        height: 4px;
    }

    div.dataTables_scrollBody:hover::-webkit-scrollbar-thumb {
        visibility: visible
    }

    div.dataTables_scrollBody:hover::-webkit-scrollbar-track {
        visibility: visible
    }

    div.dataTables_scrollBody::-webkit-scrollbar-track {
        visibility: hidden;
        background: transparent
    }

    div.dataTables_scrollBody::-webkit-scrollbar-thumb {
        visibility: hidden;
        opacity: 0.2;
        background: var(--secondary-color);
        border-radius: 5px
    }

        div.dataTables_scrollBody::-webkit-scrollbar-thumb:hover {
            opacity: 1
        }

.dataTable tbody tr:nth-child(odd) td input[type="checkbox"] {
    background-color: var(--body-color);
}

.dataTable tbody tr:nth-child(odd) td input[type="time"] {
    background-color: var(--body-color);
}

.dataTable tbody tr:nth-child(even):hover td input[type="checkbox"] {
    background-color: var(--body-color);
}

.dataTable tbody tr:nth-child(even):hover td input[type="time"] {
    background-color: var(--body-color);
}


/* staff priority schedule
-------------------------------------------------- */
.event-actions {
    display: none;
    color: white !important;
}

td:hover div.event-actions {
    display: block;
}

/*fixes issue with left borders on 1st instances*/
table.table-bordered.dataTable th:first-child, table.table-bordered.dataTable th:first-child, table.table-bordered.dataTable td:first-child, table.table-bordered.dataTable td:first-child {
    border-left: 1px solid var(--color-400) !important;
}

.table-bordered > :not(caption) > * > * {
    border-width: 1px 1px; /* Ensures borders exist on all sides */
}

table.table-bordered.dataTable th, table.table-bordered.dataTable td {
    border-bottom-width: 0 !important;
}

.table-bordered.dataTable tr:last-child td {
    border-bottom-width: 1px !important;
}

/* buttons
-------------------------------------------------- */

.btn-info, .btn-info:hover, .btn-warning, .btn-warning:hover {
    color: var(--white-color);
}

.btn.btn-outline-warning {
    color: #FFBA33;
    border-color: #FFBA33
}

.btn.btn-outline-warning:hover {
    background-color: #FFBA33;
    color: #fff
}

.btn-danger {
    color: var(--bs-btn-color) !important;
    background-color: var(--bs-btn-bg) !important;
    border-color: var(--bs-btn-border-color) !important;
}

.btn-danger:active {
    color: var(--bs-btn-color) !important;
    background-color: var(--bs-btn-bg) !important;
    border-color: var(--bs-btn-border-color) !important;
}

/* select-2
-------------------------------------------------- */
/* General styles for Select2 */
.select2-selection, .select2-selection--multiple {
    border-color: var(--border-color) !important;
    background-color: var(--color-200) !important;
    border-radius: .375rem !important;
}

.select2-selection__choice {
    border-color: var(--text-color) !important;
    color: var(--text-color) !important;
    font-size: 16px !important;
}

.select2-results__options {
    border-color: var(--border-color) !important;
    background-color: var(--color-200) !important;
    color: var(--text-color) !important;
    font-size: 16px !important;
}

/* scrollbars
-------------------------------------------------- */

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    visibility: visible;
    background: transparent
}

::-webkit-scrollbar-thumb {
    visibility: visible;
    opacity: 0.2;
    background: var(--secondary-color);
    border-radius: 5px
}

::-webkit-scrollbar-thumb:hover {
    opacity: 1
}

/* Nav tabs on staff boards
-------------------------------------------------- */

.nav-tabs {
    position: relative;
    z-index: 3 !important;
}


/* Pagination
-------------------------------------------------- */
.dataTables_wrapper .dataTables_paginate .page-item .page-link {
    color: var(--text-color) !important;
}

.dataTables_wrapper .dataTables_paginate .page-item.active .page-link {
    color: #ffffff !important; 
}

/* Icons
-------------------------------------------------- */
.icofont-edit{
    color: white;
}

.avatar-list .avatar {
    color: white !important;
}

/* Board Settings
-------------------------------------------------- */
.board-group-border{
    border: 1px solid var(--color-300) !important;
}

.text-warning {
    font-weight: bold;
}

/* Bg-color buttons (Staff Schedule)
-------------------------------------------------- */
.btn-check:checked + .btn {
    color: var(--bs-btn-hover-color) !important;
    background-color: var(--bs-btn-hover-bg) !important;
    border-color: var(--bs-btn-hover-border-color) !important;
}

.bg-dark {
    background-color: var(--dark-color) !important;
}

/* DataTables reorder (drag and drop on staffboards list)
-------------------------------------------------- */
.reorder-handle {
    cursor: grab;
    font-size: 18px;
}

.reorder-handle:active {
    cursor: grabbing;
}

table.dt-rowReorder-float {
    position: absolute !important;
    opacity: .9;
    table-layout: fixed;
    outline: 2px solid var(--border-color);
    outline-offset: -2px;
    z-index: 2001;
    background-color: var(--body-color); 
}

tr.dt-rowReorder-moving {
     outline: 2px solid #555;
    outline-offset: -2px;
}

.hidden {
    display: none !important; /*added class for hidden to hide save button*/
}