/* Scoped styles: apply only to tables inside .styled-table-wrapper */
    .styled-table-wrapper table {
      width: 100%;
      border-collapse: collapse;
      background-color: #ffffff;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      border-radius: 8px;
      overflow: hidden;
    }

    .styled-table-wrapper thead {
      background-color: #007BFF;
      color: white;
    }

    .styled-table-wrapper th,
    .styled-table-wrapper td {
      padding: 16px 20px;
      text-align: left;
    }

    .styled-table-wrapper tbody tr:nth-child(odd) {
      background-color: #f9fafb;
    }

    .styled-table-wrapper tbody tr:hover {
      background-color: #e0f0ff;
      cursor: pointer;
    }

    .styled-table-wrapper th {
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.03em;
    }

    .styled-table-wrapper td {
      color: #333;
      font-size: 15px;
    }

/* 
    table {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      width: 80%;
      margin: auto;
      border-collapse: collapse;
      background-color: #ffffff;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      border-radius: 8px;
      overflow: hidden;
    }

    thead {
      background-color: #007BFF;
      color: white;
    }

    th, td {
      padding: 16px 20px;
      text-align: left;
    }

    tbody tr:nth-child(odd) {
      background-color: #f9fafb;
    }

    tbody tr:hover {
      background-color: #e0f0ff;
      cursor: pointer;
    }

    th {
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.03em;
    }

    td {
      color: #333;
      font-size: 15px;
    } */