/* fixes a problem where opening a submenu changes all carets.  So we make it the same regardless of state */

.arrow_carrot-down:before {
    content: "\35" !important;
}

.length-label {
    font-weight: normal;
}

.length-select {
    width: 80px !important;
}


@media (min-width: 992px) {
    .modal-massive {
        max-width: 98% !important;
        width: 98% !important;
    }
}

.yellow-star {
    color: #d4af37;
    font-size: 24px;
}

/* Data tables */
.dt-left {
    text-align: left;
}

.dt-center {
    text-align: center;
}

.dt-right {
    text-align: right;
}

.dataTables_scrollBody table tbody tr.selected {
    background-color: #99acbd;
}

.dataTables_scrollBody table tbody tr.selected:hover {
    background-color: #b0c0cf;
}

.table thead>tr>th {
    background: #f4f7fb !important;
    color: #4a6fa5;
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    border-bottom: 2px solid #d0e0f0 !important;
    border-top: none !important;
    padding: 8px 14px;
    white-space: normal;
    overflow-wrap: break-word;
    hyphens: auto;
    line-height: 1.3;
    vertical-align: bottom;
}
.light-yellow {
    background-color: #FFFF99 !important;
}

.__igdev {
    display: inline-block;
    background-color: #ffff99 !important;
    color: Black
}

table.dataTable tbody tr.selected,
table.dataTable tbody th.selected,
table.dataTable tbody td.selected {
    background-color: red !important;
    color: inherit !important;
    vertical-align: top;
}

.table-striped>tbody>tr.selected:nth-child(odd)>td,
.table-striped>tbody>tr.selected:nth-child(odd)>th,
.table-striped>tbody>tr.selected:nth-child(even)>td,
.table-striped>tbody>tr.selected:nth-child(even)>th {
    background-color: #9ab0be !important;
    color: inherit !important;
    vertical-align: top;
}


/* ── Row stripes: subtle blue tint instead of pure grey ── */
.table-striped>tbody>tr:nth-child(odd)>td,
.table-striped>tbody>tr:nth-child(odd)>th {
    background-color: #ffffff;
    border-bottom: 0.5px solid #f2f2f4;
    vertical-align: middle;
}


.table-striped>tbody>tr:nth-child(even)>td,
.table-striped>tbody>tr:nth-child(even)>th {
    background-color: #f8f8fa;
    border-bottom: 0.5px solid #f2f2f4;
    vertical-align: middle;
}

/* ── Hover: clear blue wash ── */
.table-striped>tbody>tr:hover>td,
.table-striped>tbody>tr:hover>th {
    background-color: #f0f0f8 !important;
    transition: background 0.2s ease;
}

/* ── Selected: stronger blue + left accent bar ── */
.table-striped>tbody>tr.selected>td,
.table-striped>tbody>tr.selected>th {
    background-color: #eeeeff !important;
    color: inherit !important;
    vertical-align: middle;
}

.table-striped>tbody>tr.selected>td:first-child {
    border-left: 2px solid #6366f1;
}

/* ── First/last cell padding ── */
.table td:first-child,
.table th:first-child {
    padding-left: 16px;
}

.table td:last-child,
.table th:last-child {
    padding-right: 16px;
}

.dataTables_length {
    display: inline !important;
}

.dt-buttons {
    display: inline !important;
}

.dataTables_info {
    display: inline !important;
}

.dataTables_paginate {
    float: right;
    width: 50%;
}

.dataTables_length,
.dataTables_filter {
    padding: 0px !important;
}

.dataTables_filter {
    display: inline-flex !important;
    align-items: center;
    flex: 1;
    /* stretch within the toolbar row */
}

.dataTables_filter label {
    display: flex;
    align-items: center;
    width: 100%;
    /* label must also stretch */
    font-size: 0;
}

.dataTables_filter input.search-input {
    height: 30px !important;
    width: 160px;
    /* default compact size */
    max-width: 350px !important;
    padding: 0 30px 0 32px !important;
    font-size: 12px !important;
    color: #3d5464;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238fa3b1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 9px center;
    border: 1px solid #c8d0d8 !important;
    border-radius: 6px !important;
    outline: none;
    transition: width .15s ease, border-color .15s, box-shadow .15s;
}

.dataTables_filter input.search-input:focus {
    border-color: #2e6da4 !important;
    box-shadow: 0 0 0 3px rgba(46, 109, 164, .12) !important;
}

.dataTables_filter input.search-input::placeholder {
    color: #aab8c2;
    font-size: 12px;
}

/* .btn {
    min-height: 34px !important;
    min-width: 34px !important;
    margin-right: 1px !important;
}

.btn:hover {
    background-color: #cdcdcd !important;
}

.btn-toolbar {
    background-color: #fafafa;
    border: 1px solid #cccccc;
    border-radius: 4px 4px 4px 4px !important;
    margin-left: 2px;
    padding: 6px
}

.btn-toolbar-slim {
    padding: 0px
}

.btn-spacer {
    all: unset;
    display: inline-block;
    width: 15px;
    pointer-events: none;
} */




.panel-body .btn-toolbar {
    background-color: #fefefe;
    border: 0px;
}

.document-manager {
    font-size: 15pt;
    color: #777777;
}

.modal-lg {
    max-width: 90% !important;
    width: 60% !important;
}

.modal-lg90 {
    max-width: 90% !important;
    width: 90% !important;
}

.modal-lg80 {
    max-width: 90% !important;
    width: 80% !important;
}

.modal-lg70 {
    max-width: 90% !important;
    width: 70% !important;
}

.modal-med60 {
    max-width: 60% !important;
    width: 60% !important;
}

.modal-med50 {
    max-width: 60% !important;
    width: 50% !important;
}

.modal-med40 {
    max-width: 60% !important;
    width: 40% !important;
}

.modal-med30 {
    max-width: 60% !important;
    width: 30% !important;
}


.modal-dialog {
    position: static;
    background-size: cover;

}

.modal-header {
    padding: 6px 14px;
    min-height: unset;
}

.modal-header .modal-title {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    line-height: 1.4;
}

.modal-header .close {
    color: #8fa3b1;
    opacity: 0.8;
    font-size: 18px;
    padding: 4px 8px;
    margin: -4px -8px -4px auto;
}

.modal-header .close {
    padding: 1rem;
    margin: -1rem -1rem -1rem auto;
}

.fixed-dialog-body {
    height: calc(90vh - 160px) !important;
    max-height: calc(90vh - 160px) !important;
    overflow-y: auto;
}

.fixed-dialog-footer {
    /*position: absolute;*/
    bottom: 0px;
    right: 0px;
    width: 100%;
}

html,
body {
    height: 98%;
    background-color: #f0f4f8;
}

.page-layout {
    height: calc(100vh - 100px);
    /* adjust 100px for your header/footer height */
}

.tab-pane {
    height: 100%;
}

.h4-titlebar {
    margin-bottom: 0px;
    padding: 0px;

}

ul.nav.nav-tabs {}

ul.nav.nav-tabs li {
    border-bottom: 1px solid #eeeeee;
    border-radius: 10px 10px 0px 0px !important;
    padding-right: 2px;
}

ul.nav.nav-tabs li.active {
    color: #eeeeee;
    background-color: transparent !important;
}

ul.nav.nav-tabs li.active a {
    color: #eeeeee;
    background-color: #2e3b46 !important;
}

ul.nav.nav-tabs a {
    color: #eeeeee;
    background-color: #718aa4 !important;
}

ul.nav.nav-tabs a:hover {
    color: #eeeeee;
    background-color: #394a59 !important;
}

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

.panel-heading {
    padding: 6px 2px;
}

.panel-body {
    background-color: #ffffff;
    border: 1px solid #e4e4e8;
    border-radius: 8px;
    width: 100%;
}

.dataTables_wrapper {
    /* background: linear-gradient(160deg,
        rgba(240, 247, 255, 0.95) 0%,
        rgba(255, 255, 255, 0.88) 40%,
        rgba(245, 250, 255, 0.92) 100%); */
    border-radius: 12px;
    border: 1px solid rgba(74, 143, 212, 0.22);
    border-top: 2px solid rgba(74, 143, 212, 0.55);
    box-shadow: 0 0 0 1px rgba(74, 143, 212, 0.08), 0 2px 8px rgba(74, 143, 212, 0.10);
    backdrop-filter: blur(12px) saturate(1.3);
    -webkit-backdrop-filter: blur(12px) saturate(1.3);
    overflow: hidden;
    padding: 16px 18px 12px 18px;
}

/* ── Hide empty DataTables scrollHead spacer row ── */
.dataTables_scrollHead table thead tr td:empty,
.dataTables_scrollHead table thead tr th:empty {
    display: none !important;
    height: 0 !important;
    padding: 0 !important;
    border: none !important;
}

.open-panel-body {
    background-color: #ffffff;
    width: 100%;
}

.form-horizontal .form-group {
    margin-bottom: 0px;
    padding-bottom: 6px;
}

.notificationBar {
    display: inline;
}

.pointer {
    cursor: pointer;
}

.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
    cursor: default !important;
    background-color: #e3e3e3 !important;
    border: 0px;
}

div.dataTables_wrapper div.dataTables_processing {
    background-color: rgb(80, 80, 80);
    color: #eeeeee;
}

hr.divider {
    width: 100%;
    border-top: 1px solid #ced4da !important;
    border-bottom: 0px;
}

.info-success {
    color: #4cd964;
}

.info-danger {
    color: #ff2d55;
}

.lite-fade {
    text-transform: none !important;
    opacity: 0.4 !important;
    font-size: 12px;
}

.jqtree_common {
    padding-inline-start: 2px !important;
}

ul.jqtree-tree .jqtree-title {
    margin-left: 0px;
}

.jqtree-icon {
    color: #717176;
    margin-left: 6px;
}

.jqtree-title-icon {
    color: #717176;
    margin-left: 6px;
    margin-right: 2px;
    width: 20px;
    overflow: hidden;
}

.badge {
    margin-left: 4px !important;
}

.badge-right {
    position: absolute;
    right: 6px;
    top: 3px;
    font-size: 75%;
}

.badge-empty {
    height: 10px !important;
    width: 10px !important;
    min-height: 10px !important;
    min-width: 10px !important;

    margin-left: 4px !important;
}

.badge-right {
    float: right !important;
    position: absolute;
    right: 10px;
}

/* *************************************************************************************** */
/* Toast                                                                                   */
/* *************************************************************************************** */

.toast {
    position: fixed;
    top: 70px;
    right: 26px;

    font-size: 9pt;

    min-height: 80px;
    min-width: 250px;

    background-color: #fefefe;
    border: 1px solid #ddd;
    border-radius: 4px;

    -moz-box-shadow: 4px 4px 10px 1px #cccccc;
    -webkit-box-shadow: 4px 4px 10px 1px #cccccc;
    box-shadow: 4px 4px 10px 1px #cccccc;
}

.toast-header {
    padding: 0px 14px 0px 14px;
    font-weight: bold;
    color: #6c757d;
    border-bottom: 1px solid #e9ecef;
}

.toast-header .close {
    padding: 1rem;
    margin: -1rem -1rem -1rem auto;
}

.toast-title {
    margin-bottom: 0;
    line-height: 2.5;
}

.toast-body {
    color: #6c757d;
    padding: 14px;
}


/* *************************************************************************************** */
/* Calendar                                                                                   */
/* *************************************************************************************** */

div.publicHolidayBackground {
    position: relative;
    width: 100%;
    height: 100%;
}

div.publicHolidayBackground:before {
    position: absolute;
    font-family: 'Font Awesome 5 Free';
    font-size: 26px;
    font-weight: 100;
    color: rgb(104, 138, 126, 0.4);
    bottom: 44px;
    left: 24px;
    content: "\f133";
}



.fixed-height-panel-245 {
    height: 245px !important;
    overflow-y: auto;
    /* Optional: Add scroll if content overflows */
}


/* Put this in your stylesheet or inside a <style> tag */
.large-icon {
    font-size: 1.6rem;
    line-height: 1;
}

.med-icon {
    font-size: 1.3rem;
    line-height: 1;
}

.icon-red {
    color: red;
}

.icon-green {
    color: green;
}


/******************************************************************************/
/*  Johannes uses this in Bank Transaction to display shortened text 	      */
/******************************************************************************/
/* table.dataTable {
    table-layout: fixed;
    width: 100% !important;
} */

.dt-nowrap {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.dt-cell {
    display: inline-block;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/******************************************************************************/
/*  Johannes uses this to make sure tables don't have a horizontal scrollbar  */
/******************************************************************************/
.dataTables_scrollBody {
    overflow-x: hidden !important;
    overflow-y: auto !important;
}



#map {
    position: relative;
    display: block;
    width: 100%;
    height: 500px;
    /* or whatever you prefer */
    overflow: hidden;
    /* prevent tile spill */
    z-index: 1;
    /* keep it beneath floating elements if needed */
}

.gray-row,
.gray-row td,
.gray-row td * {
    color: #777 !important;
}

.estimator-name {
    color: darkblue;
}

.gray-row .estimator-name {
    color: #ccc !important;
}

.selected-footer {
    background-color: #f0f8ff !important;
    /* Light blue */
    font-weight: bold;
}



#sectionDetailsWrapper {
    overflow-x: auto;
    max-width: 100%;
}



#sectionDetailsByTendererTable {
    width: max-content !important;
    table-layout: fixed !important;
}

table#sectionDetailsByTendererTable {
    width: max-content !important;
    display: block;
    /* Optional: forces table to respect width */
}

#sectionDetailsByTendererTable td,
#sectionDetailsByTendererTable th {
    white-space: nowrap;
}



#theSoqDetailsByTendererTable {
    width: max-content !important;
    table-layout: fixed !important;
}

table#theSoqDetailsByTendererTable {
    width: max-content !important;
    display: block;
    /* Optional: forces table to respect width */
}

#theSoqDetailsByTendererTable td,
#theSoqDetailsByTendererTable th {
    white-space: nowrap;
}





#soqItemEvaluationTable td,
#soqItemEvaluationTable th {
    white-space: nowrap;
}

#soqItemEvalPanel {
    overflow-x: auto;
    max-width: 100%;
}


#soqItemEvaluationTable.dataTable {
    table-layout: auto !important;
    width: auto !important;
    min-width: max-content;
    /* forces growth beyond parent */
}



/* Applies to every cell in the row */
.highlight-border td {
    border-top: 4px solid #000 !important;
    border-bottom: 4px solid #000 !important;
}


/* *************************************************************************************** */
/*  Ingrid het hierdie bygesit vir d3                                                      */
/* *************************************************************************************** */

path {
    fill: none;
    stroke: black;
}

.node circle {
    fill: #999;
}

.node text {
    font: 10px sans-serif;
}

.node--internal circle {
    fill: #555;
}

.node--internal text {
    text-shadow: 0 1px 0 #fff, 0 -1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff;
}

.link {
    fill: black;
    stroke: black;
    stroke-opacity: 0.4;
    stroke-width: 1.5px;
}

.disabled {
    pointer-events: none;
}

.input-group-append {
    display: table-cell !important;
}

.input-group-text {
    border-top-right-radius: 4px !important;
    border-bottom-right-radius: 4px !important;
    border-left-width: 0px !important;
}

.thin-row {
    padding-top: 0px;
    padding-bottom: 0px;
}

.menuLink {
    height: 100%;
}

.menuSpan {
    height: 100%;
    vertical-align: top;
}

.menuIcon {
    padding-top: 3px;
}

.disable-panel {
    pointer-events: none;
    opacity: 0.6;
    /* Optional: to give a disabled look */
}

/* Ingrid added this - mandatory label  */
.form-label-mandatory {
    color: rgb(71, 71, 71) !important;
    font-weight: 700 !important;
}

/* Ingrid added this: mandatory text field */
.form-control-mandatory {
    display: block;
    width: 100%;
    height: calc(1.5em + 0.75rem + 2px);
    padding: 0.375rem 0.75rem;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    color: inherit;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgb(71, 71, 71) !important;
    border-radius: 0.25rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-control-mandatory:disabled,
.form-control-mandatory[readonly] {
    background-color: #e9ecef;
    opacity: 1;
}

.help-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 38px;
    /* Match input height for perfect alignment */
    margin-left: 8px;
    color: #6c757d;
    cursor: help;
    font-size: 20px;
    transition: color 0.2s ease;
    vertical-align: top;
    /* Align with input */
}

.help-icon:hover {
    color: #007bff;
}

.help-icon i {
    pointer-events: none;
}

.help-icon::after {
    content: attr(tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background-color: #333;
    color: #ffffff;
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 13px;
    line-height: 1.4;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 10000;
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    max-width: 300px;
    white-space: normal;
    width: max-content;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.help-icon::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    /* border-top-color: #333; */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 10000;
    pointer-events: none;
}

.help-icon:hover {
    color: #007bff;
}


.help-icon:hover::after,
.help-icon:hover::before {
    opacity: 1;
    visibility: visible;
}

.readonly-checkbox {
    pointer-events: none;
}


.disabled-table {
    /* Ingrid added this: For all the ellipsis table: Disable the table until reload has finished*/
    pointer-events: none;
    opacity: 0.5;
    /* Optional: adds a greyed-out visual effect */
    cursor: not-allowed;
    /* Optional: changes the cursor to indicate no interaction */
}

.readonly-checkbox {
    pointer-events: none;
}


/* ================================================= */
/* ==================SideScroll / Panning=========== */
/* ================================================= */

/* Cayden added this for nav side scrolling */
.panel-heading.tab-bg-info .nav-tabs {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
}

.panel-heading.tab-bg-info .nav-tabs>li {
    flex-shrink: 0;
}

.panel-heading.tab-bg-info .nav-tabs::-webkit-scrollbar {
    height: 3px;
}

.panel-heading.tab-bg-info .nav-tabs::-webkit-scrollbar-thumb {
    background: #b0bec5;
    border-radius: 3px;
}

/* Tab content — scrollable container */
.tab-content {
    overflow: auto;

}

.tab-content.is-grabbing {
    cursor: grabbing;
    user-select: none;
}

/* .tab-content > .tab-pane {
    min-width: unset;
} */


.pannable {
    overflow: auto;

    min-width: 1000px;
}

.pannable.is-grabbing {
    cursor: grabbing;
    user-select: none;
}


.panel-body>.row {
    display: flex;
    flex-wrap: nowrap;
}

.panel-body>.row>[class*="col-"] .pannable>[class*="col-"] {
    min-width: 1200px;
    flex-shrink: 0;
}

/* ================================================= */
/* ============ SideScroll / Panning Dialog ========= */
/* ================================================= */

/* Cayden added this for panning/ side scroll in a dialog */
.modal-lg90 {
    width: 90%;
    max-width: 90%;
}

.modal-lg90 .modal-content {
    overflow-x: auto;
}

.modal-lg90 .modal-body {
    max-height: 80vh;
}

/* All modal bodies — pannable with scroll */
.modal-body {
    overflow: auto;

    overscroll-behavior: contain;
}

.modal-body.is-grabbing {
    cursor: grabbing;
    user-select: none;
}

/* Inner content keeps natural width */
.modal-body>section,
.modal-body>form,
.modal-body>section>form,
.modal-body>div {
    min-width: unset;
}

.pannable>.row>.col-md-4 {
    min-width: 600px;
}

.pannable>.row>.col-md-5 {
    min-width: 600px;
}

.pannable>.row>.col-md-6 {
    min-width: 800px;
}

.pannable>.row>.col-md-7 {
    min-width: 1000px;
}

.pannable>.row>.col-md-8 {
    min-width: 1200px;
}

.pannable>.row>.col-md-9 {
    min-width: 1400px;
}

.pannable>.row>.col-md-10 {
    min-width: 1600px;
}


/* ================================================= */
/* ================================================= */
/* ============ SideScroll / Panning Dialog ========= */
/* ================================================= */
/* ================================================= */
/* ============ Column Min-Width Utilities ========== */
/* ================================================= */
.col-min-sm {
    min-width: 200px;
    flex-shrink: 0;
}

.col-min-smd {
    min-width: 250px;
    flex-shrink: 0;
}

.col-min-smed {
    min-width: 300px;
    flex-shrink: 0;
}

.col-min-md {
    min-width: 350px;
    flex-shrink: 0;
}

.col-min-lg {
    min-width: 500px;
    flex-shrink: 0;
}

.col-min-xl {
    min-width: 700px;
    flex-shrink: 0;
}

.col-min-xxl {
    min-width: 900px;
    flex-shrink: 0;
}

.col-min-xxxl {
    min-width: 1400px;
    flex-shrink: 0;
}

.col-min-xxxxl {
    min-width: 1800px;
    flex-shrink: 0;
}

.col-min-5xl {
    min-width: 2400px;
    flex-shrink: 0;
}

.col-min-6xl {
    min-width: 4000px;
    flex-shrink: 0;
}

/* ================================================= */
/* ============ Form Row Layout ==================== */
/* ================================================= */


/* ================================================= */
/* ============ Stacked Form Labels ================ */
/* ================================================= */
form .col-form-label,
fieldset .col-form-label,
.form-horizontal .col-form-label {
    font-size: 11px;
    font-weight: 400;
    color: #474b4e;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
    display: block;
}

.form-label-mandatory::after {
    content: " *";
    color: #e74c3c;
}

label.col-form-label.h4 {
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    color: #5a6c7c;
    letter-spacing: 0;
}



/* checkBox styling */
/* ================================================= */
/* ============ Toggle Switch Checkboxes =========== */
/* ================================================= */

.ignite-toggle {
    position: relative;
    display: inline-block;
    width: 38px;
    height: 22px;
    flex-shrink: 0;
    margin-bottom: 0;
    cursor: pointer;
    align-self: center;
}

.ignite-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.ignite-toggle__slider {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    border-radius: 22px;
    transition: background-color 0.25s ease;
}

.ignite-toggle__slider::before {
    content: "";
    position: absolute;
    height: 16px;
    width: 16px;
    left: 3px;
    bottom: 3px;
    background-color: #ffffff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    transition: transform 0.25s ease;
}

.ignite-toggle input:checked+.ignite-toggle__slider {
    background-color: #2196F3;
}

.ignite-toggle input:checked+.ignite-toggle__slider::before {
    transform: translateX(16px);
}

.ignite-toggle input:focus-visible+.ignite-toggle__slider {
    outline: 2px solid #2196F3;
    outline-offset: 2px;
}

.ignite-toggle input:disabled+.ignite-toggle__slider {
    background-color: #e9ecef;
    cursor: not-allowed;
    opacity: 0.65;
}

.ignite-toggle input:disabled+.ignite-toggle__slider::before {
    background-color: #f8f9fa;
}

/* Checked + disabled: keep blue so the state is still visible */
.ignite-toggle input:checked:disabled+.ignite-toggle__slider {
    background-color: #2196F3;
    opacity: 0.55;
}

.ignite-toggle input:checked:disabled+.ignite-toggle__slider::before {
    background-color: #ffffff;
}

/* ================================================= */
/* ================ Scrollable Table =============== */
/* ================================================= */

.table-scrollable table.dataTable thead>tr>th {
    white-space: nowrap;
    overflow-wrap: unset;
    hyphens: unset;
}

.table-scrollable table.dataTable {
    table-layout: auto !important;
    width: max-content !important;
    min-width: 100%;
}

.table-scrollable .dataTables_scrollBody {
    overflow-x: auto !important;
    overflow-y: auto !important;
}

.table-scrollable .dataTables_wrapper {
    overflow-x: auto;
    width: 100%;
}

/* ================ Scrollable Table =============== */
/* ================================================= */
/* ================================================= */

.badge-status {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

.badge-status-blue {
    background-color: var(--ig-status-default);
    color: var(--ig-status-default-text);
}

.badge-status-red {
    background-color: var(--ig-status-overdue);
    color: var(--ig-status-overdue-text);
}

.badge-status-orange {
    background-color: var(--ig-status-at-risk);
    color: var(--ig-status-at-risk-text);
}

.badge-status-grey {
    background-color: var(--ig-status-not-started);
    color: var(--ig-status-not-started-text);
}

.badge-status-default {
    background-color: var(--ig-status-default);
    color: var(--ig-status-default-text);
}

.badge-status-green {
    background-color: var(--ig-status-on-track);
    color: var(--ig-status-on-track-text);
}

.badge-status-green-dark {
    background-color: var(--ig-status-completed);
    color: var(--ig-status-completed-text);
}

.badge-status-unassigned {
    background-color: var(--ig-status-not-started);
    color: var(--ig-status-not-started-text);
    opacity: 0.8;
}

.badge-status-lg {
    padding: 5px 16px;
    margin-top: 6px;
    display: inline-block;
    vertical-align: middle;
}

/* side bar toggle */
/* ═══════════════════════════════════════════════════════ */
/* ============ Sidebar Collapse (icon-only) =========== */
/* ═══════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════ */
/* ============ Sidebar Collapse (icon-only) =========== */
/* ═══════════════════════════════════════════════════════ */

#sidebar,
aside {
    transition: width 0.2s ease;
    overflow: hidden;
}

.sidebar-collapsed aside,
.sidebar-collapsed #sidebar {
    width: 50px !important;
    min-width: 50px !important;
    max-width: 50px !important;
    position: fixed !important;
    top: 0;
    bottom: 0;
    z-index: 100;
    overflow-y: auto;
}

.sidebar-collapsed #sidebar li a {
    font-size: 0 !important;
    padding: 12px 0 !important;
    text-align: center;
    white-space: nowrap;
}

.sidebar-collapsed #sidebar li a i,
.sidebar-collapsed #sidebar li a .fa,
.sidebar-collapsed #sidebar li a [class*="icon"],
.sidebar-collapsed #sidebar li a [class*="fa-"] {
    font-size: 16px !important;
    margin: 0 !important;
    display: inline-block;
    width: 100%;
}

.sidebar-collapsed #sidebar li a .menu-arrow,
.sidebar-collapsed #sidebar .sub-menu,
.sidebar-collapsed #sidebar .sidebar-menu>li>ul {
    display: none !important;
}

/* .sidebar-collapsed #johannes-main-content,
.sidebar-collapsed section#johannes-main-content,
.sidebar-collapsed #main-content,
.sidebar-collapsed section#main-content {
    margin-left: 50px !important;
    padding-left: 0 !important;
} */

.sidebar-collapsed #johannes-main-content,
.sidebar-collapsed section#johannes-main-content,
.sidebar-collapsed #main-content,
.sidebar-collapsed section#main-content {
    margin-left: 50px !important;
    padding-left: 10px !important;
}

.sidebar-collapsed #johannes-main-content>.wrapper,
.sidebar-collapsed #johannes-main-content>section.wrapper,
.sidebar-collapsed #main-content>.wrapper,
.sidebar-collapsed #main-content>section.wrapper {
    margin-left: 0 !important;
    padding-left: 0 !important;
}

.nav-item.dropdown.open .dropdown-menu,
.nav-item.dropdown .dropdown-menu {
    z-index: 1050 !important;
}

/* Dropdown inside scrollable tabs — escape overflow clipping */
.panel-heading.tab-bg-info .nav-tabs>li.dropdown {
    position: static;
}

.panel-heading.tab-bg-info .nav-tabs .dropdown-menu {
    z-index: 1050 !important;
}

body:not(.dark-mode) .modal-footer,
body:not(.dark-mode) .fixed-dialog-footer {
    border-top: 1px solid #dee2e6 !important;
}

/* ================================================= */
/* ============ File Upload Drop Zone ============== */
/* ================================================= */


#fileDropZone {
    border: 2px dashed #4a90d9;
    border-radius: 10px;
    padding: 2.5rem 1rem;
    text-align: center;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    background: #eaf3fb;
    margin-bottom: 0.25rem;
}

#fileDropZone:hover {
    background: #d6eaf8;
    border-color: #1a6fbf;
}

/* Active drag-over state */
#fileDropZone.drag-over {
    background: #d6eaf8;
    border-color: #1a6fbf;
}

/* File chosen state — green accent */
#fileDropZone.file-chosen {
    border-color: #198754;
    border-style: solid;
}

#fileDropZonePrompt p {
    margin: 0;
    font-size: 0.9rem;
    color: #333;
}

#fileDropZonePrompt svg {
    display: block;
    margin: 0 auto 0.75rem;
}

#fileDropZonePrompt span {
    color: #4a90d9;
    text-decoration: underline;
    cursor: pointer;
}

#fileDropZoneChosen {
    display: none;
    align-items: center;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

#fileDropZoneChosen .file-icon {
    font-size: 1.4rem;
    color: #198754;
    flex-shrink: 0;
}

#fileDropZoneFileName {
    font-weight: 500;
    color: #198754;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 260px;
    font-size: 0.9rem;
}

#fileDropZoneClearBtn {
    background: none;
    border: none;
    cursor: pointer;
    color: #198754;
    font-size: 1.3rem;
    line-height: 1;
    padding: 0 2px;
    flex-shrink: 0;
}

.file-drop-size-limit {
    text-align: right;
    font-size: 0.95rem;
    color: #6c757d;
    margin-top: 4px;
    margin-bottom: 0.25rem;
}

/* ================================================= */
/* ============ File Upload Drop Zone ============== */
/* ================================================= */

/* ===================Buttons Array glass================== */
.btn-glass,
.dt-button.btn-glass,
.dt-button.btn.btn-glass,
.ui-button.btn-glass {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    min-width: 34px !important;
    border-radius: 50% !important;
    border: 1px solid rgba(100, 140, 170, 0.30) !important;
    background: linear-gradient(160deg,
            rgba(220, 232, 242, 0.90) 0%,
            rgba(195, 215, 232, 0.75) 50%,
            rgba(175, 200, 222, 0.65) 100%) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.80),
        inset 0 -1px 1px rgba(0, 0, 0, 0.06) !important;
    color: #3a5468 !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    padding: 0 !important;
    margin-right: 3px !important;
    cursor: pointer !important;
    transition:
        background 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        border-color 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        filter 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        color 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) !important;
}

.btn-glass:hover,
.dt-button.btn-glass:hover,
.dt-button.btn.btn-glass:hover,
.ui-button.btn-glass:hover {
    background: linear-gradient(160deg,
            rgba(235, 245, 255, 0.98) 0%,
            rgba(210, 228, 245, 0.92) 50%,
            rgba(190, 215, 238, 0.85) 100%) !important;
    border-color: rgba(80, 130, 170, 0.50) !important;
    filter: brightness(1.12) saturate(1.15) !important;
    box-shadow:
        inset 0 1px 2px rgba(255, 255, 255, 0.95),
        inset 0 -1px 2px rgba(0, 0, 0, 0.08),
        inset 0 0 12px rgba(255, 255, 255, 0.40) !important;
    color: #2a4a62 !important;
    transform: none !important;
}

.btn-glass:active,
.dt-button.btn-glass:active,
.dt-button.btn.btn-glass:active,
.ui-button.btn-glass:active {
    transform: translateY(0px) scale(0.96) !important;
    background: linear-gradient(160deg,
            rgba(195, 215, 232, 0.95) 0%,
            rgba(175, 200, 222, 0.88) 100%) !important;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.10),
        inset 0 2px 4px rgba(0, 0, 0, 0.10),
        inset 0 1px 1px rgba(255, 255, 255, 0.50) !important;
}

.dt-button.btn-glass.ui-state-disabled,
.btn-glass:disabled {
    opacity: 0.38 !important;
    cursor: not-allowed !important;
    transform: none !important;
    pointer-events: none !important;
}

/* ── Dark mode ── */
body.dark-mode .btn-glass,
body.dark-mode .dt-button.btn-glass,
body.dark-mode .dt-button.btn.btn-glass,
body.dark-mode .ui-button.btn-glass {
    background: linear-gradient(160deg,
            rgba(255, 255, 255, 0.14) 0%,
            rgba(255, 255, 255, 0.07) 50%,
            rgba(255, 255, 255, 0.04) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.30),
        0 2px 8px rgba(0, 0, 0, 0.20),
        inset 0 1px 1px rgba(255, 255, 255, 0.18),
        inset 0 -1px 1px rgba(0, 0, 0, 0.20) !important;
    color: #c8d8e8 !important;
    text-shadow: none !important;
}

body.dark-mode .btn-glass:hover,
body.dark-mode .dt-button.btn-glass:hover,
body.dark-mode .dt-button.btn.btn-glass:hover,
body.dark-mode .ui-button.btn-glass:hover {
    background: linear-gradient(160deg,
            rgba(255, 255, 255, 0.22) 0%,
            rgba(255, 255, 255, 0.12) 50%,
            rgba(255, 255, 255, 0.07) 100%) !important;
    border-color: rgba(255, 255, 255, 0.28) !important;
    box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.35),
        0 4px 16px rgba(0, 0, 0, 0.20),
        inset 0 1px 1px rgba(255, 255, 255, 0.25),
        inset 0 -1px 1px rgba(0, 0, 0, 0.20) !important;
    color: #ffffff !important;
}

body.dark-mode .btn-glass:active,
body.dark-mode .dt-button.btn-glass:active {
    background: linear-gradient(160deg,
            rgba(255, 255, 255, 0.08) 0%,
            rgba(255, 255, 255, 0.04) 100%) !important;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.30),
        inset 0 2px 4px rgba(0, 0, 0, 0.25) !important;
}
/* ===================Buttons Array glass Toolbar================== */

/* ===================glass All buttons================== */
/* ═══════════════════════════════════════════════════
   Global Button Override — Liquid Glass
   All .btn variants get the glass treatment automatically
   ═══════════════════════════════════════════════════ */

.btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    height: 34px !important;
    min-height: 34px !important;
    min-width: 34px !important;
    padding: 0 14px !important;
    border-radius: 20px !important;
    border: 1px solid rgba(100, 140, 170, 0.30) !important;
    background: linear-gradient(160deg,
        rgba(230, 240, 252, 0.92) 0%,
        rgba(210, 225, 244, 0.80) 50%,
        rgba(190, 212, 238, 0.70) 100%) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    box-shadow:
        inset 0 1.5px 2px rgba(255, 255, 255, 0.85),
        inset 0 -1px 1px rgba(0, 0, 0, 0.06),
        0 1px 3px rgba(80, 120, 180, 0.10) !important;
    color: #2e4a6a !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    letter-spacing: 0.2px !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) !important;
    cursor: pointer !important;
    position: relative !important;
    overflow: hidden !important;
    transition:
        background 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease,
        filter 0.25s ease,
        transform 0.12s ease !important;
    white-space: nowrap !important;
    margin-right: 1px !important;
}

/* Top-half gloss sheen */
.btn::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 50%;
    background: linear-gradient(180deg,
        rgba(255, 255, 255, 0.45) 0%,
        rgba(255, 255, 255, 0) 100%);
    border-radius: 20px 20px 0 0;
    pointer-events: none;
    z-index: 0;
}

/* Push button content above the sheen pseudo-element */
.btn > * {
    position: relative;
    z-index: 1;
}

.btn:hover {
    background: linear-gradient(160deg,
        rgba(240, 250, 255, 0.98) 0%,
        rgba(220, 236, 252, 0.92) 50%,
        rgba(200, 222, 246, 0.85) 100%) !important;
    border-color: rgba(80, 130, 190, 0.45) !important;
    box-shadow:
        inset 0 1.5px 2px rgba(255, 255, 255, 0.95),
        inset 0 -1px 1px rgba(0, 0, 0, 0.07),
        inset 0 0 14px rgba(255, 255, 255, 0.35),
        0 2px 8px rgba(60, 110, 180, 0.14) !important;
    filter: brightness(1.06) saturate(1.1) !important;
    color: #1a3a58 !important;
    transform: none !important;
    background-color: unset !important;
}

.btn:active {
    transform: scale(0.96) !important;
    background: linear-gradient(160deg,
        rgba(200, 220, 240, 0.95) 0%,
        rgba(180, 205, 228, 0.88) 100%) !important;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.10),
        inset 0 2px 4px rgba(0, 0, 0, 0.10),
        inset 0 1px 1px rgba(255, 255, 255, 0.55) !important;
}

.btn:disabled,
.btn.disabled {
    opacity: 0.38 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    transform: none !important;
}

/* ── Semantic variants ── */
/* These map Bootstrap's .btn-primary / .btn-success etc
   onto the glass colour variants automatically */

.btn-primary,
.btn-primary:focus {
    background: linear-gradient(160deg,
        rgba(70, 130, 220, 0.90) 0%,
        rgba(50, 108, 198, 0.82) 50%,
        rgba(36, 90, 176, 0.75) 100%) !important;
    border-color: rgba(80, 150, 240, 0.45) !important;
    color: #e8f0ff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 30, 0.3) !important;
    box-shadow:
        inset 0 1.5px 2px rgba(180, 210, 255, 0.35),
        inset 0 -1px 1px rgba(0, 0, 0, 0.18),
        0 1px 4px rgba(40, 90, 200, 0.25) !important;
}
.btn-primary::before {
    background: linear-gradient(180deg,
        rgba(255, 255, 255, 0.18) 0%,
        rgba(255, 255, 255, 0) 100%) !important;
}
.btn-primary:hover {
    background: linear-gradient(160deg,
        rgba(90, 150, 240, 0.97) 0%,
        rgba(65, 122, 218, 0.92) 50%,
        rgba(48, 100, 196, 0.88) 100%) !important;
    border-color: rgba(120, 170, 255, 0.65) !important;
    box-shadow:
        inset 0 1.5px 2px rgba(200, 225, 255, 0.45),
        inset 0 -1px 1px rgba(0, 0, 0, 0.18),
        0 3px 12px rgba(40, 90, 200, 0.35) !important;
    color: #fff !important;
}

.btn-success,
.btn-success:focus {
    background: linear-gradient(160deg,
        rgba(60, 190, 120, 0.85) 0%,
        rgba(40, 168, 100, 0.77) 50%,
        rgba(28, 148, 82, 0.70) 100%) !important;
    border-color: rgba(60, 190, 120, 0.40) !important;
    color: #e6fff2 !important;
    text-shadow: 0 1px 2px rgba(0, 30, 10, 0.3) !important;
    box-shadow:
        inset 0 1.5px 2px rgba(160, 255, 200, 0.25),
        inset 0 -1px 1px rgba(0, 0, 0, 0.16),
        0 1px 4px rgba(28, 148, 82, 0.22) !important;
}
.btn-success::before {
    background: linear-gradient(180deg,
        rgba(255, 255, 255, 0.15) 0%,
        rgba(255, 255, 255, 0) 100%) !important;
}
.btn-success:hover {
    filter: brightness(1.10) saturate(1.10) !important;
    border-color: rgba(80, 210, 140, 0.60) !important;
    box-shadow:
        inset 0 1.5px 2px rgba(180, 255, 210, 0.35),
        0 3px 12px rgba(28, 148, 82, 0.30) !important;
    color: #e6fff2 !important;
}

.btn-danger,
.btn-danger:focus {
    background: linear-gradient(160deg,
        rgba(230, 80, 80, 0.85) 0%,
        rgba(210, 56, 56, 0.77) 50%,
        rgba(188, 36, 36, 0.70) 100%) !important;
    border-color: rgba(230, 80, 80, 0.40) !important;
    color: #ffe8e8 !important;
    text-shadow: 0 1px 2px rgba(30, 0, 0, 0.3) !important;
    box-shadow:
        inset 0 1.5px 2px rgba(255, 180, 180, 0.25),
        inset 0 -1px 1px rgba(0, 0, 0, 0.16),
        0 1px 4px rgba(188, 36, 36, 0.22) !important;
}
.btn-danger::before {
    background: linear-gradient(180deg,
        rgba(255, 255, 255, 0.14) 0%,
        rgba(255, 255, 255, 0) 100%) !important;
}
.btn-danger:hover {
    filter: brightness(1.10) saturate(1.10) !important;
    border-color: rgba(255, 100, 100, 0.60) !important;
    box-shadow:
        inset 0 1.5px 2px rgba(255, 200, 200, 0.35),
        0 3px 12px rgba(188, 36, 36, 0.30) !important;
    color: #ffe8e8 !important;
}

.btn-warning,
.btn-warning:focus {
    background: linear-gradient(160deg,
        rgba(240, 175, 40, 0.88) 0%,
        rgba(220, 152, 20, 0.80) 50%,
        rgba(195, 128, 10, 0.72) 100%) !important;
    border-color: rgba(240, 175, 40, 0.40) !important;
    color: #fff8e0 !important;
    text-shadow: 0 1px 2px rgba(30, 20, 0, 0.3) !important;
    box-shadow:
        inset 0 1.5px 2px rgba(255, 235, 140, 0.30),
        inset 0 -1px 1px rgba(0, 0, 0, 0.14),
        0 1px 4px rgba(195, 128, 10, 0.22) !important;
}
.btn-warning::before {
    background: linear-gradient(180deg,
        rgba(255, 255, 255, 0.18) 0%,
        rgba(255, 255, 255, 0) 100%) !important;
}
.btn-warning:hover {
    filter: brightness(1.08) saturate(1.10) !important;
    border-color: rgba(255, 195, 60, 0.60) !important;
    box-shadow:
        inset 0 1.5px 2px rgba(255, 240, 160, 0.35),
        0 3px 12px rgba(195, 128, 10, 0.30) !important;
    color: #fff8e0 !important;
}

.btn-info,
.btn-info:focus {
    background: linear-gradient(160deg,
        rgba(50, 180, 210, 0.85) 0%,
        rgba(30, 158, 190, 0.77) 50%,
        rgba(15, 136, 168, 0.70) 100%) !important;
    border-color: rgba(50, 180, 210, 0.40) !important;
    color: #e0f8ff !important;
    text-shadow: 0 1px 2px rgba(0, 20, 30, 0.3) !important;
    box-shadow:
        inset 0 1.5px 2px rgba(160, 235, 255, 0.25),
        inset 0 -1px 1px rgba(0, 0, 0, 0.16),
        0 1px 4px rgba(15, 136, 168, 0.22) !important;
}
.btn-info::before {
    background: linear-gradient(180deg,
        rgba(255, 255, 255, 0.15) 0%,
        rgba(255, 255, 255, 0) 100%) !important;
}
.btn-info:hover {
    filter: brightness(1.10) saturate(1.10) !important;
    border-color: rgba(80, 200, 230, 0.60) !important;
    color: #e0f8ff !important;
}

.btn-default,
.btn-secondary {
    /* already covered by base .btn — no override needed */
}

/* ── Dark mode ── */
body.dark-mode .btn {
    background: linear-gradient(160deg,
        rgba(255, 255, 255, 0.12) 0%,
        rgba(255, 255, 255, 0.07) 50%,
        rgba(255, 255, 255, 0.04) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.30),
        inset 0 1px 1px rgba(255, 255, 255, 0.16),
        inset 0 -1px 1px rgba(0, 0, 0, 0.20) !important;
    color: #c8d8e8 !important;
    text-shadow: none !important;
}
body.dark-mode .btn::before {
    background: linear-gradient(180deg,
        rgba(255, 255, 255, 0.10) 0%,
        rgba(255, 255, 255, 0) 100%) !important;
}
body.dark-mode .btn:hover {
    background: linear-gradient(160deg,
        rgba(255, 255, 255, 0.20) 0%,
        rgba(255, 255, 255, 0.11) 50%,
        rgba(255, 255, 255, 0.06) 100%) !important;
    border-color: rgba(255, 255, 255, 0.26) !important;
    box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.35),
        inset 0 1px 1px rgba(255, 255, 255, 0.22),
        inset 0 -1px 1px rgba(0, 0, 0, 0.20) !important;
    color: #ffffff !important;
}
body.dark-mode .btn-primary {
    background: linear-gradient(160deg,
        rgba(75, 143, 239, 0.80) 0%,
        rgba(53, 116, 196, 0.72) 50%,
        rgba(36, 90, 176, 0.65) 100%) !important;
    border-color: rgba(100, 160, 255, 0.40) !important;
    color: #ddeeff !important;
}
body.dark-mode .btn-success {
    background: linear-gradient(160deg,
        rgba(46, 204, 113, 0.75) 0%,
        rgba(34, 170, 90, 0.65) 100%) !important;
    border-color: rgba(60, 210, 120, 0.40) !important;
    color: #d4f5e5 !important;
}
body.dark-mode .btn-danger {
    background: linear-gradient(160deg,
        rgba(239, 107, 107, 0.75) 0%,
        rgba(200, 60, 60, 0.65) 100%) !important;
    border-color: rgba(255, 120, 120, 0.40) !important;
    color: #ffdede !important;
}
body.dark-mode .btn-warning {
    background: linear-gradient(160deg,
        rgba(232, 185, 74, 0.78) 0%,
        rgba(195, 148, 30, 0.68) 100%) !important;
    border-color: rgba(255, 200, 60, 0.40) !important;
    color: #fff5cc !important;
}
body.dark-mode .btn-info {
    background: linear-gradient(160deg,
        rgba(50, 190, 220, 0.75) 0%,
        rgba(20, 158, 190, 0.65) 100%) !important;
    border-color: rgba(60, 200, 230, 0.40) !important;
    color: #ccf5ff !important;
}
/* ===================All buttons glass ================== */





/* ================================================= */
/* ============ PFS Regulated Folder Tree ========== */
/* ================================================= */

#pfsGeneralTree ul.jqtree-tree {
    font-size: 13px;
    font-family: 'Segoe UI', sans-serif;
    color: #2c3e50;
    line-height: 1.2;
}

/* ── Toggle arrows — hide jqTree character, use ::before ── */
#pfsGeneralTree .jqtree-toggler,
#pfsGeneralTree .jqtree-toggler-left,
#pfsGeneralTree .jqtree-toggler-right,
#pfsGeneralTree .jqtree-toggler.jqtree-closed,
#pfsGeneralTree .jqtree-toggler.jqtree-open {
    font-size: 0 !important;
    color: transparent !important;
    opacity: 1 !important;
    width: 16px !important;
    text-align: center !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#pfsGeneralTree .jqtree-toggler::before {
    font-size: 12px !important;
    color: #2c3e50 !important;
    opacity: 0.7 !important;
    display: inline-block !important;
}

#pfsGeneralTree .jqtree-toggler.jqtree-closed::before {
    content: '▶' !important;
}

#pfsGeneralTree .jqtree-toggler:not(.jqtree-closed)::before {
    content: '▼' !important;
}

/* ── Remove all default jqtree borders/margins ── */
#pfsGeneralTree ul.jqtree-tree li,
#pfsGeneralTree ul.jqtree-tree ul {
    border: none !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    list-style: none !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* ── Indent nested levels ── */
#pfsGeneralTree ul.jqtree-tree ul {
    padding-left: 18px !important;
    position: relative;
}

/* ── Vertical line — solid colour ── */
#pfsGeneralTree ul.jqtree-tree ul::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 0;
    bottom: 12px;
    width: 1px;
    background: rgba(180, 200, 220, 0.55);
    pointer-events: none;
}

/* ── Horizontal L-turn — solid colour ── */
#pfsGeneralTree ul.jqtree-tree ul > li {
    position: relative;
    margin: 0 !important;
    padding: 0 !important;
}

#pfsGeneralTree ul.jqtree-tree ul > li::before {
    content: '';
    position: absolute;
    left: -10px;
    top: 13px;
    width: 10px;
    height: 1px;
    background: rgba(180, 200, 220, 0.55);
    pointer-events: none;
}

/* ── Hide lines at top 2 levels (host + project folder) ── */
#pfsGeneralTree ul.jqtree-tree > li > ul::before,
#pfsGeneralTree ul.jqtree-tree > li > ul > li::before,
#pfsGeneralTree ul.jqtree-tree > li > ul > li > ul::before,
#pfsGeneralTree ul.jqtree-tree > li > ul > li > ul > li::before {
    display: none !important;
}

/* ── Element row ── */
#pfsGeneralTree .jqtree-element {
    display: flex;
    align-items: center;
    padding: 0px 4px;
    border-radius: 8px;
    margin: 0;
    position: relative;
    min-height: 24px;
}

/* ── Title ── */
#pfsGeneralTree .jqtree-title {
    color: #2c3e50;
    padding: 2px 6px;
    border-radius: 6px;
    font-size: 13px;
    flex: 1;
    line-height: 1.3;
}

/* ── Hover on full row ── */
#pfsGeneralTree ul.jqtree-tree li > .jqtree-element:hover {
    background-color: rgba(215, 230, 245, 0.40);
    cursor: pointer;
}

/* ── Selected — liquid glass full row ── */
#pfsGeneralTree li.jqtree-selected > .jqtree-element {
    background: linear-gradient(160deg,
        rgba(240, 248, 255, 0.75) 0%,
        rgba(218, 236, 255, 0.60) 40%,
        rgba(200, 224, 252, 0.52) 100%) !important;
    border: 1px solid rgba(160, 200, 240, 0.40) !important;
    border-radius: 8px !important;
    box-shadow:
        inset 0 1.5px 3px rgba(255, 255, 255, 0.80),
        inset 0 -1px 2px rgba(100, 160, 220, 0.08),
        0 2px 12px rgba(80, 140, 210, 0.10),
        0 1px 3px rgba(80, 140, 210, 0.06) !important;
    backdrop-filter: blur(14px) saturate(1.6) !important;
    -webkit-backdrop-filter: blur(14px) saturate(1.6) !important;
    position: relative;
    overflow: hidden;
}

/* Top gloss sheen */
#pfsGeneralTree li.jqtree-selected > .jqtree-element::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 45%;
    background: linear-gradient(180deg,
        rgba(255, 255, 255, 0.38) 0%,
        rgba(255, 255, 255, 0) 100%);
    border-radius: 8px 8px 0 0;
    pointer-events: none;
    z-index: 0;
}

#pfsGeneralTree li.jqtree-selected > .jqtree-element .jqtree-title {
    color: #1a4a7a !important;
    font-weight: 600 !important;
    background: none !important;
    box-shadow: none !important;
    position: relative;
    z-index: 1;
}

/* ── sd badge — teal pill ── */
#pfsGeneralTree .jqtree-icon.badge-info {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, #2ab8cc 0%, #17a2b8 100%) !important;
    color: white !important;
    border-radius: 20px !important;
    font-size: 10px !important;
    padding: 3px 8px !important;
    margin-right: 6px !important;
    font-style: normal !important;
    font-weight: 600 !important;
    vertical-align: middle !important;
    letter-spacing: 0.3px !important;
    box-shadow:
        0 1px 4px rgba(23, 162, 184, 0.30),
        inset 0 1px 1px rgba(255, 255, 255, 0.28) !important;
    min-width: 28px !important;
    text-align: center !important;
    flex-shrink: 0 !important;
    position: relative;
    z-index: 1;
}

/* ── Search highlight ── */
#pfsGeneralTree .pfs-search-match > .jqtree-element {
    background: linear-gradient(160deg,
        rgba(195, 225, 250, 0.45) 0%,
        rgba(175, 210, 245, 0.35) 100%) !important;
    border-radius: 8px;
    box-shadow: 0 0 0 1px rgba(100, 170, 220, 0.28) !important;
}

#pfsGeneralTree .pfs-search-match > .jqtree-element .jqtree-title {
    font-weight: 600;
    color: #1a5272 !important;
}

#pfsGeneralTree.pfs-searching li.jqtree_common:not(.pfs-search-match) > .jqtree-element .jqtree-title {
    opacity: 0.28;
}

/* ── Scrollbar ── */
#pfsGeneralTreePanel {
    overflow-y: scroll !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(160, 185, 210, 0.4) transparent;
}

#pfsGeneralTreePanel::-webkit-scrollbar { width: 4px; }
#pfsGeneralTreePanel::-webkit-scrollbar-track { background: transparent; }
#pfsGeneralTreePanel::-webkit-scrollbar-thumb {
    background: rgba(160, 185, 210, 0.4);
    border-radius: 4px;
}
#pfsGeneralTreePanel::-webkit-scrollbar-thumb:hover {
    background: rgba(120, 160, 200, 0.6);
}

/* ================================================= *//* multiple column filter */
.btn-active-sort {
    background-color: #4b8fef !important;
    color: #fff !important;
}
/* multiple column filter */