/* Basic table styling */
    #expenseTable {
      width: 100%;
      border-collapse: collapse;
      margin-bottom: 1em;
    }
    #expenseTable th, #expenseTable td {
      border: 1px solid #ccc;
      padding: 8px;
      text-align: left;
    }
    /* Hover + pointer on TH for sorting (we only sort column 0) */
    #expenseTable th {
      background-color: #f2f2f2;
    }
    #expenseTable th:hover {
      background-color: #e4e4e4;
    }
    /* Only column 0 (Period) should be clickable (for sorting). */
    th[data-col="0"] {
      cursor: pointer;
    }
    /* For columns 1–5, 6 we remove the pointer. */
    th[data-col="1"],
    th[data-col="2"],
    th[data-col="3"],
    th[data-col="4"],
    th[data-col="5"],
    th[data-col="6"] {
      cursor: default;
    }

    /* Pagination styling */
    .pagination {
      text-align: center;
      margin: 20px 0;
    }
    .pagination button {
      margin: 0 3px;
      padding: 6px 12px;
      cursor: pointer;
      border: 1px solid #666;
      background-color: #fff;
      outline: none;
    }
    .pagination button:hover {
      background-color: #eee;
    }
    .pagination button.active {
      background-color: #666;
      color: #fff;
    }
    .pagination button:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }