/* You can add global styles to this file, and also import other style files */
@import "variables";
@import "monaco-editor-overrides.scss";

body {
    min-width: $min-width;
    //font-family: 'PT Sans', sans-serif;
}

::-moz-selection { /* Code for Firefox */
    //color: white;
    //background: $primary-color;
}

::selection {
    //color: white;
    //background: $primary-color;
}

::-webkit-scrollbar { width: 7px; height: 7px; }

/* Track */
::-webkit-scrollbar-track {
    background: transparent; border-radius: 8px;
    //box-shadow: inset 0 0 5px gray;
}

/* Handle */
::-webkit-scrollbar-thumb { background: #5b5b5b; border-radius: 10px; }

/* Handle on hover */
::-webkit-scrollbar-thumb:hover { background: #5b5b5b; }

/* Hide HTML5 Up and Down arrows. */
input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none; margin: 0;
}

// Hide up & down arrows for number in firefox
input[type="number"] { -moz-appearance: textfield; }

// ==== animations ====
@keyframes fadein { from { opacity: 0} to { opacity: 1} }


// ==== common classes ====
.cursor-pointer { cursor: pointer;}
.text-v-small {font-size: 70%;}
.mt-1px { margin-top: 1px }
.mt--1px { margin-top: -1px; }
.mt--2px { margin-top: -2px; }
.dialog-text { margin: 30px;text-align: center;}
.full-body { height: calc(100vh - 56px); } // 50 is giving scroll in log profile, 56 is working fine.
.line-height-1-3 { line-height: 1.3rem;}
.line-height-1 { line-height: 1rem;}
.line-height-1-plain { line-height: 1;}

.icon-inside-table-cell { text-align: center !important; padding: 0 !important; vertical-align: middle !important; height: 30px; width: 30px;
    img {height: 20px; width: 20px;}
}

.font-monospaced { font-family: "JetBrains Mono", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace}
.font-verdana { font-family: 'Verdana', sans-serif; }
.font-jetbrains-mono { font-family: "JetBrains Mono", Monaco, SFMono-Regular, Menlo, Consolas, "Liberation Mono", "Courier New", monospace;}

.text-overflow-ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.italic { font-style: italic; }

.w-10-nowrap {width: 10px; white-space: nowrap;}

.btn-xsm-custom {
    width: 30px;
    height: 23px;
    padding: 0;
    line-height: 0.5;
}

.text-yellow { color: #dbdb37; }

textarea { resize: none; }

.request-cancel-button { position: absolute; top: calc(50% + 40px); left: calc(50% - 50px); width: 100px; margin: 0; z-index: 2;
    text-transform: uppercase; // if we remove this text is not showing.
}
.maximize-testing-tab { position: absolute; top: 0; width: 100%; left: 0; height: calc(100vh - 26px); }
.maximize-testing-panel { position: absolute; width: 100%; top: 0; border: 0; }

// API Testing page related styles
.panel-body-h { height: calc(100vh - 75px); }
.tab-content-h { height: calc(100vh - 80px); }
.tab-content-h-maximize {
    height: calc(100vh - 64px);
    .monaco-code-h { height: calc(100vh - 100px) !important; }
}
.api-list {
    .monaco-code-h { height: calc(100vh - 238px); }
    .index-maker-db-calls { height: calc(100vh - 260px); }
}
.api-list-test-hook {
    .monaco-code-h { height: calc(100vh - 312px - 48px); }
}
.modal-full { max-width: calc(100vw - 100px); }

.table-no-padding {
    td {
        height: 30px;
        padding: 0;
        div { min-height: 30px; padding: .2rem .75rem; }
        div.selected-row { background-color: #2f647357; }
    }
}
.font-label { font-size: .875rem; }

// monaco editor error highlight classes
.highlightMatchedWord { background: yellow !important; color: black !important; font-weight: bold !important; }
.highlightLineHavingError { border-bottom: 1px dashed red; }
.parent-notes-modal .child-notes-grid { height: calc(100% - 10px) !important; }
.prevent-text-selection { user-select: none; }

.logs-collapse-div { background: #3d3d3d; height: 25px; }

.p-tooltip-word-break-all .p-tooltip-text { word-break: break-all; }

.preHookCounter {
    position: absolute;
    right: 0.5em;
    //top: -16px !important;
    rotate: 270deg;
    border-radius: 0.8em;
    background-color: grey;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.8em;
    height: 1.5em;
    min-width: 1.5em;
}

.postHookCounter {
    position: absolute;
    right: -0.5em;
    //top: 13px !important;
    rotate: 90deg;
    border-radius: 0.8em;
    background-color: grey;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.8em;
    height: 1.5em;
    min-width: 1.5em;
}


// delta to html override css
div.delta-to-html {
    .ql-size-huge {
        font-size: xx-large;
    }
    pre {
        display: block;
        font-size: 87.5%;
        color: inherit;
        background: #1d1d1d;
        padding: 10px;
    }

    table, td, th {
        border: 1px solid grey;
        text-align: left;
    }

    table {
        border-collapse: collapse;
        width: 100%;
        display: table;
        box-sizing: border-box;
        text-indent: initial;
        border-spacing: 2px;
        background: #3b3b3b;
        border-color: grey;
    }

    th, td {
        padding: 6px;
    }
    tr:nth-of-type(odd) {
        background: #282828c7;
    }
}

app-fun-man-layout {
    .custom-api-grid-height {
        height: calc(100vh - 82px);
    }
}

app-db-cell-layout {
    app-w-instances {
        .instance-grid-height {
            height: calc(100vh - 94px);
        }
    }

    app-w-databases {
        .database-grid-height {
            height: calc(50vh - 68px);
        }
    }

    app-w-collections {
        .collection-grid-height {
            height: calc(50vh - 68px);
        }
    }
}

app-system-api-layout {
    app-system-api-w {
        .system-api-grid-height {
            height: calc(100vh - 82px);
        }
    }
}

app-tp-api-layout {
    app-w-supported-tp-api {
        .system-api-grid-height {
            height: calc(100vh - 94px)
        }
    }
}

app-event-man-layout {
    app-events-grid {
        .events-grid-height {
            height: calc(100vh - 94px);
        }
    }
}


app-scheduler-man-layout {
    app-scheduler-man-w {
        .schedulers-grid-height {
            height: calc(100vh - 82px);
        }
    }
}

app-web-socket-events-layout-grid {
    app-web-socket-events-grid {
        .ws-events-grid-height {
            height: calc(100vh - 82px);
        }
    }
}

app-logprofile-layout {
    app-w-logprofiles {
        .log-profile-grid-height {
            height: calc(100vh - 94px);
        }
    }
}

app-scanning-periods-layout {
    app-w-scanning-periods {
        .scanning-period-grid-height {
            height: calc(100vh - 94px);
        }
    }
}

app-utility-classes-layout {
    app-utility-classes-list {
        .utility-classes-grid-height {
            height: calc(100vh - 94px);
        }
    }
}

app-notes-layout {
    app-notes-list {
        .notes-grid-height {
            height: calc(100vh - 86px);
        }
    }
    app-notes-form {
        .notes-form-height {
            height: calc(100vh - 94px);
        }
    }
}

app-notes-modal {
    app-notes-list {
        .notes-grid-height {
            height: calc(100vh - 102px);
        }
    }
    app-notes-form {
        .notes-form-height {
            height: calc(100vh - 94px);
        }
    }
}



app-code-finder-modal {
    app-code-finder-w {
        .code-finder-height {
            height: calc(100vh - 72px) !important;
        }
    }
}

app-root {
    app-code-finder-w {
        .code-finder-height {
            height: calc(100vh - 52px);
        }
    }
}

.dropdown-menu { z-index: 1051; }
a { color: #aaa; }

.p-tree-empty-message {
    position: absolute;
    width: 100%;
    text-align: center;
    padding-top: 20px;
}

.json-key {
    color: #9d74af;
}

.json-val {
    color: #6aab73;
}

#svgContainerId {
    svg {
        height: calc(100vh - 88px);
        width: calc(100vw - 20px);
    }
    rect, text { cursor: grab; }
}

.p-datatable-header { padding: 0 !important; }

.width-300 { width: 300px; }
.width-50p { width: 50%; }

.p-datatable.p-datatable-hoverable-rows .p-datatable-tbody>tr:not(.p-highlight):hover {
    background: none !important;
    color: inherit !important;
}

p-radioButton.inline-small-radio {
    .p-radiobutton-label { margin-bottom: 0 !important; }
}

.word-break-all { word-break: break-all; }
div.p-datepicker.p-component { z-index: 1052 !important; }
p-calendar.w-100 {
    span.p-calendar {
        width: 100%;
        input { background-color: #464646; }
    }
}


p-calendar.form-control-sm {
    padding-left: 0;
    input, button {
        height: calc(1.5em + 0.5rem + 2px);
        padding: 0.25rem 0.5rem;
        font-size: 0.8203125rem;
        line-height: 1.5;
        border-radius: 0.2rem;
    }
    input {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }
    button {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }
}

#id_api_maker_deploy_file_upload {
    .p-fileupload-content {
        padding: 10px 0;
        text-align: left;

        .p-fileupload-row {
            div:nth-of-type(1) { display: none; }
            div:nth-of-type(2) { width: 75%; padding: 0 0 0 10px; }
            div:nth-of-type(3) { padding: 0; text-align: center; }
            div:nth-of-type(4) { padding: 0 10px 0 0; width: 74px; }
        }
    }
}

.id_ptree_db_master_config_outline {
    .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler {
        margin-right: 0;
        width: 1.5rem;
        height: 1.5rem;
    }

    .tree-width {
        width: auto;
        .p-tree-container { display: table; } // It expands red highlight of tree item otherwise it doesn't fully expand.
    }
}

p-dropdown .fix-height-issue { height: 29px; }
.grid-pill-custom-api { font-size: x-small; padding: 2px 5px; border-radius: 3px; }
.width-160 { width: 160px; }
.custom-dropdown-panel { width: 400px; }

// ── Table viewer (iframe-based grid) ─────────────────────────────────────────
// Fullscreen-zoom toggle button — absolutely positioned inside the container
.tv-zoom-toolbar {
    position: absolute;
    top: 4px;
    right: 0;
    z-index: 10;
    pointer-events: auto;
}

.tv-zoom-btn {
    width: 2rem;
    height: 22px;
    border: 1px solid hsl(0deg 0% 30.59%);
    //border-radius: 999px;
    border-radius: 3px;
    background: rgb(64 64 64);
    color: #f0f0f0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
    font-size: 12px;

    &:hover {
        background: rgba(52, 58, 64, 0.96);
        border-color: rgba(255, 255, 255, 0.4);
        color: #ffffff;
        transform: translateY(-1px);
    }

    &:focus {
        outline: none;
        box-shadow: 0 0 0 0.15rem rgba(0, 123, 255, 0.35);
    }
}

// Zoomed state: shell covers entire viewport; toolbar stays absolutely positioned
// inside the fixed shell so it anchors to the viewport corner.
.table-viewer-shell--zoomed {
    position: fixed !important;
    inset: 0;
    width: 100%;
    height: 100% !important;
    max-height: 100%;
    z-index: 1080;
    overflow: hidden;

    .tv-zoom-toolbar {
        top: 4px;
        right: 0;
    }

    iframe {
        width: 100%;
        height: 100%;
    }
}

.table-viewer-loader {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(30, 30, 30, 0.85);
    z-index: 10;
    pointer-events: none;

    &__spinner {
        width: 28px;
        height: 28px;
        border: 3px solid rgba(255, 255, 255, 0.15);
        border-top-color: #097BED;
        border-radius: 50%;
        animation: table-viewer-spin 0.7s linear infinite;
    }
}

@keyframes table-viewer-spin { to { transform: rotate(360deg); } }