// -----------------------------------------------------------------------------
// Table Component Styles - Reusable table designs
// -----------------------------------------------------------------------------

// Base table styles
.data-table {
  width: 100%;
  background: $white;
  border-radius: $border-radius-lg;
  overflow: hidden;
  box-shadow: $shadow-sm;

  // Table wrapper for responsive scrolling
  &-wrapper {
    overflow-x: auto;
    margin-bottom: $spacing-xl;

    @media (max-width: $breakpoint-sm) {
      border-radius: $border-radius-lg;
      box-shadow: $shadow-sm;
    }
  }

  table {
    width: 100%;
    border-collapse: collapse;

    thead {
      background: $light-bg;

      tr {
        border-bottom: 2px solid $border-gray;
      }

      th {
        padding: $spacing-md $spacing-lg;
        text-align: left;
        font-size: $font-size-sm;
        font-weight: $font-weight-semibold;
        color: $text-dark;
        white-space: nowrap;

        @media (max-width: $breakpoint-sm) {
          padding: $spacing-sm $spacing-md;
          font-size: $font-size-xs;
        }
      }
    }

    tbody {
      tr {
        border-bottom: 1px solid $border-gray;
        transition: $transition-base;

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

        &:hover {
          background-color: rgba($primary-blue, 0.02);
        }
      }

      td {
        padding: $spacing-md $spacing-lg;
        font-size: $font-size-sm;
        color: $text-gray;

        @media (max-width: $breakpoint-sm) {
          padding: $spacing-sm $spacing-md;
          font-size: $font-size-xs;
        }

        a {
          color: $text-dark;
          text-decoration: none;
          transition: $transition-base;

          &:hover {
            color: $primary-blue;
          }
        }
      }
    }
  }
}

// Notice board table (list view with columns)
.notice-table {
  width: 100%;
  background: $white;
  border-radius: $border-radius-lg;
  overflow: hidden;
  box-shadow: $shadow-sm;

  &-wrapper {
    overflow-x: auto;

    @media (max-width: $breakpoint-sm) {
      border-radius: 0;
      box-shadow: none;
    }
  }

  // Table header
  .table-header {
    display: grid;
    grid-template-columns: 80px 1fr 120px;
    gap: $spacing-md;
    padding: $spacing-md $spacing-lg;
    background: $light-bg;
    border-bottom: 2px solid $border-gray;
    font-size: $font-size-sm;
    font-weight: $font-weight-semibold;
    color: $text-dark;

    @media (max-width: $breakpoint-md) {
      grid-template-columns: 60px 1fr 100px;
      padding: $spacing-sm $spacing-md;
      font-size: $font-size-xs;
    }

    @media (max-width: $breakpoint-sm) {
      display: none; // Hide header on mobile
    }

    .col-num {
      text-align: center;
    }

    .col-title {
      text-align: left;
    }

    .col-date {
      text-align: center;
    }
  }

  // Table rows
  .table-row {
    display: grid;
    grid-template-columns: 80px 1fr 120px;
    gap: $spacing-md;
    padding: $spacing-lg;
    border-bottom: 1px solid $border-gray;
    transition: $transition-base;
    cursor: pointer;

    @media (max-width: $breakpoint-md) {
      grid-template-columns: 60px 1fr 100px;
      padding: $spacing-md;
    }

    @media (max-width: $breakpoint-sm) {
      grid-template-columns: 1fr;
      gap: $spacing-sm;
      padding: $spacing-md;
    }

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

    &:hover {
      background-color: rgba($primary-blue, 0.02);
    }

    .col-num {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: $font-size-sm;
      color: $text-gray;
      font-weight: $font-weight-medium;

      @media (max-width: $breakpoint-sm) {
        display: none;
      }
    }

    .col-title {
      display: flex;
      align-items: center;
      font-size: $font-size-base;
      color: $text-dark;
      font-weight: $font-weight-medium;

      @media (max-width: $breakpoint-sm) {
        font-size: $font-size-sm;
      }

      a {
        color: inherit;
        text-decoration: none;
        display: flex;
        align-items: center;
        gap: $spacing-sm;
        transition: $transition-base;

        &:hover {
          color: $primary-blue;
        }
      }

      .file-icon {
        display: inline-flex;
        align-items: center;
        margin-left: $spacing-sm;
        opacity: 0.6;

        img {
          width: 16px;
          height: 16px;
        }
      }
    }

    .col-date {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: $font-size-sm;
      color: $text-light;

      @media (max-width: $breakpoint-sm) {
        justify-content: flex-start;
        font-size: $font-size-xs;
        padding-top: $spacing-xs;
      }
    }
  }

  // Mobile label for date
  @media (max-width: $breakpoint-sm) {
    .table-row .col-date::before {
      content: '등록일: ';
      color: $text-gray;
      margin-right: $spacing-xs;
    }
  }
}

// Empty state for tables
.table-empty {
  padding: $spacing-5xl $spacing-lg;
  text-align: center;
  background: $white;
  border-radius: $border-radius-lg;

  .empty-icon {
    margin-bottom: $spacing-lg;

    img {
      max-width: 200px;
      opacity: 0.7;

      @media (max-width: $breakpoint-sm) {
        max-width: 150px;
      }
    }
  }

  .empty-text {
    font-size: $font-size-base;
    color: $text-gray;

    @media (max-width: $breakpoint-sm) {
      font-size: $font-size-sm;
    }
  }
}

// -----------------------------------------------------------------------------
// List Table - Modern design with colored header (Figma: 984-2173)
// Used in: User management, API key list, etc.
// -----------------------------------------------------------------------------
.list-table {
  width: 100%;
  background: $white;
  border-radius: $border-radius-lg;
  overflow: hidden;

  &-wrapper {
    overflow-x: auto;
    margin-bottom: $spacing-xl;
  }

  // Table Header - Blue background with white text
  .list-table-header {
    display: flex;
    align-items: center;
    background: #3BA4ED;
    height: 72px;
    padding: 0 $spacing-lg;

    @media (max-width: $breakpoint-md) {
      display: none;
    }

    .header-cell {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: $spacing-sm $spacing-md;
      font-size: 20px;
      font-weight: $font-weight-bold;
      color: $white;
      text-align: center;
    }
  }

  // Table Body
  .list-table-body {
    display: flex;
    flex-direction: column;
  }

  // Table Row
  .list-table-row {
    display: flex;
    align-items: center;
    height: 54px;
    padding: $spacing-sm $spacing-lg;
    transition: $transition-base;

    // Alternating row colors
    &:nth-child(even) {
      background-color: #EDF5FD;
    }

    &:nth-child(odd) {
      background-color: $white;
    }

    &:hover {
      background-color: rgba($primary-blue, 0.08);
    }

    @media (max-width: $breakpoint-md) {
      flex-direction: column;
      align-items: flex-start;
      gap: $spacing-sm;
      padding: $spacing-md;
    }

    .row-cell {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: $spacing-sm $spacing-md;
      font-size: 16px;
      color: #515151;
      text-align: center;
      white-space: nowrap;

      @media (max-width: $breakpoint-md) {
        font-size: $font-size-sm;
        padding: $spacing-xs 0;

        &::before {
          content: attr(data-label);
          font-weight: $font-weight-semibold;
          color: $text-gray;
          margin-right: $spacing-sm;
          min-width: 80px;
          text-align: left;
        }
      }

      // Title cell with inline file icon
      &--title {
        justify-content: flex-start;

        @media (max-width: $breakpoint-md) {
          &::before {
            display: none; // Hide data-label for title on mobile
          }
        }

        .notice-title-link {
          display: inline-flex;
          align-items: center;
          gap: $spacing-sm;
          color: inherit;
          text-decoration: none;
          transition: $transition-base;

          &:hover {
            color: $primary-blue;
          }

          // Mobile number prefix [1] [2] etc
          .notice-number {
            display: none;
            font-weight: $font-weight-medium;
            color: $text-gray;
            flex-shrink: 0;

            @media (max-width: $breakpoint-md) {
              display: inline;
            }
          }
        }

        .file-icon {
          display: inline-flex;
          align-items: center;
          flex-shrink: 0;
          color: #212529;

          svg {
            width: 24px;
            height: 24px;
          }
        }
      }

      // Number cell for notice list
      &--number {
        @media (max-width: $breakpoint-md) {
          display: none; // Hide separate number cell on mobile
        }
      }
    }

    // Action buttons container
    .row-actions {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 14px;
      flex-wrap: nowrap;

      @media (max-width: $breakpoint-md) {
        width: 100%;
        justify-content: flex-start;
        padding-top: $spacing-sm;
      }
    }
  }
}

// List table action buttons
.list-table-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: $spacing-sm $spacing-md;
  height: 40px;
  white-space: nowrap;
  border-radius: $border-radius-md;
  font-size: $font-size-base;
  font-weight: $font-weight-regular;
  color: #000000;
  border: none;
  cursor: pointer;
  transition: $transition-base;
  white-space: nowrap;

  &:hover {
    transform: translateY(-1px);
    box-shadow: $shadow-sm;
  }

  &:active {
    transform: translateY(0);
  }

  // Button variants
  &--default {
    background-color: #DADADA;

    &:hover {
      background-color: darken(#DADADA, 5%);
    }
  }

  &--primary {
    background-color: #A4D6EA;

    &:hover {
      background-color: darken(#A4D6EA, 5%);
    }
  }

  &--secondary {
    background-color: #CDD4F0;

    &:hover {
      background-color: darken(#CDD4F0, 5%);
    }
  }
}

// -----------------------------------------------------------------------------
// Pagination - Table pagination controls
// -----------------------------------------------------------------------------
.table-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  padding: $spacing-xl 0;

  .pagination-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: none;
    border: none;
    cursor: pointer;
    color: #212529;
    transition: $transition-base;

    &:hover {
      color: $primary-blue;
    }

    &:disabled {
      opacity: 0.4;
      cursor: not-allowed;
    }

    i {
      font-size: $font-size-base;
    }
  }

  .pagination-numbers {
    display: flex;
    align-items: center;
    gap: 13px;
  }

  .pagination-number {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 10px;
    height: 21px;
    font-size: 18px;
    color: #5F666C;
    background: none;
    border: none;
    cursor: pointer;
    transition: $transition-base;

    &:hover {
      color: $primary-blue;
    }

    &.active {
      font-weight: $font-weight-bold;
      color: #212529;
    }
  }
}

// Search and filter section for tables
.table-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: $spacing-lg;
  padding: 0 $spacing-sm;
  gap: $spacing-lg;

  @media (max-width: $breakpoint-sm) {
    flex-direction: column;
    align-items: stretch;
    gap: $spacing-md;
  }

  .total-count {
    font-size: $font-size-base;
    color: $text-gray;
    margin-bottom: 0;

    strong {
      color: $primary-blue;
      font-weight: $font-weight-semibold;
      font-size: $font-size-lg;
    }

    @media (max-width: $breakpoint-sm) {
      order: 2;
      text-align: center;
    }
  }

  .search-box {
    display: flex;
    gap: $spacing-sm;

    @media (max-width: $breakpoint-sm) {
      order: 1;
    }

    input {
      flex: 1;
      min-width: 250px;
      padding: $spacing-sm $spacing-md;
      border: 1px solid $border-gray;
      border-radius: $border-radius-md;
      font-size: $font-size-sm;
      transition: $transition-base;

      @media (max-width: $breakpoint-sm) {
        min-width: auto;
      }

      &:focus {
        outline: none;
        border-color: $primary-blue;
        box-shadow: 0 0 0 3px rgba($primary-blue, 0.1);
      }

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

    //button {
    //  padding: $spacing-sm $spacing-lg;
    //
    //  color: $white;
    //  border: none;
    //  border-radius: $border-radius-md;
    //  font-size: $font-size-sm;
    //  font-weight: $font-weight-medium;
    //  cursor: pointer;
    //  transition: $transition-base;
    //  white-space: nowrap;
    //
    //  &:hover {
    //    transform: translateY(-2px);
    //    box-shadow: $shadow-md;
    //  }
    //
    //  &:active {
    //    transform: translateY(0);
    //  }
    //
    //  i {
    //    margin-right: $spacing-xs;
    //  }
    //}
  }
}

// -----------------------------------------------------------------------------
// Mobile Notice List Styles (Figma: 1161-8656)
// 공지사항 모바일 디자인 - 검색창, 목록, 페이지네이션
// -----------------------------------------------------------------------------
@media (max-width: $breakpoint-sm) {
  // 검색 필드 - Figma: 335px × 40px, border-radius 8px
  .search-field {
    display: flex;
    align-items: center;
    width: 100%;
    height: 40px;
    background: $white;
    border: 1px solid #dadada;
    border-radius: 8px;
    position: relative;

    input {
      flex: 1;
      height: 100%;
      padding: 0 40px 0 16px;
      border: none;
      background: transparent;
      font-size: 12px;
      color: #212529;

      &::placeholder {
        color: #8c959f;
        font-size: 12px;
      }

      &:focus {
        outline: none;
      }
    }

    .search-field-btn {
      position: absolute;
      right: 12px;
      top: 50%;
      transform: translateY(-50%);
      width: 18px;
      height: 18px;
      padding: 0;
      background: none;
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;

      svg {
        width: 18px;
        height: 18px;
        color: #515961;
      }
    }
  }

  // Table Controls 모바일 레이아웃
  .table-controls {
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
    padding: 0;
    margin-bottom: 0;

    .total-count {
      order: 2;
      text-align: left;
      font-size: 16px;
      color: $black;
      padding-bottom: 6px;
      border-bottom: 1.5px solid #212529;
      margin-bottom: 0;

      strong {
        color: #0049b4;
        font-weight: $font-weight-bold;
        font-size: 16px;
      }
    }

    .search-field {
      order: 1;
    }
  }

  // 공지사항 목록 테이블 - Figma 모바일 디자인
  .list-table {
    background: transparent;
    border-radius: 0;

    // 헤더 숨김
    .list-table-header {
      display: none;
    }

    // 목록 본문
    .list-table-body {
      display: flex;
      flex-direction: column;
    }

    // 목록 행 - Figma: 56px 높이
    .list-table-row {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      height: 56px;
      padding: 0 8px;
      background: transparent !important;
      border-bottom: 1px solid #dadada;

      &:hover {
        background: rgba($primary-blue, 0.02) !important;
      }

      // NO 컬럼 숨김
      .row-cell--number {
        display: none;
      }

      // 제목 컬럼 - Figma: 15px Regular #212529
      .row-cell--title {
        flex: 1;
        justify-content: flex-start;
        padding: 0;
        font-size: 15px;
        font-weight: $font-weight-regular;
        color: #212529;

        &::before {
          display: none;
        }

        .notice-title-link {
          display: flex;
          align-items: center;
          gap: 8px;
          color: inherit;
          text-decoration: none;

          .notice-number {
            display: none;
          }

          .file-icon {
            display: inline-flex;
            align-items: center;
            flex-shrink: 0;
            margin-left: 4px;

            svg {
              width: 18px;
              height: 18px;
            }
          }
        }
      }

      // 날짜 컬럼 - Figma: 14px Regular #212529
      .row-cell:last-child {
        flex-shrink: 0;
        width: auto;
        padding: 0;
        font-size: 14px;
        font-weight: $font-weight-regular;
        color: #212529;
        justify-content: flex-end;

        &::before {
          display: none;
        }
      }
    }
  }

  // 페이지네이션 - Figma: 15px, gap 13px
  .pagination {
    gap: 13px;
    padding: $spacing-lg 0;

    .pagination-btn {
      width: 20px;
      height: 20px;

      i, svg {
        font-size: 14px;
        width: 14px;
        height: 14px;
      }
    }

    .pagination-numbers {
      gap: 13px;
    }

    .pagination-number {
      min-width: 10px;
      height: 21px;
      font-size: 15px;
      color: #5f666c;
      font-weight: $font-weight-regular;

      &.active {
        font-weight: $font-weight-bold;
        color: #212529;
      }
    }
  }
}