/* /css/components/units-table.css */
@media screen and (max-width: 768px) {
    .table-responsive table, .table-responsive thead, .table-responsive tbody, 
    .table-responsive th, .table-responsive td, .table-responsive tr { 
        display: block !important; width: 100% !important; 
    }
    .table-responsive thead tr { display: none !important; }
    .table-responsive tbody tr { border: 1px solid var(--border, #dee2e6); border-radius: 8px; margin-bottom: 20px; padding: 10px; background: var(--card-bg, #fff); box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
    .table-responsive td { border: none !important; padding: 10px 5px 10px 120px !important; position: relative; text-align: left; color: var(--text, #212529); }
    .table-responsive td::before { content: attr(data-label); position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-weight: 600; font-size: 0.85rem; color: var(--text-secondary, #6c757d); width: 100px; }
    html[data-theme="dark"] .table-responsive tbody tr { background: #2d2d2d !important; border-color: #444 !important; }
    html[data-theme="dark"] .table-responsive td::before { color: #aaa !important; }
    html[data-theme="dark"] .amount-display { color: #fff !important; }
}

.vat-toggle { display: inline-flex; align-items: center; cursor: pointer; font-size: 1.1rem; user-select: none; gap: 8px; }
.vat-toggle i { font-size: 1.3rem; }
.vat-toggle .checkmark { color: #198754; display: none; }
.vat-toggle .unchecked { color: #6c757d; }
.vat-toggle.active .checkmark { display: inline-block; }
.vat-toggle.active .unchecked { display: none; }

@media screen and (max-width: 768px) {
    .table-responsive table, 
    .table-responsive thead, 
    .table-responsive tbody, 
    .table-responsive th, 
    .table-responsive td, 
    .table-responsive tr { 
        display: block !important; 
        width: 100% !important; 
    }

    .table-responsive thead tr {
        display: none !important;
    }

    /* Карточка строки */
    .table-responsive tbody tr {
        border: 1px solid var(--border, #dee2e6);
        border-radius: 8px;
        margin-bottom: 20px;
        padding: 10px;
        background: var(--card-bg, #fff); 
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    .table-responsive td {
        border: none !important;
        padding: 10px 5px 10px 120px !important;
        position: relative;
        text-align: left;
        color: var(--text, #212529); 
    }

    /* Подписи (data-label) слева */
    .table-responsive td::before {
        content: attr(data-label);
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
        font-weight: 600;
        font-size: 0.85rem;
        color: var(--text-secondary, #6c757d);
        width: 100px;
    }

    /* --- СПЕЦИАЛЬНО ДЛЯ ТЕМНОЙ ТЕМЫ --- */
    html[data-theme="dark"] .table-responsive tbody tr {
        background: #2d2d2d !important; 
        border-color: #444 !important;
    }

    html[data-theme="dark"] .table-responsive td::before {
        color: #aaa !important; 
    }

    html[data-theme="dark"] .amount-display {
        color: #fff !important; 
    }
}

/* Стили для переключателя НДС */
.vat-toggle {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    font-size: 1.1rem;
    user-select: none;
    gap: 8px;
}
.vat-toggle i {
    font-size: 1.3rem;
}
.vat-toggle .checkmark {
    color: #198754;
    display: none;
}
.vat-toggle .unchecked {
    color: #6c757d;
}
.vat-toggle.active .checkmark {
    display: inline-block;
}
.vat-toggle.active .unchecked {
    display: none;
}