/* =============================================================================
   RESPONSIVE DESIGN FOR ULTRA-WIDE MONITORS
   ============================================================================= */

@media (min-width: 3000px) {
    .data-table {
        background:#0d1117;
        border-radius: 12px;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
        border: 1px solid #30363d;
        width: 100%;
        height: calc(100vh - 200px);
        display: flex;
        flex-direction: column;
        overflow: auto;
    }

    .data-table table {
        width: auto; 
        min-width: 100%;
        border-collapse: collapse;
        table-layout: auto; 
        font-size: 8px;
        display: table;
        font-family: "DIN", "Segoe UI", sans-serif;

    }

    .data-table thead {
        background: linear-gradient(135deg, #21262d 0%, #30363d 100%);
        position: sticky;
        top: 0;
        z-index: 30; 
        display: table-header-group;
    }

    .data-table tbody {
        overflow-y: auto;
        max-height: calc(100vh - 250px);
        display: table-row-group;
    }

    .data-table thead tr, .data-table tbody tr {
        display: table-row;
    }

    .data-table td:hover {
        background: rgba(177, 170, 170, 0.3);
        color: #000000; 
    }

    .data-table th {
        background:  #000000 !important;
        color: #ffffff;
        padding: 4px 2px;
        text-align: center;
        border-bottom: 1px solid #30363d;
        border-right: 1px solid #30363d;
        font-size: 11px; 
        white-space: nowrap;
        overflow: visible;
        text-overflow: clip;
        cursor: pointer;
        transition: background 0.3s ease;
        line-height: 1.5;
        width: auto;
        min-width: auto;
        max-width: none !important;
        display: table-cell;
    }

    .data-table th:hover {
        background: rgba(86, 82, 82, 0.06) !important;
    }

    .data-table th:last-child {
        border-right: none;
    }

    .data-table td {
        padding: 4px 2px;
        border-bottom: 1px solid #30363d;
        border-right: 1px solid #30363d;
        background: rgba(88, 166, 255, 0.15);;
        color: #000000;
        font-size: 12px;
        font-weight: bold !important; 
        white-space: nowrap;
        overflow: visible;
        text-overflow: clip;
        vertical-align: middle;
        text-align: center;
        line-height: 1.2;
        width: auto;
        min-width: auto;
        max-width: none !important;
        display: table-cell;
        font-weight: bold !important; 
    }

    .data-table tr:hover td {
        background: rgba(86, 82, 82, 0.06) !important;
        color: #000000; 
    }

    .data-table th:nth-child(1) {
        padding: 2px 2px;
        position: sticky;
        left: 0;
        z-index: 50; 
        background: #000000 !important;
        color: #ffffff !important;
        box-shadow: 2px 0 5px rgba(0, 0, 0, 0.2);
        width: 120px !important; 
        min-width: 120px !important;
        max-width: 120px !important;
    }

    .data-table th:nth-child(2) {
        padding: 2px 2px;
        position: sticky;
        left: 120px; 
        z-index: 49; 
        background: #000000 !important;
        color: #ffffff !important;
        box-shadow: 2px 0 5px rgba(0, 0, 0, 0.2);
        width: 60px !important;
        min-width: 60px !important;
        max-width: 60px !important;
    }

    .data-table td:nth-child(1) {
        position: sticky;
        left: 0;
        z-index: 15; 
        background: #000000 !important;
        color: #ffffff !important;
        box-shadow: 2px 0 5px rgba(0, 0, 0, 0.2);
        width: 125px !important; 
        min-width: 125px !important;
        max-width: 125px !important;
    }

    .data-table tr:hover td:nth-child(1),
    .data-table tr:hover td:nth-child(2) {
        background: #333333 !important;
        color: #ffffff !important;
    }

    .data-table th:nth-child(1):hover,
    .data-table th:nth-child(2):hover {
        background: #333333 !important;
        color: #ffffff !important;
    }
    .data-table td {
        transition: background-color 1s ease, color 1s ease; 
    }

    .data-table td {
        transition: background-color 0.5s ease, color 0.5s ease; 
        opacity: 1 !important; 
    }
    .data-table td.light-blue,
    .data-table td.light-red,
    .data-table td.light-green,
    .data-table td.light-yellow,
    .data-table td.dark-green,
    .data-table td.light-purple,
    .data-table td.grey,
    .data-table td.light-grey,
    .data-table td.black-white,
    .data-table td.dark-orange,
    .data-table td.magenta,
    .data-table td.dark-blue,
    .data-table td.black {
        opacity: 1 !important;
    }

}