.woo-dynamic-table-wrapper { 
    margin: 40px 0; 
}

/* ===================== ГЛОБАЛЬНЫЕ НАСТРОЙКИ ТАБЛИЦЫ ===================== */
#wooTable {
    border-collapse: separate !important;
    border-spacing: 2px 2px !important;   /* отступы между всеми ячейками */
    
    width: 100%;
    
        background: #e9e6ed6b;
    border-radius: 15px;
}

/* Убираем все стандартные бордеры и фоны DataTables */
#wooTable thead th,
#wooTable tbody td {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
}

/* ===================== КРАСИВЫЕ ЯЧЕЙКИ — КАЖДАЯ ОТДЕЛЬНО ===================== */
#wooTable th,
#wooTable td {
background: transparent !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.07);
    transition: all 0.25s ease;
    text-align: center;
    height: 45px;
    min-width: 60px;
}

/* Внутренний отступ внутри каждой ячейки */
#wooTable th > div,
#wooTable td > div {
    padding: 0 14px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
}

/* Hover-эффект для всех ячеек */
#wooTable th:hover,
#wooTable td:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.12);
}

/* ===================== ПЕРВАЯ СТРОКА (кнопки скрытия столбцов) — прозрачные ===================== */
.buttons-row td {
    background: transparent !important;
    box-shadow: none !important;
    height: 50px;
    vertical-align: bottom;
}

/* ===================== ПЕРВАЯ КОЛОНКА (кнопки скрытия строк) — прозрачные ===================== */
#wooTable th:first-child,
#wooTable td:first-child {
    background: transparent !important;
    box-shadow: none !important;
    width: 60px;
}

/* ===================== ВТОРАЯ СТРОКА ЗАГОЛОВКОВ — чуть темнее ===================== */
.headers-row th {
    background: #f1f5f9 !important;
    font-weight: 600;
    font-size: 15px;
    color: #1e293b;
}

/* Первая ячейка второй строки (зелёный + для строк) — тоже прозрачная */
.headers-row th:first-child {
    background: transparent !important;
    box-shadow: none !important;
}

/* НОВЫЕ МИНИМАЛИСТИЧНЫЕ КНОПКИ + И − (без бордера, полупрозрачные) */
.header-add-row,
.add-col-btn,
.hide-col-btn,
.hide-row-btn,
.show-row-btn {
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    background: rgba(245, 245, 247, 0.92) !important;   /* светло-серый, слегка прозрачный */
    border: none !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
    color: #555 !important;
    opacity: 0.75;
    font-weight: 500;
    font-size: 22px !important;
    line-height: 38px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer;
    transition: all 0.22s ease !important;
    backdrop-filter: blur(4px);   /* лёгкий эффект "стекла" — очень красиво */
}

/* При наведении/активно — ярче и непрозрачно */
.header-add-row:hover,
.add-col-btn:hover,
.hide-col-btn:hover,
.hide-row-btn:hover,
.show-row-btn:hover,
.header-add-row:active,
.add-col-btn:active,
.hide-col-btn:active,
.hide-row-btn:active {
    opacity: 1;
    background: rgba(235, 235, 240, 0.98) !important;
    transform: scale(1.1);
    box-shadow: 0 6px 16px rgba(0,0,0,0.14) !important;
}

/* Зелёный + для скрытых строк и кнопки "добавить столбец" */
.header-add-row,
.add-col-btn,
.show-row-btn {
    background: rgba(240, 252, 245, 0.9) !important;
    color: #08945a !important;
    opacity: 0.85;
}
.header-add-row:hover,
.add-col-btn:hover,
.show-row-btn:hover {
    background: rgba(34, 197, 94, 0.18) !important;
    color: #08945a !important;
    opacity: 1;
}

/* Красный − при наведении (если хочется чуть подсветить) */
.hide-col-btn:hover,
.hide-row-btn:hover {
    background: rgba(254, 226, 226, 0.7) !important;
    color: #c53030 !important;
}





/* ===================== МЕНЮ ===================== */
.add-col-menu, .add-row-menu {
    position: absolute;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    box-shadow: 0 12px 35px rgba(0,0,0,.16);
    z-index: 9999;
    display: none;
    min-width: 250px;
    max-height: 360px;
    overflow-y: auto;
    top: 100%;
    margin-top: 12px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 14px;
}

.add-col-menu ul, .add-row-menu ul { margin:0; padding:10px 0; list-style:none; }
.add-col-menu li, .add-row-menu li {
    padding: 12px 24px;
    cursor: pointer;
}
.add-col-menu li:hover, .add-row-menu li:hover {
    background: #f8fafc;
}





/* === ПОЛНОЕ УДАЛЕНИЕ ЛЮБЫХ ЛИНИЙ В ПЕРВОЙ СТРОКЕ === */
.buttons-row,
.buttons-row td,
.buttons-row td > div,
#wooTable thead tr:first-child td,
#wooTable thead tr.buttons-row td {
    border: none !important;
    border-bottom: none !important;
    border-top: none !important;
    box-shadow: none !important;
    outline: none !important;
}





/* 1. Обёртка со скроллом и красивой тенью-когда-пролистал */
.woo-dynamic-table-wrapper {
    margin: 40px 0;
    overflow-x: auto;
    position: relative;
/*    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08); */
}

/* Тень справа, когда можно листать вправо */
.woo-dynamic-table-wrapper::after {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 30px;
    background: linear-gradient(to left, rgba(0,0,0,0.12), transparent);
    pointer-events: none;
    opacity: 0;
    transition: opacity .3s;
}
.woo-dynamic-table-wrapper.scrolled::after { opacity: 1; }

/* 2. Фиксируем первую колонку (кнопки −/+) и колонку с названием */
#wooTable th:nth-child(1),   /* кнопки строк */
#wooTable td:nth-child(1),
#wooTable th:nth-child(2),   /* название товара */
#wooTable td:nth-child(2) {
    position: sticky;
    background: white !important;
    z-index: 10;
    box-shadow: 4px 0 12px rgba(0,0,0,0.08);
}
#wooTable th:nth-child(2),
#wooTable td:nth-child(2) { left: 60px; }   /* после первой колонки */
#wooTable th:nth-child(1),
#wooTable td:nth-child(1) { left: 0; z-index: 11; background: transparent !important; }

/* 3. Минимальная ширина таблицы */
#wooTable { min-width: 1200px; }

/* === ФИКС КРУГЛЫХ КНОПОК (чтобы + и − были идеальным кругом) === */

/* 
#wooTable .header-add-row,
#wooTable .add-col-btn,
#wooTable .hide-col-btn,
#wooTable .hide-row-btn,
#wooTable .show-row-btn {
    width: 40px !important;     
    height: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    padding: 0 !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
    line-height: 36px !important;   
    font-size: 22px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

 */
 
 

/* дополнительно убиваем всё, что DataTables может напихать */
#wooTable td > div,
#wooTable th > div {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}





/* УБИРАЕМ ТЕНЬ-ИНДИКАТОР СКРОЛЛА НАВСЕГДА */
.woo-dynamic-table-wrapper::after {
    display: none !important;
}







/* ===================================================== */
/* 1. Уменьшаем отступы между ячейками на мобильных    */
/* ===================================================== */
@media (max-width: 768px) {
    #wooTable {
        border-spacing: 1px 1px !important;   /* вместо 10px × 12px → теперь 2px × 6px */
    }
}

/* ===================================================== */
/* 2. Сильно уменьшаем первую колонку на мобильных     */
/*    (кнопки −/+ становятся миниатюрными)             */
/* ===================================================== */
@media (max-width: 768px) {
    /* Первая колонка — всего 36px вместо 60px */
    #wooTable th:first-child,
    #wooTable td:first-child {
        width: 36px !important;
        min-width: 36px !important;
    }

    /* Кнопки + и − тоже уменьшаем до 30×30px */
    #wooTable .header-add-row,
    #wooTable .add-col-btn,
    #wooTable .hide-col-btn,
    #wooTable .hide-row-btn,
    #wooTable .show-row-btn {
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        min-height: 30px !important;
        font-size: 18px !important;
        line-height: 26px !important;
    }

    /* Если совсем тесно — можно до 26px и 16px шрифт */
}

/* Для совсем узких экранов (< 480px) — ещё жёстче */
@media (max-width: 480px) {
    #wooTable {
        border-spacing: 1px 1px !important;
        font-size: 13px;
    }
    
    #wooTable th:first-child,
    #wooTable td:first-child {
        width: 32px !important;
    }
    
    #wooTable .header-add-row,
    #wooTable .hide-col-btn,
    #wooTable .hide-row-btn,
    #wooTable .show-row-btn {
        width: 26px !important;
        height: 26px !important;
        font-size: 16px !important;
        line-height: 22px !important;
    }
    
    /* Уменьшаем внутренние отступы текста в ячейках */
    #wooTable th > div,
    #wooTable td > div {
        padding: 0 8px !important;
    }
}

/* ===================================================== */
/* 3. Дополнительно — делаем колонку "Название" шире   */
/*    и фиксируем её вместе с первой колонкой          */
/* ===================================================== */
#wooTable th:nth-child(2),
#wooTable td:nth-child(2) {
    min-width: 140px;           /* название товара всегда читаемо */
    white-space: normal;
}

@media (max-width: 768px) {
    #wooTable th:nth-child(2),
    #wooTable td:nth-child(2) {
        min-width: 120px;
        position: sticky;
        left: 0px !important;      /* прилипает сразу после мини-колонки −/+ */
        background: white !important;
        z-index: 9;
        box-shadow: 4px 0 12px rgba(0,0,0,0.08);
    }
    
    #wooTable th:first-child,
    #wooTable td:first-child {
        position: sticky;
        left: 0;
        background: transparent !important;
        z-index: 11;
    }
}







/* ===================================================== */
/* ПЕРВАЯ КОЛОНКА СУЖАЕТСЯ ПРИ СКРОЛЛЕ (мобильные)   */
/* ===================================================== */
@media (max-width: 1023px) {
    /* Базовая ширина */
    #wooTable th:first-child,
    #wooTable td:first-child {
        width: 38px !important;
        min-width: 38px !important;
        transition: width 0.35s ease !important;
                background: transparent !important;

    }

    /* Когда скроллим вправо — сжимаем до 12 px */
    .woo-dynamic-table-wrapper.scrolled-right #wooTable th:first-child,
    .woo-dynamic-table-wrapper.scrolled-right #wooTable td:first-child {
        width: 12px !important;
        min-width: 12px !important;
        max-width: 12px !important;
    }

    .woo-dynamic-table-wrapper.scrolled-right .hide-row-btn,
    .woo-dynamic-table-wrapper.scrolled-right .show-row-btn,
    .woo-dynamic-table-wrapper.scrolled-right .header-add-row {
        width: 26px !important;
        height: 26px !important;
        font-size: 14px !important;
        opacity: 0.3;
        transform: scale(0.6);
    }
}
/* JS будет добавлять/убирать класс .scrolled-right при скролле */









/* === 100% ФИНАЛЬНЫЙ ФИКС КНОПОК + И − === */
/* Убиваем ВСЁ старое и ставим свои правила с максимальным приоритетом */
#wooTable .header-add-row,
#wooTable .add-col-btn,
#wooTable .hide-col-btn,
#wooTable .hide-row-btn,
#wooTable .show-row-btn {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    max-width: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
    padding: 0 !important;
    margin: 0 auto !important;
    border-radius: 50% !important;
    background: rgba(245,245,247,0.92) !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
    color: #555 !important;
    font-size: 22px !important;
    line-height: 38px !important;
    opacity: 0.78 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.25s ease !important;
    backdrop-filter: blur(4px);
}

/* Зелёные плюсы */
#wooTable .header-add-row,
#wooTable .add-col-btn,
#wooTable .show-row-btn {
    background: rgba(240,252,245,0.9) !important;
    color: #08945a !important;
    opacity: 0.88 !important;
}

/* При скролле вправо — уменьшаем и делаем почти невидимыми 
@media (max-width: 1023px) {
    .woo-dynamic-table-wrapper.scrolled-right #wooTable .header-add-row,
    .woo-dynamic-table-wrapper.scrolled-right #wooTable .hide-row-btn,
    .woo-dynamic-table-wrapper.scrolled-right #wooTable .show-row-btn {
        width: 26px !important;
        height: 26px !important;
        font-size: 15px !important;
        opacity: 0.25 !important;
        transform: scale(0.75) !important;
    }
}
*/

@media (max-width: 1023px) {
    .woo-dynamic-table-wrapper.scrolled-right #wooTable th:first-child,
    .woo-dynamic-table-wrapper.scrolled-right #wooTable td:first-child {
        width: 36px !important;
        min-width: 36px !important;
    }
    .woo-dynamic-table-wrapper.scrolled-right .hide-row-btn,
    .woo-dynamic-table-wrapper.scrolled-right .show-row-btn {
        transform: scale(0.65);
        opacity: 0.7;
        left: 1px;
        left: -30px;
    }
}



/* === ПУСТЫЕ ГРУППЫ - ПРОЗРАЧНЫЕ ЯЧЕЙКИ === */

/* Полностью "невидимые", но занимающие место ячейки для атрибутов без группы */
.group-empty-cell {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    height: 1px !important;
    min-height: 1px !important;
}

/* Красивые заголовки групп */
.group-header {
    background: #f5f7fa !important;
    font-weight: 600;
    text-align: center;
    font-size: 1.1em;
    color: #2c3e50;
    border: 1px solid #e1e8ed !important;
}


/* Только между группами — увеличиваем spacing */
#wooTable thead .group-headers-row th.group-header {
    border-spacing: 16px 2px !important;
}
/* Но это ломает остальные ячейки → не рекомендую */






/* Убираем лишние границы у соседних ячеек (по желанию) */
.group-headers-row th {
    border-left: none;
    border-right: none;
}
.group-headers-row th:first-child,
.group-headers-row th:last-child {
    border-left: none;
}




.group-headers-row td.group-empty-cell,
.group-headers-row th.group-empty-cell {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    height: 1px !important;
    min-height: 1px !important;
    border-left: none !important;
    border-right: none !important;
}




/* === убираем Угловые пустые ячейки  === */

#wooTable td.no-sort {
    border: none;
}

td.group-empty-cell {
    opacity: 0;
}

#wooTable .group-headers-row td.no-sort {
    opacity: 0;
}



#wooTable thead th, #wooTable tbody td {
    border: none !important;
    background: var(--wp--preset--color--pale-cyan-blue) !important;
    padding: 0 4px !important;
}







/* Модальное меню */
.wdt-modal {
    display: none;
    position: fixed;
    z-index: 10000; /* Выше всего */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.4);
    padding-top: 60px;
}

.wdt-modal-content {
    background-color: #fefefeed;
    margin: 5% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 400px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    border-radius: 25px;
}

.wdt-modal-close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.wdt-modal-close:hover,
.wdt-modal-close:focus {
    color: black;
    text-decoration: none;
}

.wdt-modal-content h3 {
    margin-top: 0;
}

.wdt-modal-content ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.wdt-modal-content li {
    
    cursor: pointer;
    border-bottom: 1px solid #eee;
}

.wdt-modal-content li:hover {
    background-color: #f1f1f1;
}

.wdt-modal-content li:last-child {
    border-bottom: none;
}




/* Дополнения для модала с чекбоксами */
.wdt-modal-actions {
    margin-top: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.wdt-modal-actions label {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.wdt-modal-actions input[type="checkbox"] {
    margin-right: 5px;
}

.wdt-apply-btn {
    padding: 8px 15px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.wdt-apply-btn:hover {
    background-color: #0056b3;
}

.wdt-modal-content li label {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 10px;
}

.wdt-modal-content li:hover {
    background-color: #f1f1f1;
}






table.dataTable thead>tr>th.dt-orderable-asc span.dt-column-order, table.dataTable thead>tr>th.dt-orderable-desc span.dt-column-order, table.dataTable thead>tr>th.dt-ordering-asc span.dt-column-order, table.dataTable thead>tr>th.dt-ordering-desc span.dt-column-order, table.dataTable thead>tr>td.dt-orderable-asc span.dt-column-order, table.dataTable thead>tr>td.dt-orderable-desc span.dt-column-order, table.dataTable thead>tr>td.dt-ordering-asc span.dt-column-order, table.dataTable thead>tr>td.dt-ordering-desc span.dt-column-order {
    position: absolute;
    right: 7px;
    top: 0;
    bottom: 0;
    width: 12px;
    color: white;
    font-size: 16px;
}


table.dataTable thead>tr>th.dt-orderable-asc span.dt-column-order:before, table.dataTable thead>tr>th.dt-orderable-asc span.dt-column-order:after, table.dataTable thead>tr>th.dt-orderable-desc span.dt-column-order:before, table.dataTable thead>tr>th.dt-orderable-desc span.dt-column-order:after, table.dataTable thead>tr>th.dt-ordering-asc span.dt-column-order:before, table.dataTable thead>tr>th.dt-ordering-asc span.dt-column-order:after, table.dataTable thead>tr>th.dt-ordering-desc span.dt-column-order:before, table.dataTable thead>tr>th.dt-ordering-desc span.dt-column-order:after, table.dataTable thead>tr>td.dt-orderable-asc span.dt-column-order:before, table.dataTable thead>tr>td.dt-orderable-asc span.dt-column-order:after, table.dataTable thead>tr>td.dt-orderable-desc span.dt-column-order:before, table.dataTable thead>tr>td.dt-orderable-desc span.dt-column-order:after, table.dataTable thead>tr>td.dt-ordering-asc span.dt-column-order:before, table.dataTable thead>tr>td.dt-ordering-asc span.dt-column-order:after, table.dataTable thead>tr>td.dt-ordering-desc span.dt-column-order:before, table.dataTable thead>tr>td.dt-ordering-desc span.dt-column-order:after {
    left: 0;
    
    line-height: 26px;
    font-size: .8em;
}



.wdt-modal-content h3 {
    line-height: 1;
    font-size: 18px;
}





.wdt-modal-content input[type="checkbox"], input[type="radio"] {
    box-sizing: border-box;
    margin-right: 10px;
}