﻿/* this file is overridden by customization */
/* CSS variables */
:root {
    --bg-alpha-clr:  #12141a;
    --ba-beta-clr: #171A21;

    --accent-alpha-clr: #0F79BF;
    --accent-beta-clr: #1290E3;
    
    --contrast-alpha-clr: #FFFFFF;
    --contrast-beta-clr: #848FAD;
    --contrast-gamma-clr: #4A5061;
    --contrast-dark-clr: #12141A;

    --line-alpha-clr: #4A5061;
    --line-beta-clr: #313645;

    --base-alpha-clr: #242833;
    --base-beta-clr: #313645;

    --normal-clr: #00CF84;
    --warning-clr: #EEBF32;
    --alarm-clr: #FF4343;

    --font-family: Inter, sans-serif;

    --text-primary: #12141A;
}

/* ==========================================================================
   КОНТЕЙНЕР И ОБЩИЕ СТИЛИ ТАБЛИЦЫ SENSOR-INFO
   ========================================================================== */

.sensor-info-table .ant-table {
  background: transparent !important;
}

.sensor-info-table table {
  border-spacing: 0 1px; 
} 

/* Заголовок таблицы (Исправлена точка в начале) */
.sensor-info-table .agg-table-wrapper .ant-table-header .ant-table-thead tr > th {
  background: #b7d9f7 !important;
  padding: 4px !important;
  font-size: 14px;
}
/* ==========================================================================
   РАДИКАЛЬНОЕ СКРУГЛЕНИЕ ШАПКИ (ЗАМЕНА)
   ========================================================================== */

/* Левый угол (первая ячейка) */
.sensor-info-table .agg-table-wrapper .ant-table-header .ant-table-thead tr > th:first-child {
  border-top-left-radius: 4px !important;
  border-bottom-left-radius: 4px !important;
}

/* Правый угол ОДНОВРЕМЕННО для двух случаев: */
/* 1. Если скролла нет — это самая последняя ячейка (:last-child) */
/* 2. Если скролл есть — это предпоследняя ячейка (:nth-last-child(2)) */
.sensor-info-table .agg-table-wrapper .ant-table-header .ant-table-thead tr > th:last-child,
.sensor-info-table .agg-table-wrapper .ant-table-header .ant-table-thead tr > th:nth-last-child(2) {
  border-top-right-radius: 4px !important;
  border-bottom-right-radius: 4px !important;
}

/* Самую последнюю техническую заглушку (если скролл включен) насильно делаем квадратной, */
/* чтобы её углы не перекрывали скругление нашей предпоследней ячейки */
.sensor-info-table .agg-table-wrapper .ant-table-header .ant-table-thead tr > th:last-child {
  border-radius: 0 !important;
}
.sensor-info-table .data-table-column-description {
  color: #4a5061 !important;
  font-size: 14px;
}

.sensor-info-table .data-table-column-title {
  justify-content: center;
}

.sensor-info-table .ant-table-header {
  height: 32px;
  border: none !important;
}

/* Ячейки таблицы */
.sensor-info-table .agg-table-wrapper .ant-table-body .ant-table-tbody > tr.ant-table-row > td {
  color: #4a5061;
  padding: 6px 4px; 
  font-size: 14px;
  height: auto;
  border: none; 
}

/* Эффект "зебры" для строк */
.sensor-info-table .agg-table-wrapper .ant-table-body .ant-table-tbody .ant-table-row:nth-child(odd) {
  background: #d2e7fa; /* Белый цвет для контраста с голубой шапкой */
}

.sensor-info-table .agg-table-wrapper .ant-table-body .ant-table-tbody .ant-table-row:nth-child(even) {
  background: #d2e7fa; 
}

/* Ховер на строку */
.sensor-info-table .agg-table-wrapper .ant-table-body .ant-table-tbody .ant-table-row:hover > td {
  background: #e9ecef !important; 
}

/* Скругление крайних ячеек в строках */
.sensor-info-table .agg-table-wrapper .ant-table-body .ant-table-tbody > tr.ant-table-row > td:first-child {
  border-radius: 4px 0 0 4px;
}
.sensor-info-table .agg-table-wrapper .ant-table-body .ant-table-tbody > tr.ant-table-row > td:last-child {
  border-radius: 0 4px 4px 0;
}

/* Выравнивание полей */
.sensor-info-table .width-calculation-wrapper {
  justify-content: center;
}

.sensor-info-table .readonly-string-field,
.sensor-info-table .readonly-integer-field {
  text-align: center !important;
}

.sensor-info-table .ant-table-cell-scrollbar {
  box-shadow: none;
}

/* Пустая таблица (NO DATA) */
.sensor-info-table .ant-empty-image {
    display: none;
}

.sensor-info-table .ant-empty-description {
    position: relative;
}

.sensor-info-table .ant-empty-description:before {
    content: 'Нет данных';
    position: absolute;
    background: #BBEFFA; /* Изменено под цвет шапки */
    color: #313645;
    width: 100%;
    left: 0;
}

.sensor-info-table .ant-table-tbody > tr.ant-table-placeholder:hover > td {
  background: #BBEFFA !important; 
}

/* ==========================================================================
   ОСТАЛЬНЫЕ КОМПОНЕНТЫ ИНТЕРФЕЙСА
   ========================================================================== */

/* Class to hide element */
.air-hidden {
    visibility: hidden;
}

/* Font for app */
.ui-component {
    font-family: var(--font-family);
}

/* Preloader */
g[clip-path = "url(#clipSpeed)"] path:first-child {
    stroke: #323232;
}

.preloader-wrapper {
    background: #FAFAFA;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 0;
    position: relative; 
    min-height: 100px;  
}

.preloader-wrapper img {
    visibility: hidden;
}

.preloader-wrapper:before {
    content: "";
    display: block;
    width: 134px; 
    height: 98px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); 
    background-image: url('/web/static/templates/Logo CEPP Loading 2.svg');
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 10; 
}

.ant-radio-wrapper {
     color: #fff;
     background: #242833;
     font-size: 12px;
     border-radius: 4px;
     padding: 4px 8px;
}

.ant-radio-wrapper-checked.ant-radio-wrapper {
    background: #0F79BF;
}

.ant-radio {
    display: none;
}

/* Scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--ba-beta-clr) transparent;
}

/*** SMIS Systems list ***/
.smis-state-list {
    border: 1px solid #313645;
    border-radius: 12px;
    padding: 12px;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 100%;
}

.smis-state-item {
    box-sizing: border-box;
    border: 2px solid #313645;
    border-radius: 12px;
    color: #fff;
    width: 334px;
    display: flex;
    align-items: center;
    padding: 8px;
    gap: 12px;
    transition: all 200ms ease-out;
    cursor: pointer;
}

.smis-state-item.active,
.smis-state-item:hover {
    border-color: var(--accent-alpha-clr);
}

.smis-state-item p {
    margin: 0 !important;
}

.smis-state-item ul {
    padding: 0 !important;
}

.smis-state-item-icon {
    width: 56px;
    height: 56px;
}

.smis-state-item-content {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.smis-state-item-title {
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
}

.smis-state-item-state {
    font-size: 12px;
    line-height: 1;
    text-transform: uppercase;
    color: #58C06F;
}

.smis-state-counters {
    list-style: none;
    display: flex;
    gap: 6px;
}

.smis-state-counter {
    line-height: 1;
    font-size: 12px;
    display: flex;
    align-items: center;
    color: var(--contrast-gamma-clr);
    gap: 4px;
}

.smis-state-counter::before,
.smis-state-counter::after {
    width: 5px;
    height: 16px;
}

.smis-state-counter::before {
    content: url("data:image/svg+xml,%3Csvg width='5' height='16' viewBox='0 0 5 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 1L1.58579 3.41421C1.21071 3.78929 1 4.29799 1 4.82843V11.1716C1 11.702 1.21071 12.2107 1.58579 12.5858L4 15' stroke='%234A5061' stroke-linecap='round'/%3E%3C/svg%3E");
}

.smis-state-counter::after {
    content: url("data:image/svg+xml,%3Csvg width='5' height='16' viewBox='0 0 5 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L3.41421 3.41421C3.78929 3.78929 4 4.29799 4 4.82843V11.1716C4 11.702 3.78929 12.2107 3.41421 12.5858L1 15' stroke='%234A5061' stroke-linecap='round'/%3E%3C/svg%3E%0A");
}

.smis-state-item.warning .smis-state-item-icon path:not(:nth-child(1)) {
    fill: var(--warning-clr);
}

.smis-state-item.warning .smis-state-item-icon path:nth-child(1) {
    stroke: var(--warning-clr);
}

.smis-state-item.warning .smis-state-item-state {
    color: var(--warning-clr);
}

.smis-state-item.fire .smis-state-item-icon path:not(:nth-child(1)),
.smis-state-item.alarm .smis-state-item-icon path:not(:nth-child(1)) {
    fill: var(--alarm-clr);
}

.smis-state-item.fire .smis-state-item-icon path:nth-child(1),
.smis-state-item.alarm .smis-state-item-icon path:nth-child(1){
    stroke: var(--alarm-clr);
}

.smis-state-item.fire .smis-state-item-state,
.smis-state-item.alarm .smis-state-item-state {
    color: var(--alarm-clr);
}

.smis-state-item.fault .smis-state-item-icon path:not(:nth-child(1)) {
    fill: var(--warning-clr);
} 

.smis-state-item.fault .smis-state-item-icon path:nth-child(1) {
    stroke: var(--warning-clr);
}

.smis-state-item.fault .smis-state-item-state {
    color: var(--warning-clr);
}

.skeleton-container .skeleton {
    display: none;
}
.skeleton-container span {
    background: transparent !important;
}

/* ==========================================================================
   ОБЩАЯ ТАБЛИЦА AIR-TABLE
   ========================================================================== */
.air-table .ant-table {
    background: none;
}

.air-table .ant-table table {
    border-spacing: 0px 4px;
}

.air-table .ant-table-header table {
    border-spacing: 0;
}

.air-table tr {
    cursor: pointer;
}

.air-table .agg-table-wrapper .ant-table-body .ant-table-tbody > tr.ant-table-row > td {
    height: auto;
    padding: 4px !important;
}

.air-table td {
    background: var(--ba-beta-clr) !important;
    font-size: 14px;
    padding: 0 !important;
    color: var(--contrast-beta-clr);
}

.air-table .ant-table-cell:first-child {
    border-radius: 4px 0 0 4px !important;
}

.air-table th {
    background: var(--ba-beta-clr) !important;
    font-size: 14px;
    border: none !important;
    color: #E9E9E9;
}

.air-table .ant-table-header,
.air-table .ant-table-body {
    background: none !important;
}

.air-table .agg-table-wrapper .ant-table-body .ant-table-tbody .ant-table-row.ant-table-row-selected .data-table-column:first-child {
    box-shadow: inset 0 0 0px 0 transparent;
}

.air-table .agg-table-wrapper .ant-table-body .ant-table-tbody .ant-table-row {
    background: transparent !important;
}

.air-table .agg-table-wrapper .ant-table-body .ant-checkbox.ant-checkbox-checked {
    border-color: var(--accent-alpha-clr);
    background: var(--accent-alpha-clr);
}

.air-table .data-table-column-description {
    color: var(--contrast-alpha-clr);
    font-size: 14px;
    font-weight: 400;
}

.air-table .ant-table-cell-scrollbar {
    box-shadow: none;
}

.air-table .agg-table-wrapper .ant-table-header {
    border: none !important;
}

.air-table .html-snippet span {
    width: 100%;
    height: 100%;
    padding: 0 8px;
}

.air-table span.alarm {
    background: var(--alarm-clr);
    color: #fff;
}

.air-table span.warning {
    background: var(--warning-clr);
    color: #fff;
}

.air-table .ant-empty-image {
    display: none;
}

.air-table .ant-empty-description:before {
    content: "Событий не найдено";
    color: #313645;
    position: absolute;
    left: 0;
    width: 100%;
    font-size: 14px;
    text-transform: uppercase;
    background: var(--ba-beta-clr);
}

.air-table .ant-empty-description {
    height: 110px;
    display: flex;
    align-items: center;
}

.air-table {
    border-radius: 8px;
}

.width-calculation-wrapper {
    display: flex;
    justify-content: center;
}

.air-table .component-scroll-container {
    height: 100% !important;
}

.air-table .ant-table-wrapper {
    flex: 1;
}

.air-table .ant-table-cell:last-child {
    border-radius: 0 4px 4px 0;
}

tr:has(.event-level-3) .ant-table-cell {
    background: rgba(238, 191, 50, 0.2) !important;
    color: #EEBF32;
}

tr:has(.event-level-4) .ant-table-cell {
    background: rgba(255, 67, 67, 0.2) !important;
    color: #FF4343;
}

tr:has(.event-level-5) .ant-table-cell {
    background: rgba(255, 67, 67, 0.2) !important;
    color: #FF4343;
}

.air-table.loading:before {
    content: 'Загрузка событий...';
    color: #313645;
    text-transform: uppercase;
    font-size: 14px;
    position: absolute;
    width: 100%;
    height: 100%;
    background: var(--ba-beta-clr);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.timeout-status {
    overflow: hidden !important;
}

th.ant-table-cell {
    border-right: 1px solid #313645 !important;
}

.agg-table-wrapper .ant-table-header .ant-table-thead .ant-table-cell {
    border: none !important;
}

/*** Alerts counters ***/
.smis-counter-list {
    list-style-type: none;
    display: flex;
    gap: 16px;
    padding: 0;
}

.smis-counter-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 500;
    color: var(--contrast-gamma-clr);
}

.smis-counter-item.alarm.active {
    color: var(--alarm-clr);
}

.smis-counter-item.alarm.active path {
    fill: var(--alarm-clr);
}

.smis-counter-item.warning.active {
    color: var(--warning-clr);
}

.smis-counter-item.warning.active path {
    fill: var(--warning-clr);
}

.smis-counter-item.fault.active {
    color: var(--warning-clr);
}

.smis-counter-item.fault.active path {
    fill: var(--warning-clr);
}

/* Выпадающий список */
.rc-virtual-list,
.rc-virtual-list-holder, 
.ant-select-tree-list-holder {
    background: #212836;
}

.ant-select-item {
    color: #fff;
}

.ant-select-item.ant-select-item-option-selected,
.ant-select-item:hover {
    background: #2D384C;
    box-shadow: none !important;
    color: #fff;
}

.ant-select-item-option-active.ant-select-item-option-active, 
.ant-select .ant-select-item-option-active {
    color: #fff !important;
    background: #2D384C;
}