@use '../../../../shared/styles/variables' as *;

.machine-calibration-tab {
  min-width: 0;

  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: left;
}

.machine-calibration-toolbar {
  min-width: 0;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;

  p {
    margin: 6px 0 0;
    color: $color-text-muted;
    font-size: $font-size-14;
    font-weight: 550;
    line-height: 1.35;
  }
}

.machine-calibration-toolbar {
  .history-period-control {
    flex: 0 1 auto;
  }

  .history-period-control__top {
    justify-content: flex-end;
    flex-wrap: wrap;
  }
}

.machine-calibration-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.machine-calibration-stat {
  min-width: 0;
  padding: 14px;
  border-radius: 10px;
  background: $color-bg;

  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 14px;

  >svg {
    width: 28px;
    height: 28px;
    padding: 8px;
    border-radius: 10px;
    color: $blue;
    background: $blue20;
  }

  div {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  span {
    overflow: hidden;
    color: $color-text-muted;
    font-size: $font-size-13;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  b {
    overflow: hidden;
    color: $color-text-heading;
    font-size: $font-size-16;
    font-weight: 760;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.machine-calibration-mode {
  min-width: 0;
  padding: 14px;
  border-radius: 10px;
  background: $color-bg;

  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 14px;

  >svg {
    width: 28px;
    height: 28px;
    padding: 8px;
    border-radius: 10px;
    color: $color-primary;
    background: $color-primary-tint;
  }

  >div {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  span {
    color: $color-text-muted;
    font-size: $font-size-13;
    font-weight: 650;
  }

  b {
    color: $color-text-heading;
    font-size: $font-size-16;
    font-weight: 760;
    line-height: 1.15;
  }

  p {
    margin: 0;
    color: $color-text-muted;
    font-size: $font-size-13;
    font-weight: 550;
    line-height: 1.35;
  }

  &.is-success>svg {
    color: $color-success;
    background: $color-success-bg;
  }

  &.is-warning>svg {
    color: $color-warning;
    background: $color-warning-bg;
  }

  &.is-empty>svg {
    color: $color-text-muted;
    background: $color-surface;
  }
}

.machine-calibration-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 0.42fr);
  gap: 16px;
  align-items: start;
}

.machine-calibration-main,
.machine-calibration-side {
  min-width: 0;

  display: flex;
  flex-direction: column;
  gap: 16px;
}

.machine-calibration-card {
  min-width: 0;
}

.machine-vibration-chart,
.machine-vibration-histogram-chart,
.machine-calibration-timeline-chart {
  min-width: 0;

  .echarts-for-react {
    width: 100%;
  }
}

.machine-calibration-card-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.machine-calibration-small-btn {
  height: 34px;
  padding: 0 12px;
  border: 1px solid rgba($color-primary-rgb, 0.42);
  border-radius: 10px;
  background: transparent;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  color: $blue;
  font-family: inherit;
  font-size: $font-size-13;
  font-weight: 700;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease;

  &:hover {
    border-color: $blue;
    background: $blue;
    color: $color-text-inverse;
    box-shadow: var(--shadow-primary);
  }

  &.is-active {
    border-color: $blue;
    background: $blue;
    color: $color-text-inverse;
    box-shadow: var(--shadow-primary);
  }

  &.is-danger {
    border-color: rgba($color-danger-rgb, 0.42);
    color: $red;

    &:hover {
      border-color: $red;
      background: $red;
      color: $color-text-inverse;
      box-shadow: var(--shadow-danger);
    }
  }

  &.is-muted {
    border-color: $color-border-strong;
    color: $color-text-muted;

    &:hover {
      border-color: $color-text-muted;
      background: $color-bg;
      color: $color-text-heading;
      box-shadow: none;
    }
  }
}

.machine-calibration-selection-hint {
  margin-top: -4px;
  color: $color-text-muted;
  font-size: $font-size-13;
  font-weight: 650;
}

.machine-calibration-selection {
  margin-top: 12px;
  padding: 14px;
  border-radius: 12px;
  background: $color-bg;
}

.machine-calibration-selection__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;

  >div {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  b {
    color: $color-text-heading;
    font-size: $font-size-15;
    font-weight: 760;
  }

  span {
    color: $color-text-muted;
    font-size: $font-size-13;
    font-weight: 650;
  }
}

.machine-calibration-selection__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.machine-calibration-selection__rule {
  color: $color-text-strong !important;
}

.machine-calibration-selection__stats {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;

  >div {
    min-width: 0;
    padding: 10px 12px;
    border-radius: 10px;
    background: $color-surface;

    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  span {
    overflow: hidden;
    color: $color-text-muted;
    font-size: $font-size-12;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  b {
    overflow: hidden;
    color: $color-text-heading;
    font-size: $font-size-15;
    font-weight: 760;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.machine-calibration-selection__stats--histogram {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.machine-calibration-selection__stats--rule {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.machine-calibration-rule-list,
.machine-calibration-state-list,
.machine-calibration-legend,
.machine-calibration-unrecognized-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.machine-calibration-unrecognized {
  min-width: 0;
  padding: 12px;
  border-radius: 10px;
  background: $color-bg;

  display: grid;
  grid-template-columns: minmax(0, 1fr) 32px;
  align-items: center;
  gap: 12px;

  >div {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  b {
    color: $color-text-heading;
    font-size: $font-size-15;
    font-weight: 760;
  }

  span,
  small {
    overflow: hidden;
    color: $color-text-muted;
    font-size: $font-size-12;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  button {
    width: 32px;
    height: 32px;
    border: 1px solid rgba($color-primary-rgb, 0.34);
    border-radius: 9px;
    background: transparent;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    color: $blue;
    cursor: pointer;
    transition:
      background-color 0.2s ease,
      border-color 0.2s ease,
      color 0.2s ease,
      box-shadow 0.2s ease;

    &:hover {
      border-color: $blue;
      background: $blue;
      color: $color-text-inverse;
      box-shadow: var(--shadow-primary);
    }
  }
}

.machine-calibration-rule {
  min-width: 0;
  padding: 12px;
  border-radius: 10px;
  background: $color-bg;

  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.machine-calibration-rule__state {
  min-width: 0;

  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 12px;

  >span {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: $color-surface;

    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  div {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
  }

  strong {
    overflow: hidden;
    color: $color-text-heading;
    font-size: $font-size-15;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  small {
    overflow: hidden;
    color: $color-text-muted;
    font-size: $font-size-13;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.machine-calibration-rule__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;

  span {
    padding: 5px 8px;
    border-radius: 999px;
    background: $color-surface;
    color: $color-text-muted;
    font-size: $font-size-12;
    font-weight: 700;
  }
}

.machine-calibration-rule__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;

  button {
    width: 32px;
    height: 32px;
    border: 1px solid rgba($color-primary-rgb, 0.34);
    border-radius: 9px;
    background: transparent;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    color: $blue;
    cursor: pointer;
    transition:
      background-color 0.2s ease,
      border-color 0.2s ease,
      color 0.2s ease,
      box-shadow 0.2s ease;

    &:hover {
      border-color: $blue;
      background: $blue;
      color: $color-text-inverse;
      box-shadow: var(--shadow-primary);
    }

    &.is-danger {
      border-color: rgba($color-danger-rgb, 0.42);
      color: $red;

      &:hover {
        border-color: $red;
        background: $red;
        color: $color-text-inverse;
        box-shadow: var(--shadow-danger);
      }
    }
  }
}

.machine-calibration-state {
  min-width: 0;
  padding: 12px;
  border-radius: 10px;
  background: $color-bg;

  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 32px;
  align-items: center;
  gap: 12px;

  >div {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
  }

  strong {
    overflow: hidden;
    color: $color-text-heading;
    font-size: $font-size-15;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;

    display: flex;
    align-items: center;
    gap: 8px;

    em {
      padding: 3px 7px;
      border-radius: 999px;
      background: $color-surface;
      color: $color-text-muted;
      font-size: $font-size-11;
      font-style: normal;
      font-weight: 750;
      text-transform: uppercase;
    }
  }

  small {
    overflow: hidden;
    color: $color-text-muted;
    font-size: $font-size-13;
    font-weight: 600;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  button {
    width: 32px;
    height: 32px;
    border: 1px solid rgba($color-primary-rgb, 0.34);
    border-radius: 9px;
    background: transparent;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    color: $blue;
    cursor: pointer;

    &:hover {
      border-color: $blue;
      background: $blue;
      color: $color-text-inverse;
      box-shadow: var(--shadow-primary);
    }
  }
}

.machine-calibration-state__lock {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: $color-surface;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  color: $color-text-muted;
  font-size: $font-size-15;
  font-weight: 760;
}

.machine-calibration-state__icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.machine-calibration-legend__item {
  min-width: 0;
  padding: 8px 0;
  border-bottom: 1px solid $gray20;

  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;

  &:last-child {
    border-bottom: none;
  }

  span {
    width: 10px;
    height: 10px;
    border-radius: 999px;
  }

  b {
    overflow: hidden;
    color: $color-text-strong;
    font-size: $font-size-14;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  small {
    color: $color-text-muted;
    font-size: $font-size-13;
    font-weight: 650;
    white-space: nowrap;
  }
}

.machine-calibration-modal {
  width: min(760px, calc(100vw - 32px));
}

.machine-calibration-color-control {
  display: grid;
  grid-template-columns: 42px 46px minmax(0, 1fr);
  align-items: center;
  gap: 10px;

  >span {
    width: 42px;
    height: 42px;
    border-radius: 12px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    color: $color-text-inverse;
  }

  input[type='color'] {
    width: 46px;
    height: 42px;
    padding: 4px;
    border: 1px solid $color-border-strong;
    border-radius: 12px;
    background: $color-surface;
    cursor: pointer;
  }

  input:not([type='color']) {
    min-width: 0;
  }
}

.machine-calibration-modal .add-machine-field--textarea {
  textarea {
    min-height: 104px;
    padding: 12px 14px;
    border: 1px solid var(--color-border-strong);
    border-radius: 14px;
    resize: vertical;
    background: var(--color-surface);
    outline: none;
    color: var(--color-text-strong);
    font: inherit;
    font-size: var(--font-size-15);

    &:focus {
      border-color: var(--color-primary);
      background: var(--color-surface);
      box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.12);
    }

    &::placeholder {
      color: var(--gray50);
    }
  }
}

@include laptop-down {
  .machine-calibration-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .machine-calibration-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .machine-calibration-selection__stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@include tablet-down {
  .machine-calibration-toolbar {
    flex-direction: column;
  }

  .machine-calibration-toolbar .history-period-control {
    max-width: 100%;
    overflow-x: auto;
  }

  .machine-calibration-stat-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .machine-calibration-card-actions,
  .machine-calibration-selection__header {
    align-items: stretch;
    flex-direction: column;
  }

  .machine-calibration-card-actions {
    width: 100%;

    .machine-calibration-small-btn {
      width: 100%;
    }
  }

  .machine-calibration-selection__actions {
    justify-content: flex-start;
    width: 100%;

    .machine-calibration-small-btn {
      flex: 1 1 140px;
    }
  }

  .machine-calibration-selection__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .machine-calibration-state {
    grid-template-columns: 38px minmax(0, 1fr);

    button {
      grid-column: 2;
      justify-self: flex-start;
    }
  }
}
