/*
Template Name: Taubase Brand and CSS
Author: DataLinked
Website: https://datalinked.uk/
Contact: niki@datalinked.uk
File: Css File
*/


/* :root {
    --tb-badge-padding-x: 0.65em;
    --tb-badge-padding-y: 0.35em;
    --tb-badge-font-size: 0.6906rem;
    --tb-badge-font-weight: 500;
    --tb-badge-color: #fff;
    --tb-badge-border-radius: 0.3rem;
    --bs-toast-bg: rgba(var(--bs-body-bg-rgb), 1);
} */

:root {
    /* --tb-light-background: #e5deee; */
    --tb-light-background: #fff;
    --tb-header-bg: #fff;
    --tb-header-item-color: #0f172a;
    --bs-toast-bg: rgba(var(--bs-body-bg-rgb), 1);
    --tb-toast-max-width: 500px !important;
    --fc-event-text-color: #000 !important;
    --taubase-primary: #673AB7;
    --taubase-primary-dark: #5A4596;
    --taubase-orange: #F18945;
    --taubase-danger: #dc3545;  /* Keep Bootstrap's danger color for warnings */
}

/* SweetAlert2 Custom Styles */
.swal2-popup {
    border-radius: var(--bs-border-radius);
}

.swal2-title {
    color: var(--taubase-primary) !important;
}

.swal2-html-container {
    color: var(--bs-gray-700) !important;
}

.swal2-confirm.swal2-styled {
    background-color: var(--taubase-primary) !important;
    border-radius: var(--bs-border-radius);
}

.swal2-confirm.swal2-styled:hover {
    background-color: var(--taubase-primary-dark) !important;
}

/* For disconnect confirmation */
.swal2-popup.swal2-modal.swal2-icon-warning .swal2-confirm {
    background-color: var(--taubase-danger) !important;
}

.swal2-cancel.swal2-styled {
    background-color: var(--bs-gray-500) !important;
    border-radius: var(--bs-border-radius);
}

.swal2-icon.swal2-warning {
    border-color: var(--taubase-orange) !important;
    color: var(--taubase-orange) !important;
}

.swal2-icon.swal2-success {
    border-color: #88C9BA !important;
    color: #88C9BA !important;
}

.swal2-icon.swal2-success [class^=swal2-success-line] {
    background-color: #88C9BA !important;
}

.swal2-icon.swal2-success .swal2-success-ring {
    border-color: #88C9BA80 !important;
}

.bg-gradient {
    background: linear-gradient(to left, #673ab7, #3e1e8c) !important;
}

.blur-effect {
    filter: blur(5px);
}

.required {
    font-weight: bold;
    color: red;
    margin: 0 0.5rem;
}

.wrapper {
    background-color: transparent !important;
}

.card-body {
    background-color: white;
}

.app-search .form-control {
    color: var(--tb-header-item-color);
    border: 1px solid var(--tb-body-color) !important;
}

/*Switch Colour */
.form-switch .form-check-input:checked {
    background-color: green;
}

.header-profile-user-initials {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-weight: bold;
    font-size: 14px;
}

.toastBtn {
    font-size: 0.75rem;
}
.toast-body {
    background-color: rgba(255,255,255,1) !important;
}

/* Popover content */
.popover-body #popoverContent {
    font-size: 0.9rem;
    font-weight: 400;
}

.btn-label.btn-light {
    background-color: rgba(var(--tb-light-rgb), 1);
}
.btn-label.btn-light .label-icon {
    background-color: rgba(var(--tb-light-rgb), 0.5);
}
.vertical-navs-step .nav .nav-link .step-icon {
    font-size: 1.2rem;
}

.vertical-navs-step .nav .nav-link {
    text-align: left;
}

/* Kanban Boards */
.empty-box {
    border: 1px dashed #ccc;
    background-color: #fff;
    min-height: 100px;
    margin-bottom: 10px;
}
.kanban-column .card {
    margin-bottom: 10px;
    cursor: grab;
}
.kanban-column .card-header {
    padding: 10px;
    background-color: transparent;
    padding-left: 1rem;
}
.kanban-column .card-header a {
    color: white !important;
}
.kanban-column .card-body {
    padding: 1rem !important;
}
#kanbanBoardCards .card.kanban-bg-boardA {
    background-color: var(--tb-purple);
}
#kanbanBoardCards .card.kanban-bg-boardB {
    background-color: var(--tb-orange);
}
#kanbanBoardCards .card.kanban-bg-boardC {
    background-color: var(--tb-teal);
}
#kanbanBoardCards .card.kanban-bg-boardD {
    background-color: var(--tb-success);
}

/* register.php */

/* Adds glowing border around address options select */
.glowing-border {
    animation: glow 1.5s infinite alternate;
    box-shadow: 0 0 5px yellow;
}

@keyframes glow {
    to {
        box-shadow: 0 0 15px yellow, 0 0 20px yellow;
    }
}

/* Removes the BS5 spinner on the type="number" input */
/* Chrome, Safari, Edge, Opera */
#phoneNumber::-webkit-outer-spin-button,
#phoneNumber::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* For Firefox */
#phoneNumber {
    appearance: textfield;
    -moz-appearance: textfield;
}

/* Definition Lists */
dl {
    display: grid;
    grid-template-columns: max-content auto; /* Adjust the column sizes as needed */
    gap: 10px 20px; /* Adjust the space between items and rows */
    margin-bottom: 20px; /* Space after the list */
}

dt {
    grid-column: 1; /* Position the term in the first column */
    text-align: right; /* Align the text to the right */
}

dd {
    grid-column: 2; /* Position the description in the second column */
    text-align: left; /* Align the text to the left */
    margin: 0; /* Remove default margin */
}

/* Vertical nav-tabs */
.vertical-navs-step .nav .nav-link.active .step-icon:before, .vertical-navs-step .nav .nav-link.done .step-icon:before {
    content: "\eb80";
}

/* Contacts Page Add Contact Select2 */
.select2-container .select2-results__option .company-item {
    padding: 6px;
}

.select2-container .select2-results__option .company-name {
    font-weight: bold;
}

.select2-container .select2-results__option .company-details {
    font-size: 12px;
    color: #888;
}

.select2-container .select2-results__option .company-postcode,
.select2-container .select2-results__option .company-phone {
    margin-right: 10px;
}

::placeholder {
    text-align: left !important;
}

#logEntries .d-flex.justify-content-between.flex-grow-1 {
    overflow: visible !important;
}

#logEntries .d-flex.justify-content-between.flex-grow-1 .d-flex.align-items-center {
    display: flex !important;
}

#logEntries .d-flex.justify-content-between.flex-grow-1 .d-flex.align-items-center .btn {
    display: inline-block !important;
}

#archiveUserModal .modal-header-center, #deleteUserModal .modal-header-center {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    display: flex;
    align-items: center;
}

.toast {
    filter: none !important;
    backdrop-filter: none !important;
    -moz-backdrop-filter: none !important;
    -o-backdrop-filter: none !important;
    -ms-backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    position: relative;
    z-index: 9999;
}

/* Search */
.searchLink {
    color: rgba(var(--tb-link-color-rgb),var(--tb-link-opacity,1)) !important;
}
.searchLink:hover, .searchLink:focus {
    color: var(--tb-dropdown-link-hover-color) !important;
}

/* Search Page */
#searchResults {
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2;
    -moz-column-gap: 16px;
    -webkit-column-gap: 16px;
    column-gap: 16px;
}

#searchResults .dropdown-header {
    break-inside: avoid-column;
    page-break-inside: avoid;
    -webkit-column-break-inside: avoid;
}

#searchResults .dropdown-header h6 {
    font-size: 0.85rem;
    color: var(--tb-info);
    text-transform: uppercase;
    margin-top: 0;
    margin-bottom: 4px;
}

#searchResults .searchLink {
    display: block;
    font-size: 0.9rem;
    color: var(--tb-primary);
    text-decoration: none;
    margin-bottom: 4px;
    break-inside: avoid-column;
    page-break-inside: avoid;
    -webkit-column-break-inside: avoid;
}

#searchResults .search-category {
    break-inside: avoid-column;
    page-break-inside: avoid;
    -webkit-column-break-inside: avoid;
    margin-bottom: 16px; /* Add space between categories */
}

#contactEntries.card-body > :not(:last-child), #logEntries.card-body > :not(:last-child), #projectEntries.card-body > :not(:last-child) {
    border-bottom: 0.5px solid lightgrey;
}

.accordion-button.collapsed {
    background-color: var(--tb-boxed-body-bg);
    text-transform: uppercase;
}

.accordion-button:not(.collapsed) {
    color: inherit !important;
    text-transform: uppercase;
    font-weight: bold;
}

.address-line {
    display: inline-block;
    vertical-align: top; /* Keeps the text aligned with the icon */
    margin-right: 8px;
}

.additional-address-info div {
    margin-left: 23px;
}

/* Wizard Table */

/* Sidebar list items styling */
.wizard-steps ul {
    list-style-type: none;
    padding-left: 0;
}

.wizard-steps ul li {
    line-height: 1.4; /* Slightly looser line height to prevent overlap within the same item */
    margin-bottom: 1rem; /* Ensure there's consistent spacing between the list items */
    padding-bottom: 0; /* No additional padding */
}

/* Ensure the list item content wraps correctly */
.wizard-steps ul li a {
    display: block;
    white-space: normal; /* Allow text to wrap naturally */
    overflow-wrap: break-word; /* Ensure long words break properly */
    word-break: break-word; /* Break words if they are too long */
}


#personnelTable .btn {
    padding: .3rem .7rem;
    font-size: 1rem;
}

.btnWizard {
    padding: 0;
    font-size: 1.5rem;
}

#personnelTable input[type="checkbox"],
#personnelTable input[type="radio"] {
    margin: 0 auto; 
    display: block;
}



@media (max-width: 1181px) {
    #sidebarMenu {
        display: none; /* Hidden by default on smaller screens */
    }
    #mainContent {
        width: 100%; /* Full width when sidebar is hidden */
    }
    .d-block {
        display: block !important;
    }
    .d-none {
        display: none !important;
    }
}



@media (max-width: 768px) {
    .noMobile {
        display: none;
    }
    #dashboard-add-widget {
      padding: .375rem .75rem;
    }
    [data-layout=horizontal] .menu-dropdown {
        border: none;
    }
    [data-layout=horizontal] .navbar-menu .navbar-nav .nav-sm .nav-link {
        padding-left: 3rem !important;
    }
    .navbar-menu .navbar-nav .nav-link[data-bs-toggle=collapse]:after {
        display: block;
        content: "\ea61";
        font-family: 'tabler-icons';
        margin-left: auto;
        transition: transform .2s;
        font-size: 1.05rem;
        position: relative;
        right: 20px;
        color: var(--tb-vertical-menu-title-color);
    }
    /* Default state: pointing down (rotate back to default right and then 90 degrees down) */
    [data-layout=horizontal] .navbar-menu .navbar-nav > .nav-item > .nav-link[data-bs-toggle=collapse]:after {
        left: 0px;
        transform: rotate(-90deg) !important;
    }

    /* State when expanded: pointing up */
    [data-layout=horizontal] .navbar-menu .navbar-nav > .nav-item > .nav-link[data-bs-toggle=collapse].collapsed:after {
        transform: rotate(90deg) !important;
    }
}

/* Jobs */
.search-box {
    position: relative;
}
.search-icon {
    cursor: pointer;
    font-size: 1.2rem;
}


/* Calendar */
.fc .fc-list-event-dot {
    margin-right: 10px;
}

.choices__list--dropdown {
    z-index: 1050 !important; /* Ensures it appears above the modal */
    left: auto !important; /* Aligns properly inside the modal */
    right: 0 !important; /* Prevents it from being cut off */
    min-width: 100%; /* Ensures the dropdown is as wide as the select */
}
.choices__list--single .choices__item {
    width: 100%;
    margin-left: 20px;
}

.flatpickr-time input {
    font-size: 16px; /* Make the time input text readable */
}

.flatpickr-time .numInputWrapper span.arrowUp::before {
    content: "▲"; /* Ensure up arrow appears */
}

.flatpickr-time .numInputWrapper span.arrowDown::before {
    content: "▼"; /* Ensure down arrow appears */
}


@media (min-width: 640px) {
    .choices__list--dropdown .choices__item--selectable[data-select-text], .choices__list[aria-expanded] .choices__item--selectable[data-select-text] {
        padding-right: 100px;
        margin-left: 30px;
    }
}

/* Print/No Print */
/* Styles that apply when viewing on screen */
/* .noprint-div { display: block; } */
.print-div { display: none; }

/* Styles that apply only when printing */
@media print {
    .no-print-div { display: none; }
    .print-div { display: block; }

    html, body {
        background-color: #fff !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .footer-print {
        text-align: center;
        font-size: 10px;
        height: 20px;
        position: relative;
        margin-top: 30px;
        bottom: 5px !important;
    }

    .quote-text {
        font-size: 0.8rem;
    }
    .card, .card-body {
        border: none;
        box-shadow: none;
    }
    header {
        display: none;
    }
    .page-content {
        margin-top: 0 !important;
        padding: 0 !important;
    }
    @page {
        margin-left: 10mm;
        margin-right: 10mm;
    }
    .container-fluid {
        background-color: #fff !important;
    }
}