/**
 * @license
 * Copyright 2019-2020 CERN and copyright holders of ALICE O2.
 * See http://alice-o2.web.cern.ch/copyright for details of the copyright holders.
 * All rights not expressly granted are reserved.
 *
 * This software is distributed under the terms of the GNU General Public
 * License v3 (GPL Version 3), copied verbatim in the file "COPYING".
 *
 * In applying this license CERN does not waive the privileges and immunities
 * granted to it by virtue of its status as an Intergovernmental Organization
 * or submit itself to any jurisdiction.
*/

/* make the sidebar big enough to contain inspector */

:root {
  --color-gray-button-background-hover: #a0a0a0;
  --color-gray-button-background: #e0e0e0;
  --color-gray-button: #404040;
  --color-gray-button-active: #c0c0c0;
}
.sidebar,
.sidebar .sidebar-content { width: 20rem; }

.transition-background-color { transition: background-color 0.5s ease; }

/* includes buttons and input */
.table-filters { width: 100%; }

/* logs div */
.logs-container {
    cursor: default;
    --log-font-size: 0.7rem; /* default, overridden by JS zoom */
    --row-height: 0.91rem; /* default, overridden by JS zoom */
}
.logs-content { border-top: 1px solid #aaa; }
.bold { font-weight: bold; }

/* logs tables */
.table-logs-header { width: 100%; border-collapse: collapse; }

.table-logs-header td { padding: 0.3rem 0.2rem; }

.table-logs-content { width: 100%; border-collapse: collapse; }
.table-logs-content td {}

.table-logs-header td,
.table-logs-content td { font-size: var(--log-font-size); }

td,
th { max-width: 0; /* allow ellipsis on tables */ vertical-align: top; }

.cell { line-height: var(--row-height); font-size: 1rem; padding: 0rem 0.2rem; font-weight: 100; }
.cell-bordered { border-left: 1px solid rgb(170, 170, 170); }
.cell-content { display: flex; justify-content: space-between; align-items: center; max-width: 100%; }
.cell-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

.cell-xs { width: 2rem; }
.cell-s { width: 4rem; }
.cell-m { width: 8rem; }
.cell-l { width: 16rem; }
.cell-xl { width: 32rem; }

/* last column fills space */
.cell-xs:last-child, .cell-s:last-child, .cell-m:last-child, .cell-l:last-child, .cell-xl:last-child { width: initial; }
.cell-xs:last-child .resizeWidth, .cell-s:last-child .resizeWidth, .cell-m:last-child .resizeWidth, .cell-l:last-child .resizeWidth, .cell-xl:last-child .resizeWidth { visibility: hidden; }

.row-hover:hover { background-color: rgba(0, 0, 0, .075); }
.row-selected, .row-selected:hover { background-color: #007bff; color: white; }

/* context menu hint */
.cell-context-menu-hint {
  display: none;
  font-size: 0.80rem;
  font-weight: bold;
  color: var(--color-black);
  background-color: #e0e0e0;
  border-radius: 3px;
  padding: 0 3px;
  line-height: 1;
  cursor: pointer;
}
.cell:hover .cell-context-menu-hint { display: block; }
.cell-context-menu-hint:hover { background-color: rgba(0, 0, 0, .15); }

/* invert colors for selected rows */
.row-selected .cell-context-menu-hint { color: var(--color-white); background-color: rgba(255, 255, 255, .15); }
.row-selected .cell-context-menu-hint:hover { background-color: rgba(255, 255, 255, .3); }

.table-max { width: 100%; }

.pull-right { float: right; }

footer { border-top: 1px solid var(--color-gray); }

.datetime-helper { position: absolute; left: calc(100% + 4px); color: black; top: -6px; width: 320px; background-color: #f3f3f3; border: 1px solid rgb(154, 154, 154); border-radius: 5px; box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.4); z-index: 1000; }
.datetime-helper-result { padding: 10px; font-weight: bold; background: #007bff; color: white; border-radius: 4px 4px 0 0; margin: -1px; }
.datetime-helper-memo { padding: 10px; }

.arrow-up-left:before { content: ''; display: block; position: absolute; right: 100%; top: 6px; width: 0; height: 0; border-right-color: #9a9a9a; border-radius: 10px;}
.arrow-up-left:after {content: ''; display: block; position: absolute; right: 100%; top: 7px; width: 0; height: 0; border: 9px solid transparent; border-right-color: #007bff; }


/* specific colors to InfoLogger */
.severity-d { color: grey; font-weight: 600; }
.severity-i { color: #17a2b8; font-weight: 600; }
.severity-w { color: #ffc107; font-weight: 600; }
.severity-e { color: #dc3545; font-weight: 600; }
.severity-f { color: #9c27b0; font-weight: 600; }
.severity-d-bg { background-color: grey; color: white; font-weight: 600; }
.severity-i-bg { background-color: #17a2b8; color: white; font-weight: 600; }
.severity-w-bg { background-color: #ffc107; color: white; font-weight: 600; }
.severity-e-bg { background-color: #dc3545; color: white; font-weight: 600; }
.severity-f-bg { background-color: #9c27b0; color: white; font-weight: 600; }

.resizeWidth:hover { cursor: pointer; background-color: var(--color-gray); }

.query-item { cursor: pointer; text-decoration: none; color: var(--color-gray-darker); border-radius: 0.25em; display: block; user-select: none; }
.query-item:hover { text-decoration: none; background-color: var(--color-gray-dark); color: var(--color-gray-lighter); }
.query-item:active { background-color: var(--color-gray-dark); color: var(--color-black);  }
.query-item.selected { background-color: var(--color-primary); color: var(--color-white); }

.btn { background-color: var(--color-gray-button-background); color: var(--color-gray-button); }
.btn:hover { background-color: var(--color-gray-button-background-hover); color: var(--color-white); }
.btn:active, .btn.active, .dropdown-open > .btn { background-color: var(--color-gray-button-active); }

.select-btn { background-color: var(--color-gray-button-background); color: var(--color-gray-button); border: 0; border-radius: .25rem; padding: 0em 0.5em; font-size: 1em; font-family: inherit; cursor: pointer; }
.select-btn:hover { background-color: var(--color-gray-button-background-hover); color: var(--color-white); }

.filter-input-group { display: flex;
  position: relative;
}
.filter-input-group .form-control {
  height: 2em;
  border-radius: .25rem;
  z-index: 1;
}
.filter-input-group:has(.empty-toggle.active) .form-control,
.filter-input-group:hover .form-control {
  border-radius: .25rem 0 0 .25rem;
}

.empty-toggle {
  display: none;
  padding: 0 0.15rem;
  font-size: 0.7rem;
  font-weight: bold;
  border-radius: 0 .25rem .25rem 0;
  opacity: 0.6;
}
.filter-input-group:hover .empty-toggle:not(.active) {
  display: block;
}
.empty-toggle:hover {
  opacity: 1;
}
.empty-toggle.active {
  opacity: 1;
  display: block;
}

.text-area-for-message:focus {
  width: 50%;
  height: 10rem !important;
  right: 0;
  position: absolute;
  z-index: 10;
}

a.disabled { pointer-events: none; cursor: default; }

.cell-context-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1100;
}

.cell-context-menu {
  position: fixed;
  z-index: 1101;
  display: flex;
  flex-direction: column;
  background-color: #fff;
  border: 1px solid rgba(0,0,0,.15);
  border-radius: .25rem; 
  min-width: 220px;
  max-width: 220px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,.1);
}

.cell-context-menu-item {
  cursor: pointer;
  text-decoration: none;
  padding: 0.55rem 0.75rem;
  line-height: 1em;
  color: var(--color-gray-darker);
  font-weight: 100;
  display: flex;
  flex-direction: row;
  user-select: none;
}

.cell-context-menu-item + .cell-context-menu-item {
    border-top: 1px solid var(--color-gray-light);
}

.cell-context-menu:first-child { 
    border-radius: 0.25em 0.25em 0 0;
}

.cell-context-menu-item:last-child { 
    border-radius: 0 0 0.25em 0.25em;
}

.cell-context-menu-item:hover { 
  text-decoration: none;
  background-color: var(--color-gray-dark);
  color: var(--color-gray-lighter);
}

.cell-context-menu-item:active { 
  background-color: var(--color-gray-dark);
  color: var(--color-black);
}

.cell-context-menu-item.selected { 
  background-color: var(--color-primary);
  color: var(--color-white);
}

.cell-context-menu-item.disabled,
.cell-context-menu-item.disabled:hover,
.cell-context-menu-item.disabled:active {
  cursor: not-allowed;
  opacity: 0.4;
}

.cell-context-menu-header {
  padding: 0.4rem 0.75rem;
  color: var(--color-gray-darker);
  background-color: var(--color-gray-light);
  border-bottom: 1px solid rgba(0,0,0,.1);
  border-radius: 0.25rem 0.25rem 0 0;
  user-select: none;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}