/*
 Theme Name:     Business Content
 Theme URI:      https://www.elegantthemes.com/gallery/divi/
 Description:    Business Content Official Website Theme
 Author:         Unreal Web Marketing - SM
 Author URI:     https://www.elegantthemes.com
 Template:       Divi
 Version:        1.0.0
*/


/* =Theme customization starts here
------------------------------------------------------- */
      
        
        .table-wrapper {
            overflow-x: auto;
            width: 100%;
        }
        
        table.dataTable {
            width: 100% !important;
            margin-top: 20px;
        }
        
        table.dataTable thead th {
            background-color: #4a5568;
            color: white;
            font-weight: 600;
            padding: 12px 8px;
        }
        
        table.dataTable tbody td {
            padding: 10px 8px;
            vertical-align: top;
        }
        
        table.dataTable tbody tr:nth-child(odd) {
            background-color: #f9fafb;
        }
        
        table.dataTable tbody tr:nth-child(even) {
            background-color: #ffffff;
        }
        
        table.dataTable tbody tr:hover {
            background-color: #e6f2ff !important;
        }
        
        a {
            color: #3182ce;
            text-decoration: none;
        }
        
        a:hover {
            text-decoration: underline;
        }
        
        .dtr-details {
            background-color: #f7fafc;
        }
        
        /* Responsive control icon styling */
        table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before,
        table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control:before {
            background-color: #3182ce;
            border-radius: 3px;
            box-shadow: 0 0 3px rgba(0,0,0,0.3);
        }
        
        table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td.dtr-control:before,
        table.dataTable.dtr-inline.collapsed > tbody > tr.parent > th.dtr-control:before {
            background-color: #e53e3e;
        }

        /* Define explicit widths for all columns - must total close to 100% */
        #ranking-th { width: 5%; min-width: 60px; }
        #company-name { width: 15%; min-width: 180px; }
        #website { width: 12%; min-width: 150px; }
        #year-founded { width: 8%; min-width: 100px; }
        #city { width: 12%; min-width: 140px; }
        #number-employees { width: 10%; min-width: 120px; }
        #sales-volume { width: 10%; min-width: 120px; }
        #industry { width: 28%; min-width: 250px; }
        
        /* Above 1024px: Fixed layout with text wrapping */
        @media screen and (min-width: 1025px) {
            .container { overflow-x: visible; }
            table.dataTable { table-layout: fixed !important; }
            
            /* Allow headers to wrap to prevent forcing narrow columns */
            table.dataTable thead th { 
                word-wrap: break-word; 
                white-space: normal !important;
                line-height: 1.3;
            }
            
            table.dataTable tbody td {
                word-wrap: break-word !important;
                word-break: break-word !important;
                overflow-wrap: break-word !important;
                white-space: normal !important;
                max-width: 0;
            }
            table.dataTable tbody td a {
                word-break: break-all !important;
                display: inline-block;
                max-width: 100%;
            }
            /* Keep Industry column comfortably wide */
            #companiesTable th:nth-child(8),
            #companiesTable td:nth-child(8) { min-width: 250px; }

            /* --- Desktop-only clamp for the Industry column --- */
            #companiesTable td:nth-child(8) .industry-wrap{
                position: relative;
            }
            #companiesTable td:nth-child(8) .industry-clamp{
                display: -webkit-box;
                -webkit-line-clamp: var(--industry-lines);
                -webkit-box-orient: vertical;
                overflow: hidden;
                line-height: 1.4;
            }
            /* subtle fade at the bottom-right to imply truncation */
            #companiesTable td:nth-child(8) .industry-wrap.has-overflow .industry-clamp::after{
                content: "";
                position: absolute;
                bottom: 0;
                right: 1.2em; /* leave space for the ellipsis button */
                width: 40%;
                height: 1.4em;
                background: linear-gradient(to right, rgba(255,255,255,0), #fff 60%);
                pointer-events: none;
            }
            /* Ellipsis button – shown only when truncated */
            #companiesTable td:nth-child(8) .ellipsis-btn{
                display: inline-block;
                visibility: hidden;   /* JS will show when overflow detected */
                margin-left: 6px;
                padding: 0 6px;
                line-height: 1;
                border-radius: 3px;
                background: #e5e7eb;
                color: #111827;
                cursor: help;
                font-weight: 600;
                text-decoration: none;
                user-select: none;
            }
            #companiesTable td:nth-child(8) .industry-wrap.has-overflow .ellipsis-btn{
                visibility: visible;
            }
            #companiesTable td:nth-child(8) .ellipsis-btn:hover{
                background: #d1d5db;
            }
            /* Tooltip */
            #companiesTable td:nth-child(8) .industry-tooltip{
                position: absolute;
                right: 0;
                bottom: 1.8em;
                display: none;
                max-width: var(--tooltip-maxw);
                background: var(--tooltip-bg);
                color: var(--tooltip-fg);
                padding: 10px 12px;
                border-radius: 6px;
                font-size: 12px;
                line-height: 1.4;
                box-shadow: 0 8px 24px rgba(0,0,0,.2);
                z-index: 50;
                white-space: normal; /* allow wrapping inside tooltip */
            }
            #companiesTable td:nth-child(8) .industry-wrap.show-tooltip .industry-tooltip{
                display: block;
            }
            /* small arrow */
            #companiesTable td:nth-child(8) .industry-tooltip::after{
                content: "";
                position: absolute;
                right: 10px;
                top: 100%;
                border: 6px solid transparent;
                border-top-color: var(--tooltip-bg);
            }
        }
        
        /* Below 1024px: Let responsive plugin handle */
        @media screen and (max-width: 1024px) {
            table.dataTable tbody td { font-size: 14px; }
        }

        @media (max-width:1024px){
          .container {
            overflow-x: hidden;
            padding: 15px;
          }
          
          table.dataTable {
            table-layout: auto !important;
            width: 100% !important;
          }
          
          /* Keep headers from wrapping */
          table.dataTable thead th {
            white-space: nowrap !important;
          }
          
          /* Force body cells to wrap text and not overflow */
          table.dataTable tbody td {
            white-space: normal !important;
            word-wrap: break-word !important;
            word-break: break-word !important;
            overflow-wrap: break-word !important;
            max-width: none !important;
          }
          
          /* DataTables 'nowrap' forces overflow – undo it on mobile body cells only */
          table.dataTable.nowrap td {
            white-space: normal !important;
          }
          
          /* Make links wrap properly */
          table.dataTable tbody td a {
            word-break: break-all !important;
            display: inline-block;
            max-width: 100%;
          }
          
          /* 2nd column = Company Name */
          #companiesTable th:nth-child(2),
          #companiesTable td:nth-child(2){
            white-space: normal !important;
            overflow-wrap: anywhere;   /* break long tokens */
            word-break: break-word;
            hyphens: auto;
            min-width: 100px;
          }
          /* make links wrap if present */
          #companiesTable td:nth-child(2) a{
            display: inline-block;
            max-width: 100%;
            word-break: break-word;
          }
          
          /* Remove any fixed widths on mobile */
          #ranking-th, #company-name, #website, #year-founded, 
          #city, #number-employees, #sales-volume, #industry {
            width: auto !important;
            min-width: unset !important;
          }
        }