@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@300;400;500;700;900&display=swap');

:root{
  --xn-overlay-strong: var(--xn-overlay-900, rgba(0,0,0,0.61)); /* fallback for #0000009c */
  --xn-overlay-medium: var(--xn-overlay-500, rgba(0,0,0,0.233));
  --xn-tbl-bg: rgba(0,0,0,0.22); /* fallback for #00000038 */
  --xn-muted: rgb(82 77 77);
  --xn-visit-color: #ffffff;
  --xn-drag-opacity: .5;
  --xn-full-height: 100%;
  --xn-full-width: 100%;
}

/* Typography: Orbitron applied globally as requested (does not change layout) */
html,
body {
    height: var(--xn-full-height, 100%);
    width: var(--xn-full-width, 100%);
    font-family: 'Orbitron', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* keep main scrolling/layout identical */
body>main {
    min-height: 100%;
    max-height: 100%;
    overflow: auto;
}

/* preloader overlay (uses XYnovaethrix token if present) */
#pre-loader {
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 9999;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--xn-overlay-strong, #0000009c);
}

/* DataTables processing overlay (gradient preserved exactly) */
div.dataTables_processing {
    height: calc(100%) !important;
    top: 6% !important;
    position: absolute;
    display: inline-flex !important;
    margin: unset;
    justify-content: center;
    align-items: center;
    background: -webkit-gradient(linear, left top, right top,
        color-stop(0%, rgba(255, 255, 255, 0)),
        color-stop(25%, rgb(210 210 210 / 15%)),
        color-stop(75%, rgb(255 255 255 / 15%)),
        color-stop(100%, rgba(255, 255, 255, 0))
    ) !important;
}

/* table loader overlay */
.tbl_loader {
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    background: var(--xn-tbl-bg, #00000038);
}

/* preserved optional blur */
/* .blur>* {
    filter: blur(5px);
    -webkit-filter: blur(5px);
} */

.blur .tbl_loader {
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

/* FORM BUILDER */
.form-description {
    font-style: italic;
    color: var(--xn-muted, rgb(82 77 77));
}

input[type="checkbox"],
input[type="radio"] {
    cursor: pointer;
}

.card.question-item .item-move {
    /* background-image: url(../img/drag.png);
    background-size: contain; */
    position: absolute;
    left: 3px;
    top: 50%;
    z-index: 2;
    content: "";
    width: 20px;
    height: 30px;
    background-repeat: no-repeat;
    opacity: var(--xn-drag-opacity, .5);
    cursor: move;
}

.d-flex-responsive {
    display: inline-flex;
}

.w-30 {
    width: calc(30%);
}

.w-20 {
    width: calc(20%);
}

.w-70 {
    width: calc(70%);
}

.w-80 {
    width: calc(80%);
}

.w-60 {
    width: calc(60%);
}

#shorten-result {
    display: none;
}

.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.truncate-2 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

@media (max-width: 900px) {
    .w-30,
    .w-20,
    .w-80,
    .w-60 {
        width: calc(100%) !important;
    }
    .d-flex-responsive {
        display: block !important;
    }
    .w-70 {
        width: calc(100%)!important;
    }
    .visit-counts {
        font-size: 9vw !important;
    }
}

.no-close .ui-dialog-titlebar-close {
    display: none;
}

.dialog-backdrop:after {
    content: "";
    position: absolute;
    background: var(--xn-overlay-medium, rgba(0, 0, 0, 0.233));
    z-index: 2;
    height: 100%;
    width: 100%;
    top: 0;
    right: 0;
    overflow: hidden;
}

.dialog-backdrop>* {
    filter: blur(5px);
}

.dialog-backdrop .ui-dialog,
.dialog-backdrop #pre-loader {
    filter: unset;
}

.visit-counts {
    font-size: 3vw;
    min-height: 12vh;
    color: var(--xn-visit-color, white);
    font-weight: bolder;
    display: flex;
    justify-content: center;
    align-items: center;
}