/* ==========================================================================
   1. MAIN WRAPPER BOUNDARIES
   ========================================================================== */
div.dataTables_wrapper,
.dataTables_wrapper,
div.dt-container {
    font-family: Arial, Helvetica, sans-serif;
    margin: 20px 0;
    width: 100%;
    max-width: 100%;
    display: block;
    box-sizing: border-box;
}

/* ==========================================================================
   2. TABLE CONTAINMENT & AUTO TEXT WRAPPING
   ========================================================================== */
div.dataTables_wrapper table.dataTable#megatone-csv-table,
div.dt-container table#megatone-csv-table {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    clear: both;
    border-collapse: collapse;
    box-sizing: border-box;
    table-layout: fixed; 
}

div.dataTables_wrapper table#megatone-csv-table th,
div.dataTables_wrapper table#megatone-csv-table td,
div.dt-container table#megatone-csv-table th,
div.dt-container table#megatone-csv-table td {
    box-sizing: border-box;
    white-space: normal;      
    word-wrap: break-word;     
    overflow-wrap: break-word; 
}

/* DESKTOP COLUMN RATIOS: */
div.dataTables_wrapper table#megatone-csv-table th:first-child,
div.dataTables_wrapper table#megatone-csv-table td.spec-property,
div.dt-container table#megatone-csv-table th:first-child,
div.dt-container table#megatone-csv-table td.spec-property {
    width: 35%;
}

/* ==========================================================================
   3. SEARCH BOX align Right
   ========================================================================== */
/* Position the search block container cleanly to the right */
div.dataTables_wrapper div.dataTables_filter,
div.dt-container div.dt-filter,
.dataTables_filter,
.dt-search {
    float: right;
    margin-bottom: 15px;
    font-size: 14px;
    font-weight: bold;
    text-align: right;
}

/* ATTRIBUTE & ELEMENT CHAIN SPECIFICITY:
   override theme's global form label color naturally.
*/
div.dataTables_wrapper label[for^="dt-search-"],
div.dt-container label[for^="dt-search-"],
.dataTables_wrapper label,
label[for="dt-search-0"] {
    color: #FFFFFF;
}

/* Style the text input box itself (dark text inside a clean white field) */
div.dataTables_wrapper div.dataTables_filter input,
div.dt-container div.dt-filter input,
input[type="search"]#dt-search-0 {
    font-family: Arial, sans-serif;
    background-color: #FFFFFF;
    color: #333333;
    border: 1px solid #CCCCCC;
    border-radius: 4px;
    padding: 6px 12px;
    margin-left: 8px;
    font-size: 14px;
    outline: none;
    font-weight: normal;
}

/* ==========================================================================
   4. ALIGN ALL TEXT TO THE LEFT
   ========================================================================== */
div.dataTables_wrapper table#megatone-csv-table th,
div.dataTables_wrapper table#megatone-csv-table td,
div.dt-container table#megatone-csv-table th,
div.dt-container table#megatone-csv-table td {
    text-align: left;
}

/* ==========================================================================
   5. TABLE HEADERS & INTERACTIVE ROW SHADING
   ========================================================================== */
/* Main structured top data headers */
div.dataTables_wrapper table#megatone-csv-table th,
div.dt-container table#megatone-csv-table th {
    background-color: #F8F9FA;
    color: #333333;
    font-weight: bold;
}


/* Left-hand side high-contrast Property Labels column configuration */
div.dataTables_wrapper table#megatone-csv-table tbody tr td.spec-property,
div.dt-container table#megatone-csv-table tbody tr td.spec-property {
    font-weight: bold;
    color: #111111;
    border-right: 1px solid #E5E7EB;
}

/* Right-hand side Value Metrics column configuration */
div.dataTables_wrapper table#megatone-csv-table tbody tr td:not(.spec-property),
div.dt-container table#megatone-csv-table tbody tr td:not(.spec-property) {
    color: #4B5563;
}

/* Alternating Row Shading: Sets odd rows to pure white, even rows to off-white */
div.dataTables_wrapper table#megatone-csv-table tbody tr:nth-of-type(odd),
div.dt-container table#megatone-csv-table tbody tr:nth-of-type(odd) {
    background-color: #FFFFFF;
}

div.dataTables_wrapper table#megatone-csv-table tbody tr:nth-of-type(even),
div.dt-container table#megatone-csv-table tbody tr:nth-of-type(even) {
    background-color: #F9FAFB;
}

/* Hover Row: Soft Blue */
div.dataTables_wrapper table#megatone-csv-table tbody tr:hover,
div.dt-container table#megatone-csv-table tbody tr:hover,
div.dataTables_wrapper table#megatone-csv-table tbody tr:hover td,
div.dt-container table#megatone-csv-table tbody tr:hover td {
    background-color: #EBF5FF;
}
/* ==========================================================================
   6. SUB-SECTION BANNERS
   ========================================================================== */
div.dataTables_wrapper table#megatone-csv-table tbody tr td.section-sub-banner,
div.dt-container table#megatone-csv-table tbody tr td.section-sub-banner {
    background-color: #1B77FD; 
    color: #FFFFFF;
}

/* ==========================================================================
   7. STACKED TOP MAIN BANNER ENGINE (INSIDE TABLE HEAD)
   ========================================================================== */
/* Core styling for the main top blue specification bar */
div.dataTables_wrapper table#megatone-csv-table thead tr th.top-main-blue-banner,
div.dt-container table#megatone-csv-table thead tr th.top-main-blue-banner {
    background-color: #1B77FD;
    color: #FFFFFF;
}

/* ==========================================================================
   8. ELEMENTOR EDITOR COMPATIBILITY PATCH
   ========================================================================== */
/* Forces correct alignment and styling when viewed inside the Elementor editor panel */
.elementor-editor-active div.dataTables_wrapper table#megatone-csv-table th,
.elementor-editor-active div.dt-container table#megatone-csv-table th {
    background-color: #F8F9FA;
    color: #333333;
    padding: 10px 18px;
}

.elementor-editor-active th.top-main-blue-banner {
    background-color: #1B77FD !important;
    color: #FFFFFF !important;
}

.elementor-editor-active div.dataTables_wrapper table#megatone-csv-table,
.elementor-editor-active div.dt-container table#megatone-csv-table {
    border-collapse: collapse !important;
    width: 100% !important;
}

/* Ensures text stays left-aligned inside Elementor's editor wrapper */
.elementor-editor-active div.dt-container table#megatone-csv-table th,
.elementor-editor-active div.dt-container table#megatone-csv-table td {
    text-align: left !important;
}

/* Hardens sub-section background colors so Elementor cannot make them white */
.elementor-editor-active table#megatone-csv-table tbody tr td.section-sub-banner {
    background-color: #1B77FD !important;
    color: #FFFFFF !important;
}