.comp-table-wrapper {
      width: 100%;
      max-width: 100%;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      margin: 20px 0;
      font-family: "Tahoma", "Segoe UI", Arial, sans-serif;
      box-sizing: border-box;
    }
    .comp-table-wrapper * {
      box-sizing: border-box;
    }
    .comp-table {
      width: 100%;
      min-width: 900px; /* يضمن ظهور السكرول الأفقي في الشاشات الصغيرة */
      border-collapse: collapse;
      font-size: 15px;
      text-align: center;
      background: #fff;
    }
    .comp-table th,
    .comp-table td {
      border: 1px solid #e0e0e0;
      padding: 12px 10px;
      white-space: normal;
      vertical-align: middle;
    }
    .comp-table thead th {
      background-color: #1f2d3d;
      color: #ffffff;
      font-weight: 700;
      font-size: 15px;
    }
    .comp-table tbody tr:nth-child(even) {
      background-color: #f7f8fa;
    }
    .comp-table tbody th {
      background-color: #edf1f7;
      font-weight: 700;
      text-align: right;
    }
    /* تحديد عمود "الهلال الذهبي" بلون مختلف */
    .comp-table .highlight-col {
      background-color: #fff4d6 !important;
      color: #7a5b00;
      font-weight: 600;
    }
    .comp-table thead th.highlight-col {
      background-color: #d4a017 !important;
      color: #ffffff;
    }

    /* شريط تمرير أنعم في الشاشات الصغيرة */
    .comp-table-wrapper::-webkit-scrollbar {
      height: 8px;
    }
    .comp-table-wrapper::-webkit-scrollbar-thumb {
      background-color: #c7c7c7;
      border-radius: 10px;
    }
    .comp-table-wrapper::-webkit-scrollbar-track {
      background-color: #f1f1f1;
    }

    @media (max-width: 768px) {
      .comp-table {
        font-size: 13px;
      }
      .comp-table th,
      .comp-table td {
        padding: 8px 6px;
      }
    }