:host {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow-y: auto;

  .custom-header {
    padding: var(--size);
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    align-items: center;
    background: var(--background);
    position: sticky;
    top: 0;
    z-index: 10;

    .back-btn {
      grid-column-start: 1;
      grid-column-end: 2;
      grid-row-start: 1;
      grid-row-end: 2;
      justify-self: start;
      background: transparent;
      border: none;
      color: var(--foreground);
      padding: 4px 8px;
      cursor: pointer;
      border-radius: 4px;
      z-index: 1;

      &:hover {
        background: var(--background-light);
      }

      i {
        font-size: 20px;
      }
    }

    .text {
      grid-column-start: 1;
      grid-column-end: 2;
      grid-row-start: 1;
      grid-row-end: 2;
      font-family: var(--font-heading);
      font-size: 20px;
      font-weight: 700;
      letter-spacing: 0.05rem;
      justify-self: center;
    }
  }

  .content {
    padding: 0 var(--size) var(--size) var(--size);
    flex-grow: 1;
    display: flex;
    flex-direction: column;

    .whitelist-btn {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      gap: 8px;
      margin-bottom: var(--size);
    }

    .hosts-list {
      flex-grow: 1;

      .empty-state {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 32px;
        text-align: center;
      }

      .warning-note {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 12px;
        background: rgba(255, 193, 7, 0.15);
        border: 1px solid rgba(255, 193, 7, 0.4);
        border-radius: 8px;
        text-align: center;

        span {
          font-size: 13px;
          color: #ffc107;
        }
      }

      .host-item {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 12px;
        background: var(--background-light);
        border-radius: 8px;
        margin-bottom: 8px;

        .host-name {
          font-size: 14px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .remove-btn {
          background: transparent;
          border: none;
          color: var(--muted-foreground);
          padding: 4px 8px;
          cursor: pointer;
          border-radius: 4px;
          transition: color 0.15s ease, background-color 0.15s ease;

          &:hover {
            color: var(--destructive);
            background: var(--background-light-hover);
          }

          i {
            font-size: 14px;
          }
        }
      }
    }
  }
}
