// 선박 목록 패널 스타일
// dark 프로젝트 패밀리 스타일 적용

.vessel-list-panel {
  background: var(--tertiary1, rgba(0, 0, 0, 0.2));
  border-radius: 0.6rem;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 30rem; // 고정 높이
  border: 1px solid var(--tertiary2, rgba(255, 255, 255, 0.1));

  .panel-header {
    padding: 1rem 1.2rem;
    border-bottom: 1px solid var(--tertiary2, rgba(255, 255, 255, 0.1));
    background: var(--tertiary1, rgba(0, 0, 0, 0.15));
    border-radius: 0.6rem 0.6rem 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .panel-title {
      display: flex;
      align-items: center;
      gap: 0.8rem;
      font-weight: var(--fw-semibold, 600);
      font-size: var(--fs-s, 1.2rem);
      color: var(--white, #fff);

      .panel-icon {
        font-size: 1.4rem;
      }

      .panel-text {
        flex: 1;
      }

      .panel-count {
        color: var(--tertiary4, #999);
        font-weight: var(--fw-medium, 500);
        font-size: var(--fs-xs, 1.1rem);
        background: var(--tertiary2, rgba(255, 255, 255, 0.1));
        padding: 0.2rem 0.8rem;
        border-radius: 1.2rem;
      }
    }

    .panel-select-all {
      cursor: pointer;
      padding: 0.4rem;
      border-radius: 0.4rem;
      transition: background-color 0.2s ease;

      &:hover {
        background-color: var(--tertiary2, rgba(255, 255, 255, 0.1));
      }

      .panel-select-checkbox {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        cursor: pointer;
        font-size: var(--fs-xs, 1.1rem);
        font-weight: var(--fw-medium, 500);
        color: var(--tertiary4, #ccc);
        user-select: none;

        input[type="checkbox"] {
          display: none;
        }

        .checkmark {
          position: relative;
          width: 1.6rem;
          height: 1.6rem;
          border: 2px solid var(--tertiary3, #555);
          border-radius: 0.3rem;
          background: transparent;
          transition: all 0.2s ease;

          &::after {
            content: '';
            position: absolute;
            left: 0.4rem;
            top: 0.1rem;
            width: 0.4rem;
            height: 0.7rem;
            border: solid var(--white, #fff);
            border-width: 0 2px 2px 0;
            transform: rotate(45deg);
            opacity: 0;
            transition: opacity 0.2s ease;
          }
        }

        input[type="checkbox"]:checked + .checkmark {
          background: var(--primary1, #4a9eff);
          border-color: var(--primary1, #4a9eff);

          &::after {
            opacity: 1;
          }
        }

        input[type="checkbox"]:indeterminate + .checkmark {
          background: var(--tertiary3, #555);
          border-color: var(--tertiary3, #555);

          &::after {
            left: 0.3rem;
            top: 0.6rem;
            width: 0.8rem;
            height: 0.2rem;
            border: none;
            background: var(--white, #fff);
            transform: none;
            opacity: 1;
          }
        }

        .select-text {
          white-space: nowrap;
        }
      }
    }
  }

  .vessel-list-container {
    flex: 1;
    border-radius: 0.6rem;
    min-height: 0; // flex 자식이 제대로 축소되도록
    overflow-y: auto;
    transition: all 0.2s ease;
    position: relative;

    &.drag-over {
      border-style: solid;
      box-shadow: inset 0 0 0.8rem var(--primary1-alpha, rgba(74, 158, 255, 0.1));
      transform: scale(1.01);
    }

    &.drag-target {
      border-color: var(--primary1, #4a9eff) !important;
      background-color: var(--primary1-alpha, rgba(74, 158, 255, 0.05)) !important;
      transform: scale(1.01);
      box-shadow: 0 0.4rem 2rem var(--primary1-alpha, rgba(74, 158, 255, 0.15));
    }

    .vessel-list {
      display: flex;
      flex-direction: column;
      padding: 0.8rem;
    }

    .virtual-vessel-list {
      padding: 0.8rem;
    }

    .empty-message {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: var(--tertiary4, #666);
      text-align: center;

      .empty-icon {
        font-size: 3rem;
        margin-bottom: 0.8rem;
        opacity: 0.5;
      }

      .empty-text {
        font-size: var(--fs-s, 1.2rem);
        font-weight: var(--fw-medium, 500);
      }
    }

    .drop-hint {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: var(--tertiary1, rgba(0, 0, 0, 0.8));
      padding: 1.6rem;
      border-radius: 0.8rem;
      box-shadow: 0 0.4rem 0.8rem rgba(0, 0, 0, 0.3);
      color: var(--primary1, #4a9eff);
      font-weight: var(--fw-semibold, 600);
      font-size: var(--fs-s, 1.2rem);
      pointer-events: none;
      z-index: 10;

      i {
        font-size: 2rem;
        margin-bottom: 0.8rem;
        animation: bounce 1s infinite;
      }

      @keyframes bounce {
        0%, 100% {
          transform: translateY(0);
        }
        50% {
          transform: translateY(-0.5rem);
        }
      }
    }
  }

  // 스크롤바 스타일
  .vessel-list-container::-webkit-scrollbar {
    width: 0.6rem;
  }

  .vessel-list-container::-webkit-scrollbar-track {
    background: var(--tertiary1, rgba(0, 0, 0, 0.2));
    border-radius: 0.3rem;
  }

  .vessel-list-container::-webkit-scrollbar-thumb {
    background: var(--tertiary3, #555);
    border-radius: 0.3rem;

    &:hover {
      background: var(--tertiary4, #666);
    }
  }
}

// 상태별 테두리 색상
.vessel-list-panel[data-state="NORMAL"] {
  .panel-header {
    border-left: 3px solid #4ade80;
  }
}

.vessel-list-panel[data-state="SELECTED"] {
  .panel-header {
    border-left: 3px solid #4a9eff;
  }
}

.vessel-list-panel[data-state="DELETED"] {
  .panel-header {
    border-left: 3px solid #f87171;
  }
}
