@import "../styles/globals.css";
@import "../styles/index.css"layer(index);


html {
    font-size: 13px;
    position: relative;
    min-height: 100%;
}

/*.preloader {
    display: none !important;
    visibility: hidden;
}*/

.pt-4 {
    padding-top: 4.5em !important;
}

@view-transition {
    navigation: auto;
}

textarea {
    min-height: 120px;
    border-radius: 6px;
    overflow: hidden;
}

#versionTag {
    margin-left: 1em;
    --_color: var(--grey-400, #aaa);
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.btn {
    height: max-content;
    white-space: nowrap;
}

.modal-backdrop {
    z-index: 20 !important;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.date-field-wrapper {
    position: relative;
    display: inline-block;
    isolation: isolate;
    width: 100%;
}

.date-field-wrapper::after {
    content: "\e03a";
    font-family: "prompt-icons" !important;
    font-weight: 400;
    font-size: 1.1em;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;

    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 1em;
    pointer-events: none;
    opacity: .68;

    z-index: 10;

}

.form-field:has(input[data-format="date"][readonly]) {
    cursor: not-allowed;
}

.form-field:has(input[data-format="date"][readonly]) label {
    pointer-events: none;
}

input[data-format="date"][readonly]{
    pointer-events: none;
}

.table__header-right .grid-col-2 {
    align-items: center;
}

field-label[required]::after {
    content: " *";
}

.table-overflow-wrapper {
    width: 100%;
    overflow: auto;
    height: 100%;
    border-radius: 4px;
    font-size: 14px;
    max-height: 80vh;
}

fieldset {
    display: grid;
    flex-wrap: wrap;
    grid-template-columns: 1fr 1fr;
    column-gap: 2em !important;
    margin-top: 0.5em;
}

fieldset .fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 2em;
    width: clamp(200px, 70vw, calc(100vw - var(--sidebar-width) - 200px));
/*    margin: 0 auto;*/
    grid-auto-flow: dense;
}

.fields .col-left {
    grid-column-start: 1
}

.fields .col-right {
    grid-column-start: 2;
}

.fields .wide {
    grid-column: -1 / 1;
}

.controlled-fieldset {
    display: flex !important;
}

fieldset .field-group {
/*    display: grid;*/
    /*    grid-template-columns: 1fr 1fr;*/
    gap: 1em;
    padding: 1em .5em;
    --_border: 1px solid var(--color-grey-100);
    border: var(--_border);
    border-radius: .5em;
    margin-bottom: 1em;
}

/*:not(.field-group) > .form-field {
    max-width: 50%;
}

:not(.field-group) > .form-field:has(lookup-input) {
    max-width: 100%;
}*/

fieldset hr {
    --_color: rgb(0 0 0 / 0.03);
    color: var(--_color);
    background: var(--_color);
}

fieldset .form-field {
    flex: 1 1 50%;
    box-sizing: border-box;
    margin-bottom: .5em;
}

.form-field input[type="checkbox"] {
    --_size: 1em;
    width: var(--_size);
    min-height: var(--_size) !important;
    height: var(--_size) !important;
}

.form-field:has(field-label + switch-input) {
    display: flex;
    flex-direction: row-reverse;
    width: max-content;
    align-items: center;
    gap: .5em;
}

.form-field:has(field-label + switch-input) label {
    margin: 0;
}


/*.table-wrapper th {
    --_width: max-content !important;
}*/

.table-wrapper th:empty {
    --_width: 1% !important;
}

.flex-header {
    display: flex;
    justify-content: space-between;
    padding: var(--gap-small);
    background: var(--color-white);
    border-radius: 6px;
    overflow: hidden;
}

.flex-header fieldset {
    display: flex;
}

.flex-header>* {
    display: flex;
    gap: var(--gap-small);
}

.dt-toolbar, .dataTables_filter {
    display: none;
}

linked-select {
    display: block;
    animation: didChange 1s ease-out;
}

.card {
    position: relative;
}

.card .card-title {
    font-weight: 600;
}

.card #btnSubmitEntry {
    position: absolute;
    top: 0;
    right: 0;
}

.card .card-header {
    background-color: inherit;
}

form {
/*    margin-bottom: 1em;*/
}

.sticky {
    --z-index-sticky: 10;
    box-shadow: 0 0 4px rgba(0 0 0 / .2);
    outline: 1px solid var(--lines-color, #eaeaea);
    background: var(--row-bg, #fff) !important;
    z-index: var(--z-index-sticky)
}

.sticky-left {
    left: 0;
}

.sticky-left:nth-of-type(2) {
    left: 48px;
}

.sticky-right {
    right: 0;
}

field-label {
    display: contents;
}

form div:has(> :is(label, field-label) + input[type="checkbox"]) {
    display: flex;
    background-color: transparent;
    flex-direction: row-reverse;
    width: max-content;
    align-items: center;
    gap: 0.4em;
    padding: 0.45em;
    border-radius: 4px;
    height: min-content;
    margin-top: auto;
}

form div:has(> :is(label, field-label) + input[type="checkbox"]) * {
    margin: 0;
    cursor: pointer;
}

form div:has(> :is(label, field-label) + input[type="checkbox"]):hover {
    background-color: var(--button-bg-hover);
}

.form-footer, .form-footer::before {
    --footer-bg: #F8F8F8;
    display: flex;
    position: sticky;
    bottom: 0;
    margin: 0;
    justify-content: flex-end;
    margin-top: 1em;
    background-image: linear-gradient(to bottom, transparent, var(--footer-bg) 50%);
}

.form-footer::before {
    content: "";
    position: absolute;
    background-color: var(--footer-bg);
    left: 0;
    right: 0;
    bottom: -4em;
    height: 4em;

}

.form-footer button {
    width: 120px;
}


.checkbox-style {
    display: flex;
    background-color: transparent;
    flex-direction: row-reverse;
    width: max-content;
    align-items: center;
    gap: .4em;
    padding: .45em;
    border-radius: 4px;
    height: min-content;
    margin-top: auto;
}

section.active {
    height: 100%;
}

.duplicate {
    outline: 4px solid red;
}

.table-wrapper {
    margin-bottom: 1em;
}

tr.empty-state {
    --row-height: 200px;
}

@keyframes didChange {
    from {
        outline: 4px solid rgba(255, 166, 0, 0.836);
    }

    to {
        outline: 0 solid rgba(255, 166, 0, 0.205);
    }
}


.loading-ring-wrapper {
    position: relative;
    display: inline-block;
    background: var(--color-white, #fff);
    width: 100%;
/*    filter: grayscale(1);*/
    cursor: wait;
    opacity: .76;
    z-index: 0;
}

.loading-ring-wrapper input {
    pointer-events: none;
    background: var(--color-white, #fff);
}

.loading-ring::before {
    --_highlight: rgba(255, 166, 0, 0.736);
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(90deg, 
            var(--_highlight), 
            white, 
            var(--_highlight));
    background-size: 200% 100%;
    padding: 2px;
    pointer-events: none;
    box-sizing: content-box;
    border-radius: 6px;
    z-index: -1;
    animation: shimmer-loader 2.5s infinite linear;
}

@keyframes shimmer-loader {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}