@use 'vars' as v;
@use '../main';

body {
    font-family: Roboto, 'Helvetica Neue', sans-serif;
    margin: 0;
    background-color: var(--p3xr-body-bg, #303030);
    color: var(--mat-app-text-color, rgba(255, 255, 255, 0.87));
}

body.p3xr-no-main-scroll {
    overflow: hidden;

    .p3xr-layout-content, .p3xr-layout-content-electron {
        overflow: hidden !important;
        top: v.$toolbar-height !important;
        bottom: v.$toolbar-height !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    .p3xr-monitoring-shell-content {
        overflow: hidden !important;
    }
}

// Scrollbar theming — color-scheme tells the browser to use native dark/light scrollbars
body.p3xr-theme-dark {
    color-scheme: dark;
}

body.p3xr-theme-light {
    color-scheme: light;
}

[data-color-scheme="dark"] {
    color-scheme: dark;
}

[data-color-scheme="light"] {
    color-scheme: light;
}

// Global link color — light blue in dark mode for visibility
a {
    color: var(--p3xr-link-color, #1a73e8);
}

// Reset MDC typography letter-spacing to use Roboto's natural kerning
:root {
    --mat-toolbar-title-text-tracking: normal;
    --mat-toolbar-title-text-letter-spacing: normal;
    --mdc-list-list-item-label-text-tracking: normal;
    --mdc-list-list-item-supporting-text-tracking: normal;
    --mdc-filled-button-label-text-tracking: normal;
    --mdc-text-button-label-text-tracking: normal;
    --mdc-outlined-button-label-text-tracking: normal;
    --mdc-tab-indicator-active-indicator-letter-spacing: normal;
    --mat-tab-header-label-text-tracking: normal;
    --mat-menu-item-label-text-tracking: normal;
    --mat-option-label-text-tracking: normal;
    --mat-select-trigger-text-tracking: normal;
    --mat-form-field-container-text-tracking: normal;
}

*, *::before, *::after {
    letter-spacing: normal !important;
}

// Allow MDC list item text to wrap and list items to grow in height
.mat-mdc-list-item {
    height: auto !important;
    min-height: 48px;
}

.mdc-list-item__primary-text {
    white-space: normal !important;
    text-overflow: unset !important;
    overflow: visible !important;
}

#adsbygoogle-container {
    position: fixed;
    bottom: 55px;
    right: 10px;
    z-index: 3;
}

.md-button {
    border-radius: v.$border-radius;
}

md-toast {
    position: fixed !important;
}

.p3xr-connected-readonly-filler {
    height: 40px;
}

md-dialog.fullscreen-dialog {
    width: 75%;
}

@media (max-width:959px) {
    md-dialog.fullscreen-dialog {
        min-height: 100%;
        min-width: 100%;
        border-radius: 0;
        md-dialog-content {
            height: 100vh;
            md-content {
                height: 100%;
            }
        }
    }


}



button > md-icon {
    position: relative;
    top: -1px;
}

/*
md-dialog md-dialog-actions {
    display: flex;
    flex-flow: row-reverse;
    justify-content: right;
}

md-dialog md-dialog-actions button {
}
 */

 .p3xr-animation {
 }

.p3xr-theme-light {

    fieldset {
        border-color: rgba(0, 0, 0, 0.5);
    }

}

.p3xr-theme-dark {

    fieldset {
        border-color: rgba(255, 255, 255, 0.25);
    }

    ::selection {
        color: white;
        background: black;
    }
    ::-moz-selection {
        color: white;
        background: black;
    }

}



md-toolbar, .md-toolbar-tools {
    height: v.$toolbar-height !important;
    min-height: v.$toolbar-height !important;
    max-height: v.$toolbar-height !important;
}

body.p3xr-no-animation * {
    //transition: none;
    // weird fix
    transition: none !important;

    // md-backdrop.md-opaque.ng-enter fix
    md-backdrop.md-opaque.ng-enter {
        opacity: 0.48;
    }
}

#p3xr-redis-ui-bootstrap {
    height: 100vh;
}

.fa, .fas, .fab, far, .svg-inline--fa {
    transform: scale(1.5);
    margin-right: 5px !important;
    margin-left: 5px !important;
}

[ng-click] {
    cursor: pointer;
}

.md-button {
    min-width: auto;
}

.p3xr-md-input-container-no-bottom {
    margin-bottom: 0px;
    padding-bottom: 0px;
}

.p3xr-md-input-container-no-top {
    margin-top: 0px;
    padding-top: 0px;
}

.p3xr-md-input-container-bottom-info {
    font-size: 12px !important;
    color: rgba(0, 0, 0, 0.54) !important;
}
body.p3xr-theme-dark .p3xr-md-input-container-bottom-info {
    color: rgba(255, 255, 255, 0.7) !important;
}

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


.p3xr-theme-light {

    /*
    .p3xr-input {
      border-color: rgba(128, 128, 128, 0.5);
    }
    */

    json-tree .key {
        color: black;
        font-weight: bold;
    }

    .p3xr-md-menu-item-selected {
        background-color: rgba(0, 0, 0, 0.1) !important;
    }

}

.p3xr-theme-dark {

    .p3xr-md-menu-item-selected {
        background-color: rgba(255, 255, 255, 0.1) !important;
    }

    json-tree .key {
        color: rgba(255, 255, 255, 0.6);
        font-weight: bold;
    }

    ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
        color: rgba(255, 255, 255, 0.75);
    }

    /*
    .p3xr-input {
      background-color: gray;
      color: white;
      border-color: rgba(200, 200, 200, 0.5);
    }
    */
}

.p3xr-pre {
    font-family: 'Roboto Mono' !important;
    //font-weight: 500;
    font-size: 16px;
    line-height: 18px;
    overflow: hidden !important;
    //white-space: pre;
    white-space: pre-wrap;
    //word-wrap: break-word !important;
    //overflow-wrap: break-word !important;
   // white-space: pre-wrap;
    word-spacing: 0px;
    //white-space: text-wrap;

}

.p3xr-not-selectable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.p3x-margin-height {
    margin-bottom: v.$layout-padding;
}


input {
    font-family: 'Roboto' !important;
//    font-weight: 500;
}

textarea {
    font-family: 'Roboto Mono' !important;
}


treecontrol {
    font-family: 'Roboto Mono' !important;
    font-weight: 500 !important;
}

md-input-container.p3xr-md-input-container-no-bottom div.md-errors-spacer {
    min-height: 0px;
}


.p3xr-roboto-monospace * {
    font-family: 'Roboto Mono' !important;
    font-weight: 500 !important;
}

.p3xr-padding {
    padding: 8px;
}

.md-tooltip {
    background-color: black !important;
    color: white !important;
}

.md-raised:focus {
    outline: -webkit-focus-ring-color auto 1px;
}