/**
 * Style sheet for overriding and extending the default styles.
 * DO NOT MODIFY THE ORIGINAL STYLES FROM DESIGNERS! Use this file instead.
 */

:root {
  --color-form-text-error: var(--color-cluster-main-text-error);
  --color-form-border-error: var(--color-cluster-main-border-error);
  --color-cluster-type-passive-bg: var(--color-light-teal);
  --color-cluster-type-active-bg: var(--color-main-blue);
}

#header .cluster_shortcuts A .text {
  margin-left: 0.5em;
}

#notifications .sidebar .content {
  height: 100%;
  overflow-y: auto;
}

#main {
  padding-bottom: 10rem;
}

.node_dropdown_popup {
  /* different html structure displaces the dropdown, altered VS design */
  transform: translate(2em, 1.8em);
}
.dropdown_menu .dropdown .popup UL LI A,
.node_dropdown_popup UL LI A {
  text-transform: capitalize;
}

.cluster .main .item.name A {
  color: inherit;
}
.cluster .main .item.error {
  max-width: 100%;
  flex: 1 0 75%;
}
.cluster.edit.error > .inner {
  display: block;
}

/* fix differing directory structure. */
BODY:has(#main.login) {
  background-image: url(../images/login_bg.svg);
}

#main.configuration .users-table A.icon {
  display: inline-block;
  height: 1.5em;
  color: var(--color-datatable-text);
}

INPUT[TYPE="number"]::-webkit-outer-spin-button,
INPUT[TYPE="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

INPUT[type="number"] {
  background: transparent;
  border-radius: 1.125em;
  border: none;
  color: var(--color-form-text);
  font: 1rem/2.25 var(--font-family);
  outline: none;
  padding: 0 1.125em;
  width: 100%;
  -webkit-appearance: none;
  -moz-appearance: textfield;
}

#main .form .section .title {
  cursor: pointer;
}

#main .form .section.error .field-content:has(INPUT:invalid) {
  border-color: var(--color-form-border-error);
}

#main .form .section.error:not(.active) .title {
  color: var(--color-form-text-error);
}

#main FORM .form-item INPUT[type="text"]:disabled,
#main FORM .form-item TEXTAREA:disabled {
  background-color: transparent;
  color: var(--color-blue-grey-500);
  cursor: not-allowed;
}

BODY #main.login FORM .form-item .field-content {
  background: var(--color-form-bg);
  border: 1px solid var(--color-form-border);
}

.grayout .icon {
  opacity: 0.6; /* Real browsers */
  filter: alpha(opacity = 60); /* MSIE */
}

.cluster .main .item.namespace {
  text-decoration: none;
  cursor: pointer;
}

/**
 * Fix text content overflowing the popup.
 */
.w_info_popup .info_popup .popup,
.w_popup .popup {
  width: auto;
  min-width: 12vh;
}

/**
 * Warning error only happens when we manually add a cluster state.
 * Hijack it to do some overrides to display a pending connection state.
 */
.cluster.status_warning.error .main {
  background: var(--color-cluster-main-bg);
  border-color: var(--color-cluster-main-border);
}

.cluster.status_warning.error .main .item.status.red .content {
  color: var(--color-yellow);
}

.cluster.status_warning.error .main .type_plate {
  display: block;
}

/**
 * Apply minimum width to columns which change values rapidly.
 * Mitigates table jittering when values change.
 * Remove when we have a full restyle
 */
.datatable TABLE TH.relative,
.datatable TABLE TD.relative,
.datatable TABLE TH.seq_number,
.datatable TABLE TD.seq_number,
.datatable TABLE TH.min_stored,
.datatable TABLE TD.min_stored {
  min-width: 60px;
}

.cluster.error > .main .item.namespace {
  display: block;
}

#main .form.cluster_form .test_connection .result {
  width: 50vw;
  height: 100%;
  text-wrap: wrap;
}
#main .form.cluster_form .test_connection .result.active {
  top: 0;
  z-index: 10;
}

.info_popup .connections_label {
  text-wrap: nowrap;
  font-size: 0.85em;
  font-weight: bold;
}

.info_popup TABLE {
  width: 100%;
}

#header .search .icon_clear {
  position: absolute;
  right: 0.75em;
  top: 48%;
  transform: translateY(-50%);
  z-index: 100;
  cursor: pointer;
  transition: opacity 0.2s, visibility 0.2s;
}
#header .search:not(:has(INPUT[type=text]:focus)) .icon_clear {
	visibility: hidden;
	opacity: 0;
}

.login .error .message {
  color: #ffffff;
}

.loading-text {
	color: var(--color-blue-grey-1100);
}

/* Add cluster button in the dashboard widgets screen */
.dashboard .content .tn_wr {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Hide token info when sidebar is collapsed (content overflow) */
BODY:not(.sidebar_expanded) .hidden_on_collapse {
  display: none;
}

BODY:not(.sidebar_expanded):has(#sidebar:hover) .hidden_on_collapse {
  display: block;
  width: 100%;
}

/* Center popups to avoid overflowing risks */
.w_info_popup.popup_centered .info_popup .popup {
  right: 0;
	transform: translateX(50%);
}

.form-item .btn:not(.submit) {
  margin-right: 1em;
}

TR.conn-service-row {
  font-weight: bold;
}

.connections .info_popup .separator {
  position: relative;
  height: var(--size-xxs);
}

.connections .info_popup .separator::after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--color-datatable-border);
}

TR.connections_label + TR.separator {
  display: none;
}