/* Copyright (c) 2021, 2023, Oracle and/or its affiliates. */

/*
    Description:
        HeatWave Cloud Service style definitions
*/

:root {
    --hcs-color-soft: #444;
    --hcs-default-font-weight: 400;
    --hcs-light-font-weight: 200;
    --hcs-bold-font-weight: 600;
    --hcs-default-spacing: var(--oj-core-spacing-4x);
    --hcs-default-collection-border-color: var(--oj-collection-border-color);
    --hcs-default-overlay-border-color: var(--oj-panel-border-color);
    --hcs-secondary-background-color: var(--oj-core-neutral-secondary-1);

    --hcs-delete-rgb: 228, 0, 30;
    --hcs-delete-rgb-hover: 240, 0, 30;

    --oj-panel-padding: 0rem;
    --oj-form-layout-start-edge-label-text-align: start;

    --hcs-strip-bg-height: 15px;
    --hcs-navbar-height: 58px;

    --hcs-page-content-padding-top: calc(var(--hcs-default-spacing) + var(--hcs-strip-bg-height));
    --hcs-page-content-padding-bottom: calc(var(--hcs-default-spacing) + var(--hcs-navbar-height));
    --hcs-page-content-margin-horizontal: 24px;
    --hcs-page-content-sign-in-max-width: 1200px;
    --hcs-page-content-max-width: 2400px;

    --hcs-banner-height: 160px;
    --hcs-banner-content-height: 100px;
    --hcs-background-color: #f5f4f2;
    --hcs-banner-color: #fcfbfa;

    --hcs-panel-spacing-compact: var(--oj-core-spacing-3x);

    --hcs-collection-spacing: var(--hcs-default-spacing);

    --hcs-overlay-bottom-spacing: var(--hcs-panel-spacing-compact);
    --hcs-overlay-bottom-header-spacing: var(--hcs-panel-spacing-compact);

    --hcs-overlay-width-sm: 800px;
    --hcs-overlay-width-md: 1200px;
    --hcs-overlay-width-lg: 1800px;
    --hcs-page-content-height: calc(100vh - var(--hcs-banner-content-height) - var(--hcs-navbar-height) - 1px);
    --hcs-page-content-children-height: calc(var(--hcs-page-content-height) - var(--hcs-page-content-padding-top));
    --hcs-drawer-min-height: 44px;
    --hcs-drawer-margin-top: 0;

    --hcs-drawer-width: 60px;
    --hcs-drawer-horizontal-margin: calc(50% - var(--hcs-drawer-width) / 2);

    --hcs-background-color-white: white;

    --oj-label-color: var(--oj-core-text-color-secondary);

    --hcs-success-color: rgb(var(--oj-palette-success-rgb-100));
    --hcs-pending-color: rgb(var(--oj-palette-warning-rgb-60));
    --hcs-error-color: rgb(var(--oj-palette-danger-rgb-100));
    --hcs-deleted-color: rgb(var(--oj-palette-neutral-rgb-60));
}

html {
    font-family: 'Oracle Sans', sans-serif, var(--oj-html-font-family);
}

body {
    overflow-y: hidden !important;
}

.oj-offcanvas-glasspane.oj-offcanvas-glasspane-dim {
    /* Make sure the glass pane appears below the off canvas which both have the same z-index */
    z-index: calc(var(--oj-private-core-z-index-off-canvas) - 1);
}

.hcs-no-pointer-events {
    pointer-events: none;
}

.hcs-collapsible-header-color {
    color: var(--oj-core-text-color-secondary);
}

.hcs-loading-skeleton-text {
    height: 20px;
    width: 100%;
    background-color: var(--oj-animation-skeleton-bg-end-color);
}

.hcs-loading-skeleton-text:not(:last-child) {
    margin-bottom: var(--oj-core-spacing-4x);
}

.hcs-loading-skeleton-block {
    height: 100%;
    width: 100%;
    background-color: var(--oj-animation-skeleton-bg-end-color);
}

.hcs-panel-text {
    font-size: 0.875rem;
    margin-top: 0.125rem !important;
    padding-bottom: 0.125rem !important;
    min-height: 1rem !important;
}

.hcs-ancillary-text {
    font-size: 0.75rem;
}

.hcs-page-content {
    width: calc(100% - 2 * var(--hcs-page-content-margin-horizontal));
    max-width: var(--hcs-page-content-max-width) !important;
    padding: var(--hcs-default-spacing);
    padding-top: var(--hcs-page-content-padding-top);
    padding-bottom: 0;
    height: var(--hcs-page-content-height);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-style: none;
    border: 0;
}

.hcs-page-content-max-height {
    max-height: var(--hcs-page-content-children-height) !important;
}

.hcs-overflow-auto {
    overflow: auto !important;
}

.hcs-drawer-container.hcs-empty-state {
    display: none;
}

.hcs-table-no-bottom-border {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-bottom: 0 !important;
}

.hcs-table {
    width: 100%;
    border-radius: var(--oj-panel-border-radius);
}

.hcs-table-grid-borderless {
    border: none !important;
}

.hcs-min-h-0 {
    min-height: 0;
}

.hcs-callout-card {
    padding: var(--hcs-default-spacing);
    max-width: 1000px;
}

.hcs-callout-card p {
    font-size: 1rem;
    line-height: 1.5;
}

.hcs-page-header {
    font-weight: var(--hcs-default-font-weight);
    max-width: 600px;
}

.hcs-progress-text {
    font-size: 14px;
}

.hcs-ellipsed-text {
    /* Use a separate styling rule to set maximum text length */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.hcs-callout-card h4 {
    font-weight: var(--hcs-default-font-weight);
}

.hcs-strip-bg {
    background-image: url(css/images/3834518d98f61aa3ed58.png);
    background-size: auto var(--hcs-strip-bg-height);
    background-repeat: repeat-x;
}

.hcs-center {
    margin-left: auto;
    margin-right: auto;
}

.hcs-module-content-wrapper {
    width: 100%;
    min-height: 85vh;
}

.hcs-destructive-button {
    /* SOLID */
    /* solid enabled */
    --oj-button-solid-chrome-bg-color: rgb(var(--hcs-delete-rgb));
    --oj-button-solid-chrome-border-color: transparent;
    --oj-button-solid-chrome-text-color: var(--oj-core-neutral-contrast);

    /* solid hover */
    --oj-button-solid-chrome-bg-color-hover: rgb(var(--hcs-delete-rgb-hover));
    --oj-button-solid-chrome-border-color-hover: transparent;
    --oj-button-solid-chrome-text-color-hover: var(--oj-core-neutral-contrast);

    /* solid active */
    --oj-button-solid-chrome-bg-color-active: rgb(var(--hcs-delete-rgb));
    --oj-button-solid-chrome-border-color-active: transparent;
    --oj-button-solid-chrome-text-color-active: var(--oj-core-neutral-contrast);

    /* OUTLINED */
    /* outlined enabled */
    --oj-button-outlined-chrome-text-color: rgb(var(--hcs-delete-rgb));

    /* outlined hover */
    --oj-button-outlined-chrome-text-color-hover: rgb(var(--hcs-delete-rgb-hover));

    /* outlined active */
    --oj-button-outlined-chrome-text-color-active: rgb(var(--hcs-delete-rgb));
}

oj-option:not(.oj-disabled) .hcs-delete-button-text {
    color: rgb(var(--hcs-delete-rgb));
}

oj-option.oj-disabled .hcs-delete-button-text {
    color: var(--oj-core-text-color-disabled);
}

.hcs-loading > div {
    display: flex;
    flex-direction: column !important;
    align-items: center !important;
}

oj-table .hcs-loading {
    display: flex;
    flex-direction: column !important;
    align-items: center !important;
    height: 100%;
}

oj-table .hcs-loading > div {
    width: 45%; /* used in case progress bar is used as spinner */
    padding: calc(var(--oj-core-spacing-12x)) 0;
}

.hcs-content-container .hcs-loading .oj-progress-circle-indeterminate-inner {
    border-color: #999;
}

oj-table .hcs-no-data-template {
    height: 100%;
    color: rgb(var(--oj-palette-neutral-rgb-120));
}

oj-table .hcs-no-data-template > div {
    display: flex;
    flex-direction: column !important;
    align-items: center !important;
    padding: calc(var(--oj-core-spacing-12x)) 0;
}

oj-table oj-progress-bar {
    width: 100%;
}

oj-table .hcs-no-data-template .hcs-heading {
    font-size: 115% !important;
}

oj-table .hcs-no-data-template .hcs-subtitle {
    margin-top: var(--oj-core-spacing-1x);
    line-height: 1.75rem !important;
}

.hcs-disabled,
oj-table.hcs-empty-state thead tr th,
oj-table.hcs-empty-state thead tr th .oj-default.oj-clickable-icon-nocontext {
    color: var(--oj-core-text-color-disabled) !important;
}

oj-table.hcs-empty-state thead tr th .oj-hover {
    color: var(--oj-core-text-color-disabled) !important;
    background-color: inherit !important;
}

oj-table .hcs-empty-state {
    height: 100%;
}
/** Centered vertically large **/

oj-table .hcs-empty-state {
    height: 100%;
}

oj-table .hcs-empty-state > div {
    margin: 0 var(--oj-core-spacing-8x);
}

oj-table .hcs-empty-state .hcs-heading {
    padding-top: calc(var(--oj-core-spacing-10x) * 2) !important;
    font-size: 200% !important;
    font-weight: var(--hcs-bold-font-weight) !important;
}

oj-table .hcs-empty-state .hcs-subtitle {
    margin-top: var(--oj-core-spacing-2x);
    font-size: 125% !important;
    line-height: 1.75rem !important;
}

/** Centered horizontally **/
/* oj-table .hcs-no-data-template {
    display: flex;
    flex-direction: column !important;
    align-items: center !important;
    margin-top: var(--oj-core-spacing-12x);
}

oj-table .hcs-empty-state-heading {
    font-size: 115% !important;
    line-height: 2.75rem !important;
}

oj-table .hcs-empty-state > div {
} */

.hcs-text-preserve-whitespace {
    white-space: pre-wrap;
}

.hcs-wrap-text-break-word {
    overflow-wrap: break-word;
}

.hcs-word-break {
    word-break: break-word;
}

.hcs-wrap-text {
    white-space: normal;
}

.hcs-feature-disabled-text {
    color: var(--oj-core-danger-3);
}

.hcs-heading-text {
    margin-top: 0;
    margin-bottom: 0;
    font-weight: var(--hcs-default-font-weight);
}

.hcs-heading-paragraph-weight {
    font-size: 10pt;
    font-weight: var(--hcs-default-font-weight);
}

.workspaces-query-editor-connection-field,
.heatwave-ml-connection-field {
    color: #808080;
    padding-right: 1.5rem;
}

.hcs-query-status-text {
    font-size: 10pt;
}

.hcs-query-status-icon {
    margin-right: 0.25rem;
}

.hcs-query-results {
    height: calc(100% - 122px);
}

.hcs-sidebar {
    overflow: auto;
    max-height: var(--hcs-page-content-children-height);
}

.hcs-sidebar-title-wrapper {
    padding-bottom: var(--hcs-default-spacing);
}

.hcs-sidebar-title {
    font-size: 20pt;
    font-weight: var(--hcs-light-font-weight);
}

.hcs-panel-stack .hcs-panel + .hcs-panel {
    margin-top: var(--hcs-default-spacing);
}

.hcs-panel-header {
    padding: var(--hcs-default-spacing);
}

.hcs-panel-header.hcs-panel-header-no-horizontal-padding {
    padding-left: 0;
    padding-right: 0;
}

.hcs-panel-header.hcs-panel-header-no-padding-bottom {
    padding-bottom: 0;
}

.hcs-panel-header.hcs-panel-header-no-padding-top {
    padding-top: 0;
}

.hcs-panel-header-text {
    font-size: 112.5%;
    font-weight: var(--hcs-bold-font-weight);
    margin: 0;
}

.hcs-panel-header-text-lg {
    font-size: 125%;
    font-weight: var(--hcs-default-font-weight);
    margin: 0;
}

.hcs-section-header-text {
    margin: var(--hcs-default-spacing) 0;
    font-weight: var(--hcs-default-font-weight);
}

.hcs-panel-content {
    padding: var(--hcs-default-spacing);
}

.hcs-panel-content.hcs-panel-content-no-horizontal-padding {
    padding-left: 0;
    padding-right: 0;
}

.oj-form-layout .hcs-panel-content {
    padding-bottom: 0;
}

.hcs-panel .hcs-panel-header + .hcs-panel-content,
.hcs-panel.hcs-panel-compact .hcs-panel-header + .hcs-panel-content {
    padding-top: 0;
}

.hcs-panel.hcs-panel-compact .hcs-panel-header {
    padding: var(--hcs-panel-spacing-compact);
}

.hcs-panel.hcs-panel-compact .hcs-panel-content {
    padding: var(--hcs-panel-spacing-compact);
}

.hcs-panel .non-form-layout-container > :not(:last-child) {
    padding-bottom: var(--oj-core-spacing-4x);
}

.hcs-panel-message {
    margin: var(--hcs-default-spacing);
    margin-top: 0;
}

.hcs-panel-summary-header-text {
    font-size: 100%;
    font-weight: var(--hcs-bold-font-weight);
    margin: 0;
}

.hcs-collection-controls {
    margin-bottom: var(--hcs-collection-spacing);
}

.hcs-collection-controls oj-toolbar {
    padding: 0;
}

.hcs-flex-grow {
    flex: 1 0 auto;
}

.hcs-flex-shrink {
    flex: 0 1 auto;
}

.hcs-flex-0-basis {
    flex: 1 1 0;
}

.hcs-column-flex {
    display: flex;
    flex-flow: column;
}

.hcs-scrollable-overflow {
    overflow: scroll !important;
}

.hcs-overflow-hidden {
    overflow-y: hidden !important;
}

/*
    Overwrite extra spacing for oj-form-layout to make consistent with assistance-inline-container css rules.
*/
.oj-form-layout .oj-form .oj-flex .oj-flex-item {
    margin-bottom: 0.125rem !important;
}

.hcs-form-layout-disabled .oj-flex + .oj-flex {
    margin-top: 10px;
}

.hcs-nvp-stack oj-label:not(:first-child),
.hcs-nvp-stack .oj-form .oj-flex:not(:first-child) oj-label {
    margin-top: var(--hcs-default-spacing);
}

.hcs-offcanvas {
    --oj-current-bg-color: rgb(var(--oj-palette-neutral-rgb-0));
    background-color: rgb(var(--oj-palette-neutral-rgb-10));
    overflow-y: hidden;
}

.hcs-overlay-sm {
    width: min(var(--hcs-overlay-width-sm), 100vw);
}

.hcs-overlay-md {
    width: min(var(--hcs-overlay-width-md), 100vw);
}

.hcs-overlay-lg {
    width: min(var(--hcs-overlay-width-lg), 100vw);
}

.hcs-overlay-panel-stack {
    padding: 0 var(--hcs-default-spacing);
    z-index: 0;
}

.hcs-overlay-bottom-header {
    margin: 0;
    padding: var(--hcs-overlay-bottom-header-spacing);
}

.hcs-overlay-bottom-header-text {
    font-weight: var(--hcs-bold-font-weight);
    margin: 0;
}

.hcs-overlay-bottom-content {
    padding: var(--hcs-overlay-bottom-spacing);
    padding-top: 0;
}

.hcs-overlay-bottom-empty {
    padding: var(--hcs-overlay-bottom-spacing);
}

.hcs-action-layout-footer-buttons oj-button + oj-button {
    margin-left: var(--oj-core-spacing-4x) !important;
}

.hcs-collection {
    border: 1px solid var(--hcs-default-collection-border-color);
}

.hcs-collection-compact {
    max-height: 20rem;
}

.hcs-full-parent-width {
    width: 100%;
}

.hcs-full-parent-height {
    height: 100% !important;
}

.hcs-no-line-height {
    line-height: 0 !important;
}

/*
    The following assistance-inline-container css rules are used as a workaround to force inputs to use user-assistance as 'efficient' instead of 'reflow'.
    From oj-form-layout docs:
    efficient: messages, help, hints, and required are all shown inline under the field with reserved space underneath.
    Note: Ideally oj-form-layout will cascade this value to its children, currently not supported.
*/
oj-form-layout .oj-user-assistance-inline-container,
oj-form-layout .oj-user-assistance-inline-container.oj-reflow:empty {
    margin-top: 0.125rem !important;
    padding-bottom: 0.125rem !important;
    min-height: 1rem !important;
}

oj-form-layout .oj-user-assistance-inline-container .oj-helphints-inline-container {
    padding-bottom: 0 !important;
}

.hcs-label .oj-label-group {
    width: 100%;
}