/* has to be equal to the input (form-control) border size, to have proper property toolbar position */
:root {
    --input-border-width: 1px;
}

:root {
    --border-padding: 0.375rem;

    --border-comp-horz-padding: var(--border-padding);
    --border-comp-vert-padding: var(--border-padding);
    --border-label-horz-padding: var(--border-padding);
    --border-label-vert-padding: var(--border-padding);

    --border-cont-padding: 1rem;
    --border-cont-horz-padding: var(--border-cont-padding);
    --border-cont-vert-padding: var(--border-cont-padding);

    /* should correspond to $table-border-width bootstrap scss variable */
    --table-outline-width: 1px;

    --text-color: var(--bs-body-color);
    --background-color: var(--bs-body-bg);
    --component-background-color: var(--bs-body-bg);
    --grid-separator-border-color: var(--bs-table-border-color);
    --component-border-color: var(--panel-border-color);

    --link-color: var(--bs-link-color);
}

:root {
    --border-width: 1px;
}

/* we don't want to use accordion, so we'll use the card class, but in this case we have to implement collapsible manually */

/* we want to have the same width for expanded and collapsed folders*/
.caption-panel-header.collapsible::before,
.nav-bs-mobile-folder::before {
    /*font-family: "Font Awesome 6 Free";*/
    margin-right: var(--border-label-horz-padding);
    width: 0.75em;
}

.caption-panel-header.collapsible.collapsed::before,
.collapsible-text-header.collapsed::before,
.nav-bs-mobile-folder.collapsed::before {
    content: "\f105";
    font: var(--fa-font-solid);
}

.caption-panel-header.collapsible:not(.collapsed)::before,
.collapsible-text-header:not(.collapsed)::before,
.nav-bs-mobile-folder:not(.collapsed)::before {
    content: "\f107";
    font: var(--fa-font-solid);
}

/*focused cell, same as table-active (which is used for the table-active), but opacity 0.3 instead of 0.1*/
.focused-cell {
    --bs-table-bg-state: rgba(0, 0, 0, 0.3);
}

:not(.first-visible-row):not(.table-active) > .duplicate-cell {
    --bs-table-color-state: rgba(0, 0, 0, 0.3);
}

/* it's odd, but modal-body has flex-shrink (flex: 1 1 auto), but min-height is not set to zero (as well as overflow:auto), what doesn't make sense */
.modal-body {
    min-height: 0;
}

/* the problem that for toolbar there is no appropriate class in bootstrap, default toolbar with "regular" (not solid) icons looks pretty awkward */
/* so we increase their size, remove paddings / borders to look more authentic / similar to regular buttons */

.btn-toolbar .btn {
    border: 0;
    padding: 0 0.25em;
    font-size: 1.25rem;
    /* bootstrap uses more complex selectors, so we'll just use important   */
    border-radius: 0.375em !important;
}

/* we don't want the toolbar to have transparent background, but we still want hover background (just like for the navigator) */

.btn-toolbar .btn-image:hover {
    background-color: var(--component-hover-background-color);
}

.btn-toolbar .btn-image.active {
    background-color: var(--component-hover-background-color);
}

/*.fa, .fa-brands, .fa-classic, .fa-regular, .fa-sharp, .fa-solid, .fab, .far, .fas {*/
/*    line-height: inherit;*/
/*}*/

.property-toolbar-item:hover,
.property-toolbar-item.background-inherit:hover {
    background-color: var(--component-hover-background-color);
}

/* need this because toolbar is shown over form-control, but it is its sibling and not its child, assert that there is form-control inside */
.prop-input-w-toolbar .background-inherit {
    background-color: var(--bs-body-bg); /* should correspond form-control background-color */
}

/* STICKY HEADER PROBLEM */
/* 'border-collapse: collapse' + sticky header/footer make header/footer borders disappear

/* moving upper border to the top to make it sticky (and browsers work really odd with table elements that are sticky, especially when there is a scale in the OS, and the browser gets for example 0.666667px sizes) */
.table-container:has(> .table-bordered),
.table-container:has(> .table.empty-header) { /* when there is no header also we have to move border up */
    border-top: var(--table-outline-width) solid var(--bs-border-color); /* there is no bs-table-border-color here*/
}
.table.table-bordered .data-grid-header-row,
.table.table-bordered .data-grid-column-row,
.table.empty-header.table-bordered :not(.data-grid-header) .data-grid-row:first-child { /* when there is no header we should remove border for the next row */
    border-top: none;
}
.table.table-bordered .data-grid-column-row,
.table.empty-header .data-grid-header-row,
/* in not table-bordered styles bootstrap set borders for cell bottoms, not rows */
.table:not(.table-bordered) .data-grid-column-row > *,
.table.empty-header .data-grid-header-row > * { /* in not table-bordered styles bootstrap set borders for cells, not rows */
    border-bottom: none;
}

/* collapsed borders are not sticked, so we have to replace them with outline, and remove border bottom, since outline somewhy respects it */
.scrolled-down.table:not(.table-borderless):not(.empty-header) .data-grid-header-row {
    outline: var(--table-outline-width) solid var(--bs-table-border-color);
}
.scrolled-down.table-bordered .data-grid-header-row,
/* in not table-bordered styles bootstrap set borders for cell bottoms, not rows */
.scrolled-down:not(.table-bordered) .data-grid-header-row > * {
    border-bottom: none;
}

/* FOOTER STICKY */
/* a) here the difference is that we need border at the bottom almost all the time (to split grid from toolbar for example) */
/* b) there is no data-grid-column-row */
/* c) we don't much care of the "doubled" bottom border, because it happens really rare */
/* d) border bottoms are used, so everything is reversed */
/* here we can't use scrolled-up, because we don't know if the footer "hits" the ground, so we always use outline, removing border bottom */

.table-container {
    border-bottom: var(--table-outline-width) solid var(--bs-border-color); /* there is no bs-table-border-color here*/
}

.table-bordered .data-grid-footer-row,
.table.table-bordered:not(.empty-footer) :not(.data-grid-footer) .data-grid-row:last-child, /* we want to remove bottom border, because with outline it gives "doubled" line */
/* in not table-bordered styles bootstrap set borders for cell bottoms, not rows */
:not(.table-bordered) .data-grid-footer-row > *,
.table:not(.table-bordered):not(.empty-footer) :not(.data-grid-footer) .data-grid-row:last-child > * { /* we want to remove bottom border, because with outline it gives "doubled" line */
    border-bottom: none;
}

.table-bordered .data-grid-footer-row { /* we want to remove bottom border, because with outline it gives "doubled" line */
    border-top: none;
}

.table:not(.table-borderless):not(.empty-footer) .data-grid-footer-row {
    outline: var(--table-outline-width) solid var(--bs-table-border-color);
}

/* LEFT STICKY  */
/* just like in all stickies there is a problem that border is not shown, but is respected in left */
/* the whole idea that box-shadow also respects invisible borders, so we stretch it to the border + shadow-width */
/* plus we substract border from the left, that way we get pixel perfect behaviour */
/* it's better to fix border to the left always to avoid blinking */

.table-container:has(> .table-bordered) { /* .scrolled-left */
    border-left: var(--table-outline-width) solid var(--bs-border-color); /* there is no bs-table-border-color here */
    border-right: var(--table-outline-width) solid var(--bs-border-color); /* there is no bs-table-border-color here */
}

.table.table-bordered .data-grid-header-cell:first-child,
.table.table-bordered .data-grid-cell:first-child,
.table.table-bordered .data-grid-footer-cell:first-child {
    border-left: none;
}

.table.table-bordered.scrolled-left .data-grid-sticky-header.sticked,
.table.table-bordered.scrolled-left .data-grid-sticky-cell.sticked,
.table.table-bordered.scrolled-left .data-grid-sticky-footer.sticked {
    /* there is no way to add box-shadow, so we "override" it */
    box-shadow: inset 0 0 0 9999px var(--bs-table-bg-state, var(--bs-table-bg-type, var(--bs-table-accent-bg))),
                inset calc(0px - calc(var(--cell-border-right) + var(--cell-border-right))) 0 0 var(--bs-table-border-color);
}

/* adding right border to the regular table when sticked */
.table:not(.table-bordered):not(.table-borderless).scrolled-left .data-grid-sticky-header.last-sticked,
.table:not(.table-bordered):not(.table-borderless).scrolled-left .data-grid-sticky-cell.last-sticked,
.table:not(.table-bordered):not(.table-borderless).scrolled-left .data-grid-sticky-footer.last-sticked {
    box-shadow: inset 0 0 0 9999px var(--bs-table-bg-state, var(--bs-table-bg-type, var(--bs-table-accent-bg))),
    inset calc(0px - var(--table-outline-width)) 0 0 var(--bs-table-border-color);
}

.table.table-bordered .data-grid-last-header-cell, /* there is arrow-th in the row*/
.table.table-bordered .data-grid-cell:last-child,
.table.table-bordered .data-grid-footer-cell:last-child {
    border-right: none;
}

.table.empty-header .data-grid-header-cell,
.table.empty-footer .data-grid-footer-cell,
.table.empty-footer .arrow-th {  /* cell with .arrow-th doesn't have .data-grid-footer-cell class. adding for them to behave the same way */
    padding: 0;
    border: none;
}

/* --- --- */

@supports (-moz-appearance: none) {
    /*This is because in firefox, table cells lose their bottom border because they are hidden by the background.
    Firefox bug is active more than 11 years https://bugzilla.mozilla.org/show_bug.cgi?id=688556*/
    .table > :not(caption) > * > * {
        background-clip: padding-box;
    }
}

/* Scroll shadow support */

.scroll-shadow-container-start.scrolled > .scroll-shadow-header {
    z-index: 1;
    box-shadow: 0 0.1rem 0.5rem 0 rgba(var(--bs-body-color-rgb),.15);
}
.scroll-shadow-container-end.scrolled > .scroll-shadow-header {
    z-index: 1;
    box-shadow: 0 -0.1rem 0.5rem 0 rgba(var(--bs-body-color-rgb),.15);
}
.flex-dir-horz > .navbar.navbar-popup-over-selected-hover:not(:last-child) > .navbar-nav {
    box-shadow: 0.2rem 0 0.5rem 0 rgba(var(--bs-body-color-rgb),.15);
}
.flex-dir-vert > .navbar.navbar-popup-over-selected-hover:not(:last-child) > .navbar-nav {
    box-shadow: 0 0.1rem 0.5rem 0 rgba(var(--bs-body-color-rgb),.15);
}
.flex-dir-horz > .navbar.navbar-popup-over-selected-hover:last-child > .navbar-nav {
    box-shadow: -0.2rem 0 0.5rem 0 rgba(var(--bs-body-color-rgb),.15);
}
.flex-dir-vert > .navbar.navbar-popup-over-selected-hover:last-child > .navbar-nav {
    box-shadow: 0 -0.1rem 0.5rem 0 rgba(var(--bs-body-color-rgb),.15);
}

/* The end tab bar location support - just inverting borders */

.nav-tabs-vert.nav-tabs-end {
    border-top: var(--bs-nav-tabs-border-width) solid var(--bs-nav-tabs-border-color);
    border-bottom: none;

    --bs-nav-tabs-link-active-border-color: var(--bs-body-bg) var(--bs-border-color) var(--bs-border-color);
}

.nav-tabs-vert.nav-tabs-end .nav-link {
    margin-top: calc(-1 * var(--bs-nav-tabs-border-width));
    margin-bottom: 0;
    border-bottom-left-radius: var(--bs-nav-tabs-border-radius);
    border-bottom-right-radius: var(--bs-nav-tabs-border-radius);
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

/* to correspond Font Awesome icons line height */
.bi.wrap-text-img {
    line-height: 1;
}

/* we don't want the badge to have it's own color */

.badge.wrap-text-img {
    color: unset;
}

/* form-select, form-control sets width to 100%, but the platform sizing components itself (with content-box box-sizing), so width : 100% breaks that */
.form-select.prop-size-value,
.form-control.prop-size-value {
    width: unset;
}

/* form-floating needs border-box because it sets the explicit height */
/* form-check also counts on border-box box-sizing */
.form-check > .prop-size-value,
.form-floating > .prop-size-value {
    box-sizing: border-box;
}

/* bootstrap doesn't wrap button group by default, which is not what we want in the most cases */
.option-btn-container.btn-group {
    flex-wrap: wrap;
}

/*Bootstrap uses a fixed z-index for the some elements, and z-index of the modal-windows(1055) is higher than z-index of dropdown-menu(1000).
    We manually set z-index in lsf-dropdown to 1070*/
.dropdown-menu.lsf-dropdown {
    /*--bs-dropdown-zindex: 1070;*/
}

.selectize-dropdown.selectize-dropdown {
    /*in excel theme resizable-window.css .modal-form sets z-index to 1000, in bootstrap theme by default z-index of the modal-windows is 1055
        as the selectize uses its own css-classes which do not overlap with excel and bootstrap css-classes,
        we will use the z-index used for .dropdown-menu.lsf-dropdown in the bootstrap theme - 1070*/
    /*z-index: 1070;*/
}

/* wrapping is not desirable behaviour for the toolbar, at least in property toolbar (when toolbar is too large and more than a half of the property width) */

.btn-toolbar.property-toolbar {
    flex-wrap: nowrap;
}

/* have no idea, why .form-check .form-check-input margin-top doesn't break the center alignment, so we're changing only left margin in the form-switch */
.form-switch.data-grid-cell .form-check-input {
    margin-left: unset;
}

table.pvtTable thead tr th {
    /*bold column captions*/
    font-weight: bold;
}

/*disable margin-bottom from .table */
.pvtTable.table,
.lsf-table.table {
    margin-bottom: 0;
}

/*
    to still possible to set attributes horizontally
*/
.pvtRowsTable li.pvtAttr-container {
    width: fit-content;
}

/*
    so that attributes in the aggregator are the same size
*/
.pvtRenderer, .pvtAggregator, .pvtAttr {
    width: -webkit-fill-available;
    width: -moz-available;
}

.cell-with-background {
    background-color: var(--bs-table-bg);
}
/* background won't work for the input checkbox so we outline it with that color */
input.cell-with-background[type=checkbox] {
    outline: var(--bs-table-bg) solid 5px;
}

/* we want for the non-form-control placeholder to have the same behaviour look as the form-control placeholder */
.text-based-value-null:not(a),
.text-based-value-null.form-control:not(input),
.text-based-value-empty:not(a),
.text-based-value-empty.form-control:not(input),
.form-select > option.option-null {
    color: var(--bs-secondary-color);
}
a.text-based-value-null,
a.text-based-value-empty {
    --bs-link-opacity: 0.5;
}
.text-based-value-null > input[type="color"] {
    opacity: 0.5;
}
.form-select > option {
    color: var(--bs-body-color)
}

/*
    we use hack with double and single click on grouping attributes in the pivot:
        add transparent <div> element to the right border of the <select> element exactly above the arrow
        and set the standard width of this element to 1.5em in pivot.css.

    bootstrap uses custom <select> arrow design in .form-select e.g:
        ***
        background-image: var(--bs-form-select-bg-img),var(--bs-form-select-bg-icon,none);
        background-position: right 0.75rem center;
        ***
    we will not know real arrow size if bootstrap developers change it in next releases.
    if it is changed, this size must also be changed
*/
div.selectArrow {
    width: 2.5em;
}

.loading-async-icon {
    margin: 0.25rem;
    line-height: var(--bs-body-line-height);
}

/* do not show thick outline on focus in bootstrap-select. because it overlaps with the content. button is need to increase selectivity */
.bootstrap-select button.dropdown-toggle:focus, .bootstrap-select button.dropdown-toggle:focus-visible {
    outline: none !important; /* !important is needed because in bootstrap-select.css rule ".bootstrap-select .dropdown-toggle:focus" used !important too*/
    /*box-shadow: none; !* because bootstrap.css has rule: .btn:focus-visible *!*/
}


.cell-with-custom-font .form-select, /* dropdown */
.cell-with-custom-font .btn, /* button / buttonGroups */
.cell-with-custom-font .form-check /* check-boxes */
{
    font-size: var(--custom-font-size);
    font-family: var(--custom-font-family);
    font-style: var(--custom-font-style);
    font-weight: var(--custom-font-weight);
}