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

// Pin the root + body font-size so it's identical in both themes (the bootswatch slate/cerulean
// swap would otherwise give dark and light different base sizes; rem-based sizes then diverge).
html { font-size: 16px !important; }
body {
    min-width: $min-width;
    font-size: $font-size !important; // 0.875rem — same base text size in dark & light
    line-height: 1.5 !important;
}

// Use one consistent font family in BOTH themes (the bootswatch slate/cerulean swap would
// otherwise give dark and light different default fonts). Matches the dark-mode font stack.
body,
.navbar, .nav-link, .dropdown-item, .btn, .card, .modal, .form-control,
input, button, select, textarea, .p-component {
    font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
}
// keep monospaced contexts (code/editors) monospace
.font-monospaced, .font-jetbrains-mono, code, pre, .p-inputtext.font-monospaced {
    font-family: "JetBrains Mono", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
}

/* Text selection — brand-blue highlight, readable in both themes. */
::-moz-selection { background: rgba(12, 83, 164, 0.28); color: inherit; }
::selection { background: rgba(12, 83, 164, 0.28); color: inherit; }

* { scrollbar-width: thin; } /* Firefox: thin scrollbars everywhere */
::-webkit-scrollbar { width: 4px; height: 4px; }

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

/* Handle — New UI standard: muted brand blue -> green gradient thumb (subdued, not bright) */
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #1b3a5c 0%, #18424a 55%, #1a4d33 100%);
    border-radius: 10px;
}

/* Handle on hover — slightly brighter brand gradient */
::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #245f9f 0%, #1d6a5a 55%, #1d6d44 100%);
}

/* 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;
    // New UI standard: brand-blue border + subtle navy fill on the small icon action buttons.
    border: 1px solid rgba(97, 175, 239, 0.25);
    background-color: rgba(97, 175, 239, 0.06);
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.btn-xsm-custom:hover,
.btn-xsm-custom:focus {
    border-color: rgba(97, 175, 239, 0.6);
    background-image: linear-gradient(135deg, rgba(12, 83, 164, 0.30) 0%, rgba(0, 137, 63, 0.20) 100%);
    background-color: rgba(12, 83, 164, 0.20);
}

.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 - 80px); }
.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;
}

.hook-count-cell .hook-add-icon { opacity: 0; font-size: 10px; transition: opacity 0.15s; }
tr:hover .hook-count-cell .hook-add-icon { opacity: 1; }

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 rgba(97, 175, 239, 0.28);
    border-radius: 3px;
    // Brand navy surface (matches the table-viewer's own toolbar buttons and
    // the app's brand panels) instead of a flat grey that clashed.
    background: #22324a;
    color: #e6ebf2;
    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(12, 83, 164, 0.55);
        border-color: rgba(97, 175, 239, 0.5);
        color: #ffffff;
        transform: translateY(-1px);
    }

    &:focus {
        outline: none;
        box-shadow: 0 0 0 0.15rem rgba(12, 83, 164, 0.35);
    }
}

// LIGHT theme — brand light surface (matches the app light theme), so the zoom
// button no longer stays dark grey over the light table viewer.
html.LIGHT .tv-zoom-btn {
    background: #eef3fa;
    border-color: rgba(12, 83, 164, 0.30);
    color: #1b2330;

    &:hover {
        background: #e3eaf3;
        border-color: rgba(12, 83, 164, 0.5);
        color: #0C53A4;
    }
}

// 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;
    // Brand navy surface (matches the table-viewer's own background + the
    // Monaco editor loader), instead of a flat grey.
    background: rgba(14, 23, 38, 0.92);
    z-index: 10;
    pointer-events: none;

    &__spinner {
        width: 28px;
        height: 28px;
        border: 3px solid rgba(97, 175, 239, 0.18);
        border-top-color: #61AFEF;
        border-radius: 50%;
        animation: table-viewer-spin 0.7s linear infinite;
    }
}

// LIGHT theme — cool-white surface + brand-blue spinner (matches the
// table-viewer light background).
html.LIGHT .table-viewer-loader {
    background: rgba(251, 252, 254, 0.92);

    .table-viewer-loader__spinner {
        border: 3px solid rgba(12, 83, 164, 0.18);
        border-top-color: #0C53A4;
    }
}

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

// Brand hero background for dashboard pages (same as the auth/login screen):
// blue (top-left) -> dark navy -> green (bottom-right) with faint diagonal light streaks.
// Applied to each dashboard route's host element so it sits behind all dashboard content.
app-dash-root,
app-am-welcome,
app-dash-summary,
app-dash-dev,
app-redis-dashboard,
app-ext-licenses {
    display: block;
    position: relative;
    min-height: calc(100vh - 44px);
    background-color: #080c12;
    background-image:
        repeating-linear-gradient(135deg, transparent 0 140px, rgba(97, 175, 239, 0.04) 140px 141px, transparent 141px 320px),
        radial-gradient(120% 110% at 100% 100%, rgba(0, 137, 63, 0.45) 0%, rgba(0, 137, 63, 0) 55%),
        radial-gradient(120% 110% at 0% 0%, rgba(12, 83, 164, 0.55) 0%, rgba(12, 83, 164, 0) 55%),
        linear-gradient(135deg, #0c1626 0%, #0a1018 45%, #08120c 100%);
    background-repeat: no-repeat;
    background-attachment: fixed;
}
/* square-box grid over the dashboard host gradients (the global body grid is hidden behind them) */
app-dash-root::before,
app-am-welcome::before,
app-dash-summary::before,
app-dash-dev::before,
app-redis-dashboard::before,
app-ext-licenses::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image:
        linear-gradient(to right, rgba(97, 175, 239, 0.10) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(97, 175, 239, 0.10) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 78%);
    mask-image: radial-gradient(ellipse at center, black 30%, transparent 78%);
}
/* LIGHT theme: light brand gradient + grid for the dashboard hosts */
html.LIGHT {
    app-dash-root, app-am-welcome, app-dash-summary, app-dash-dev, app-redis-dashboard, app-ext-licenses {
        background-color: #eef2f7;
        background-image:
            repeating-linear-gradient(135deg, transparent 0 140px, rgba(12, 83, 164, 0.03) 140px 141px, transparent 141px 320px),
            radial-gradient(120% 110% at 100% 100%, rgba(0, 137, 63, 0.10) 0%, rgba(0, 137, 63, 0) 55%),
            radial-gradient(120% 110% at 0% 0%, rgba(12, 83, 164, 0.12) 0%, rgba(12, 83, 164, 0) 55%),
            linear-gradient(135deg, #eef3f9 0%, #f4f6f9 45%, #eef5f0 100%);
    }
    app-dash-root::before, app-am-welcome::before, app-dash-summary::before,
    app-dash-dev::before, app-redis-dashboard::before, app-ext-licenses::before {
        background-image:
            linear-gradient(to right, rgba(12, 83, 164, 0.07) 1px, transparent 1px),
            linear-gradient(to bottom, rgba(12, 83, 164, 0.07) 1px, transparent 1px);
    }
}

/* ---- PrimeNG p-toast: brand-tinted glassy notifications (New UI standard) ---- */
.p-toast .p-toast-message {
    background: rgba(16, 26, 40, 0.55) !important;
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    border: 1px solid rgba(97, 175, 239, 0.30) !important;
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45) !important;
    color: #e6ebf2 !important;
}
.p-toast .p-toast-message .p-toast-message-content { color: #e6ebf2 !important; align-items: center; }
.p-toast .p-toast-summary { color: #ffffff !important; }
.p-toast .p-toast-detail { color: #eef2f7 !important; }
.p-toast .p-toast-message-icon,
.p-toast .p-toast-icon-close { color: #ffffff !important; }
.p-toast .p-toast-icon-close:hover { background: rgba(97, 175, 239, 0.15) !important; }
/* per-severity accent: brand info/success + semantic warning/error, glassy */
.p-toast .p-toast-message-info { background-image: linear-gradient(135deg, rgba(12, 83, 164, 0.30) 0%, rgba(16, 26, 40, 0) 70%) !important; border-color: rgba(97, 175, 239, 0.45) !important; }
.p-toast .p-toast-message-success { background-image: linear-gradient(135deg, rgba(0, 137, 63, 0.30) 0%, rgba(16, 26, 40, 0) 70%) !important; border-color: rgba(38, 180, 127, 0.45) !important; }
.p-toast .p-toast-message-warn { background-image: linear-gradient(135deg, rgba(229, 192, 123, 0.24) 0%, rgba(16, 26, 40, 0) 70%) !important; border-color: rgba(229, 192, 123, 0.45) !important; }
.p-toast .p-toast-message-error { background-image: linear-gradient(135deg, rgba(224, 108, 117, 0.26) 0%, rgba(16, 26, 40, 0) 70%) !important; border-color: rgba(224, 108, 117, 0.50) !important; }


.p-datatable .p-datatable-thead>tr>th { border: none !important; }

/* Icon-only buttons: keep the per-action icon colour from btn-outline-*,
   but drop the outlined box (no border / background / shadow). The icon still
   inherits the variant's colour, and hover just brightens the icon. */
.btn-icon-only {
    border: none !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    // Fixed square box + centered icon so every button is exactly the same
    // size regardless of the glyph's intrinsic height (fa-plus / fa-save are
    // taller than fa-minus / fa-check, which otherwise stretched the box).
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0 !important;
    line-height: 1 !important;
    vertical-align: middle;

    i.fa, i.fas, i.far, i.fab {
        font-size: 13px;
        line-height: 1;
    }

    &:hover, &:focus, &:active {
        border: none !important;
        background: transparent !important;
        background-image: none !important;
        box-shadow: none !important;
    }

    &:disabled, &.disabled { opacity: 0.4; }
}

/* Keep the icon its variant colour on hover instead of the filled-state white
   that btn-outline-*:hover applies. Doubled class (.btn-icon-only.btn-outline-*)
   raises specificity above that global rule regardless of bundle load order. */
.btn-icon-only.btn-outline-danger,
.btn-icon-only.btn-outline-secondary,
.btn-icon-only.btn-outline-success,
.btn-icon-only.btn-outline-info,
.btn-icon-only.btn-outline-primary,
.btn-icon-only.btn-outline-light {
    &:hover, &:focus, &:active {
        i.fa, i.fas, i.far, i.fab { color: inherit !important; filter: brightness(1.3); }
    }
}