MDM/mdm-front/src/pages/DevicePage/components/DeviceMaintenanceModal/DeviceMaintenanceModal.scss

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

.device-maintenance-modal__overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: $color-backdrop;
  backdrop-filter: blur(3px);
}

.device-maintenance-modal {
  position: fixed;
  z-index: 510;
  top: 50%;
  left: 50%;
  width: min(860px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 24px;
  background: $color-surface;
  box-shadow: $shadow-modal;
}

.device-maintenance-modal__header {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 24px 18px;
  border-bottom: 1px solid $color-border-muted;

  h2 {
    margin: 0;
    color: $color-text-strong;
    font-size: $font-size-24;
    font-weight: 650;
  }

  p {
    margin: 5px 0 0;
    color: $color-text-muted;
    font-size: $font-size-14;
  }
}

.device-maintenance-modal__close {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 11px;
  background: $color-bg;
  color: $color-text-muted;
  cursor: pointer;
  transition: 0.2s ease;

  &:hover {
    background: $color-surface-hover;
    color: $color-primary;
  }

  &:disabled {
    opacity: 0.5;
    cursor: default;
  }
}

.device-maintenance-modal__scroll {
  flex: 1 1 auto;
  min-height: 0;
  max-height: calc(100vh - 190px);
}

.device-maintenance-modal__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px 24px 24px;
}

.device-maintenance-summary {
  display: grid;
  grid-template-columns: 44px minmax(170px, auto) minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 15px;
  border-radius: 16px;
  background: $color-surface-muted;
}

.device-maintenance-summary__icon {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
  background: $color-bg;
  color: $color-text-muted;

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

  &.is-danger {
    background: $color-danger-bg;
    color: $color-danger;
  }

  &.is-service {
    background: $color-primary-muted;
    color: $color-primary;
  }
}

.device-maintenance-summary__field {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  line-height: 1;

  > span {
    color: $color-text-muted;
    font-size: $font-size-12;
    font-weight: 500;
  }

  strong {
    color: $color-text-strong;
    font-size: $font-size-17;
  }

  p {
    margin: 0;
    overflow-wrap: anywhere;
    color: $color-text;
    font-size: $font-size-13;
    line-height: 1.4;
  }
}

.device-maintenance-summary__comment {
  align-self: stretch;
  justify-content: center;
  padding-left: 16px;
  border-left: 1px solid $color-border-muted;
}

.device-maintenance-section {
  padding: 16px;
  border: 1px solid $color-border-muted;
  border-radius: 18px;
  background: $color-surface;
}

.device-maintenance-section__heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;

  h3 {
    margin: 0;
    color: $color-text-strong;
    font-size: $font-size-16;
    font-weight: 650;
  }

  p {
    margin: 0;
    color: $color-text-muted;
    font-size: $font-size-13;
  }

  > svg {
    color: $color-text-muted;
  }
}

.device-maintenance-current-malfunctions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;

  span {
    border-radius: 12px;
    background: $color-danger-bg;
    padding: 4px 10px;
    color: $color-danger;
    font-size: $font-size-12;
    font-weight: 600;
  }
}

.device-maintenance-metrics-message {
  margin: 0;
  color: $color-text-muted;
  font-size: $font-size-13;

  &.is-error {
    color: $color-danger;
  }
}

.device-maintenance-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.device-maintenance-option {
  min-width: 0;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: flex-start;
  gap: 10px;
  padding: 11px;
  border: 1px solid $color-border-muted;
  border-radius: 13px;
  background: $color-surface-muted;
  color: $color-text;
  text-align: left;
  cursor: pointer;
  transition: 0.18s ease;

  &:hover {
    border-color: $color-border-accent;
    background: $color-surface-hover;
  }

  &.is-selected {
    border-color: $color-primary;
    background: $color-primary-tint-soft;
  }

  &:disabled {
    opacity: 0.65;
    cursor: default;
  }

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

  b {
    color: $color-text-strong;
    font-size: $font-size-14;
    font-weight: 600;
  }

  small {
    color: $color-text-muted;
    font-size: $font-size-12;
    line-height: 1.35;
  }
}

.device-maintenance-option__check {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid $color-border-strong;
  border-radius: 7px;
  background: $color-surface;
  color: $color-text-inverse;

  .is-selected & {
    border-color: $color-primary;
    background: $color-primary;
  }
}

.device-maintenance-comment {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: 12px;

  > span {
    color: $color-text-strong;
    font-size: $font-size-13;
    font-weight: 600;

    b {
      color: $color-danger;
      font-weight: 600;
    }
  }

  textarea {
    min-height: 78px;
    resize: vertical;
    border: 1px solid $color-border-strong;
    border-radius: 13px;
    background: $color-surface-muted;
    padding: 11px 13px;
    outline: none;
    color: $color-text-strong;
    font: inherit;
    font-size: $font-size-14;
    transition: 0.18s ease;

    &:focus {
      border-color: $color-primary;
      box-shadow: 0 0 0 3px $color-primary-focus;
    }

    &::placeholder {
      color: $color-text-soft;
    }
  }
}

.device-maintenance-modal__footer {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 24px;
  border-top: 1px solid $color-border-muted;
  background: $color-surface;
}

.device-maintenance-modal__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 9px;
}

.device-maintenance-action {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 12px;
  background: $color-bg;
  padding: 0 16px;
  color: $color-text-strong;
  font-size: $font-size-14;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: 0.18s ease;

  &:hover:not(:disabled) {
    background: $color-surface-hover;
    //color: $color-primary;
  }

  &.is-primary {
    background: $color-primary;
    color: $color-text-inverse;

    &:hover:not(:disabled) {
      background: $color-primary-hover;
      color: $color-text-inverse;
    }
  }

  &:disabled {
    opacity: 0.5;
    cursor: default;
  }
}

.device-maintenance-action--history {
  flex: 0 0 auto;
}

@media (max-width: 760px) {
  .device-maintenance-summary {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .device-maintenance-summary__comment {
    grid-column: 1 / -1;
    padding: 12px 0 0;
    border-top: 1px solid $color-border-muted;
    border-left: 0;
  }

  .device-maintenance-options {
    grid-template-columns: 1fr;
  }

  .device-maintenance-modal__footer {
    align-items: stretch;
    flex-direction: column;
  }

  .device-maintenance-modal__actions,
  .device-maintenance-action--history {
    width: 100%;
  }

  .device-maintenance-action {
    flex: 1;
  }
}