/* =========================================
       GLOBAL PAGE STYLES
       ========================================= */
    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      padding: 20px;
      max-width: 800px; /* Keeps the page from getting too wide */
      margin: 0 auto;   /* Centers the content on the screen */
      color: #333;
    }
    h2 {
      margin-top: 40px;
      border-bottom: 2px solid #333;
      padding-bottom: 5px;
    }

    /* =========================================
       1. BASE TABLE STYLES (Applied to all tables)
       ========================================= */
    .base-table {
      width: 100%;
      border-collapse: collapse; /* Merges double borders into one */
      margin-bottom: 10px;
    }
    .base-table caption {
      font-size: 1.2rem;
      font-weight: bold;
      margin-bottom: 10px;
      text-align: left;
    }
    .base-table th, 
    .base-table td {
      border: 1px solid #dddddd;
      padding: 12px 15px;
      text-align: left;
    }
    .base-table th {
      background-color: #f4f7f6;
      font-weight: bold;
    }
    /* Zebra striping for readability */
    .base-table tbody tr:nth-child(even) {
      background-color: #fcfcfc;
    }
    /* Hover effect */
    .base-table tbody tr:hover {
      background-color: #f1f1f1;
    }

    /* =========================================
       2. SCROLL WRAPPER STYLES (Method 1)
       ========================================= */
    .table-scroll-wrapper {
      width: 100%;
      overflow-x: auto; /* Enables horizontal scrolling */
      -webkit-overflow-scrolling: touch;
      border: 1px solid #ddd; /* Visual boundary for the scroll area */
    }
    /* Force this specific table to stay wide so it scrolls on mobile */
    .table-scroll-wrapper .base-table {
      min-width: 600px; 
      margin-bottom: 0;
      border: none;
    }

    /* =========================================
       3. RESPONSIVE CARD STYLES (Method 2)
       ========================================= */
    /* This rule only activates on screens smaller than 600px */
    @media (max-width: 600px) {
      /* Break the grid and make everything stack */
      .responsive-card-table, 
      .responsive-card-table tbody, 
      .responsive-card-table tr, 
      .responsive-card-table td {
        display: block;
        width: 100%;
        box-sizing: border-box; /* Ensures padding doesn't break width */
      }
      
      /* Hide the main header */
      .responsive-card-table thead {
        display: none;
      }
      
      /* Turn each row into a stylized card */
      .responsive-card-table tr {
        margin-bottom: 20px;
        border: 1px solid #ccc;
        border-radius: 8px;
        overflow: hidden; /* Keeps corners rounded */
      }
      
      /* Format the data cells */
      .responsive-card-table td {
        text-align: right;
        padding: 12px 15px;
        border: none; /* Remove default borders */
        border-bottom: 1px solid #eee;
        position: relative;
      }
      .responsive-card-table td:last-child {
        border-bottom: none; /* Clean up the bottom of the card */
      }
      
      /* Inject the data-label on the left side of the cell */
      .responsive-card-table td::before {
        content: attr(data-label);
        float: left;
        font-weight: bold;
        text-transform: uppercase;
        font-size: 0.85rem;
        color: #666;
      }
    }

    /* =========================================
       4. MERGED CELL HIGHLIGHTS
       ========================================= */
    .highlight-center {
      text-align: center;
      background-color: #e2e8f0 !important;
      font-weight: bold;
    }
    .highlight-tall {
      background-color: #e6f3ff !important; /* Light blue */
    }