// ==========================================================================
// Monitor.Cat — Data Tables
// ==========================================================================

@use 'tokens' as *;

.monitorcat-wrap {
  .mc-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-family: $mc-font-body;
    font-size: 0.9375rem;

    thead th {
      font-size: 0.75rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: $mc-text-light;
      text-align: left;
      padding: 0.75rem 1rem;
      border-bottom: 2px solid $mc-border-color;
      white-space: nowrap;
    }

    tbody td {
      padding: 1rem;
      color: $mc-text;
      border-bottom: 1px solid $mc-border-color;
      vertical-align: middle;
    }

    tbody tr {
      transition: background-color $mc-transition-base;

      &:hover {
        background-color: rgba($mc-base, 0.6);
      }

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

    // Alignment helpers
    .mc-td-right {
      text-align: right;
    }

    .mc-td-center {
      text-align: center;
    }

    // Numeric column — tabular figures
    .mc-td-num {
      font-variant-numeric: tabular-nums;
      text-align: right;
    }
  }

  // ---------------------------------------------------------------------------
  // Compact variant
  // ---------------------------------------------------------------------------
  .mc-table-compact {
    thead th {
      padding: 0.5rem 0.75rem;
    }

    tbody td {
      padding: 0.625rem 0.75rem;
    }
  }

  // ---------------------------------------------------------------------------
  // Striped rows
  // ---------------------------------------------------------------------------
  .mc-table-striped {
    tbody tr:nth-child(even) {
      background-color: rgba($mc-base, 0.4);
    }
  }

  // ---------------------------------------------------------------------------
  // Table inside a card (no outer border)
  // ---------------------------------------------------------------------------
  .mc-table-card {
    margin: -1.5rem;
    width: calc(100% + 3rem);

    thead th:first-child,
    tbody td:first-child {
      padding-left: 1.5rem;
    }

    thead th:last-child,
    tbody td:last-child {
      padding-right: 1.5rem;
    }
  }

  // ---------------------------------------------------------------------------
  // Responsive wrapper
  // ---------------------------------------------------------------------------
  .mc-table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: $mc-radius-inset;

    // Fade hint when content overflows horizontally
    position: relative;

    &.is-scrollable {
      &::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 32px;
        background: linear-gradient(to right, transparent, rgba($mc-white, 0.85));
        pointer-events: none;
        border-radius: 0 $mc-radius-inset $mc-radius-inset 0;
        transition: opacity $mc-transition-base;
      }

      &.is-scrolled-end::after {
        opacity: 0;
      }
    }
  }

  // ---------------------------------------------------------------------------
  // Mobile: stack table rows as cards
  // ---------------------------------------------------------------------------
  @media (max-width: 600px) {
    .mc-table-responsive-cards {
      .mc-table {
        thead {
          // Visually hidden but accessible to screen readers
          position: absolute;
          width: 1px;
          height: 1px;
          padding: 0;
          margin: -1px;
          overflow: hidden;
          clip: rect(0, 0, 0, 0);
          border: 0;
        }

        tbody tr {
          display: block;
          padding: 0.75rem 1rem;
          margin-bottom: 0.5rem;
          background: $mc-white;
          border: 1px solid $mc-border-color;
          border-radius: $mc-radius-inset;

          &:hover {
            background-color: $mc-white;
          }

          &:last-child {
            margin-bottom: 0;
          }
        }

        tbody td {
          display: flex;
          justify-content: space-between;
          align-items: baseline;
          gap: 0.75rem;
          padding: 0.375rem 0;
          border-bottom: 1px solid rgba($mc-border-color, 0.5);
          font-size: 0.875rem;

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

          // Use data-label attribute for row labels
          &[data-label]::before {
            content: attr(data-label);
            font-size: 0.75rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            color: $mc-text-light;
            flex-shrink: 0;
            min-width: 0;
          }
        }
      }
    }
  }

  // ---------------------------------------------------------------------------
  // Widescreen: constrain table max-width for readability
  // ---------------------------------------------------------------------------
  @media (min-width: 1600px) {
    .mc-table {
      tbody td,
      thead th {
        &:first-child {
          padding-left: 1.25rem;
        }

        &:last-child {
          padding-right: 1.25rem;
        }
      }
    }
  }
}