/* =============================================
   MOBILE CARDS IMPROVED - baza.mastersmeta.pro
   Покращені картки для мобільних пристроїв
   ============================================= */

@media (max-width: 768px) {
    
    /* ─── Інтерактивність: виділення груп при натисканні ─── */
    
    /* Курсор-вказівник для розділів та підрозділів */
    .table-smeta-public tr.row-section,
    .table-smeta-public tr.row-subsection {
        cursor: pointer !important;
        user-select: none !important;
        -webkit-tap-highlight-color: transparent !important;
    }
    
    /* Hover ефект для розділів */
    .table-smeta-public tr.row-section:active {
        transform: scale(0.98) !important;
        opacity: 0.9 !important;
    }
    
    .table-smeta-public tr.row-subsection:active {
        transform: scale(0.98) !important;
        opacity: 0.9 !important;
    }
    
    /* Виділення активних елементів групи - ЧЕРВОНЕ ДЛЯ ТЕСТУ */
    .table-smeta-public tbody tr.highlighted-item.row-work,
    .table-smeta-public tbody tr.highlighted-item,
    tbody tr.highlighted-item,
    tr.highlighted-item {
        position: relative !important;
        border: 4px solid var(--primary) !important;
        box-shadow: 0 0 25px rgba(14, 165, 233, 0.6),
                    0 0 0 2px var(--primary) !important;
        transform: scale(1.02) !important;
        z-index: 100 !important;
        animation: highlightPulse 0.4s ease-out !important;
        background: rgba(14, 165, 233, 0.08) !important;
    }
    
    /* Додатковий світловий ефект зверху */
    .table-smeta-public tbody tr.highlighted-item::before,
    tbody tr.highlighted-item::before,
    tr.highlighted-item::before {
        content: attr(data-title) !important;
        position: absolute !important;
        top: -12px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        background: var(--primary) !important;
        color: #ffffff !important;
        padding: 2px 10px !important;
        border-radius: 10px !important;
        font-size: 10px !important;
        font-weight: bold !important;
        display: block !important;
        white-space: nowrap !important;
        z-index: 1000 !important;
    }
    
    @keyframes shimmer {
        0% { opacity: 1; transform: translateX(-50%) scale(1); }
        50% { opacity: 0.8; transform: translateX(-50%) scale(1.1); }
        100% { opacity: 1; transform: translateX(-50%) scale(1); }
    }
    
    /* Анімація появи виділення */
    @keyframes highlightPulse {
        0% {
            transform: scale(1);
            box-shadow: 0 0 0 0 rgba(14, 165, 233, 0);
        }
        50% {
            transform: scale(1.04);
            box-shadow: 0 0 20px rgba(14, 165, 233, 0.6);
        }
        100% {
            transform: scale(1.02);
            box-shadow: 0 0 15px rgba(14, 165, 233, 0.4);
        }
    }
    
    /* Виділення для підсумкових карток - УНІФІКОВАНО */
    .table-smeta-public tbody tr.subsection-footer.highlighted-item,
    .table-smeta-public tbody tr.section-footer.highlighted-item,
    tbody tr.subsection-footer.highlighted-item,
    tbody tr.section-footer.highlighted-item,
    tr.subsection-footer.highlighted-item,
    tr.section-footer.highlighted-item {
        background: rgba(14, 165, 233, 0.12) !important;
        border: 4px solid var(--primary) !important;
        box-shadow: 0 0 25px rgba(14, 165, 233, 0.6),
                    0 0 0 2px var(--primary) !important;
        z-index: 100 !important;
        position: relative !important;
        transform: scale(1.02) !important;
    }
    
    /* Додатковий світловий ефект для підсумків */
    .table-smeta-public tbody tr.subsection-footer.highlighted-item::before,
    .table-smeta-public tbody tr.section-footer.highlighted-item::before,
    tbody tr.subsection-footer.highlighted-item::before,
    tbody tr.section-footer.highlighted-item::before,
    tr.subsection-footer.highlighted-item::before,
    tr.section-footer.highlighted-item::before {
        content: attr(data-title) !important;
        position: absolute !important;
        top: -12px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        background: var(--primary) !important;
        color: #ffffff !important;
        padding: 2px 10px !important;
        border-radius: 10px !important;
        font-size: 10px !important;
        font-weight: bold !important;
        display: block !important;
        white-space: nowrap !important;
        z-index: 1000 !important;
    }
    
    /* ─── Компактна структура карток ─── */
    .table-smeta-public tbody tr:not(.row-section):not(.row-subsection):not(.subsection-footer):not(.section-footer):not(.grand-total-row) {
        display: flex !important;
        flex-wrap: wrap !important;
        padding: 14px !important;
        margin-bottom: 10px !important;
        background: var(--bg-card) !important;
        border: 1px solid var(--border) !important;
        border-radius: 12px !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
        position: relative !important;
        transition: transform 0.2s, box-shadow 0.2s !important;
    }
    
    /* Hover ефект для кращої інтерактивності */
    .table-smeta-public tbody tr:not(.row-section):not(.row-subsection):not(.subsection-footer):not(.section-footer):not(.grand-total-row):active {
        transform: scale(0.98) !important;
    }
    
    /* ─── Номер роботи - компактний badge ─── */
    .table-smeta-public .col-num {
        position: absolute !important;
        top: 12px !important;
        left: 12px !important;
        width: 26px !important;
        height: 26px !important;
        min-width: 26px !important;
        background: var(--primary-glow) !important;
        color: var(--primary) !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        padding: 0 !important;
        margin: 0 !important;
        flex-shrink: 0 !important;
    }
    
    .table-smeta-public .col-num::before {
        display: none !important;
    }
    
    /* ─── Назва роботи - з відступом від номера ─── */
    .table-smeta-public .col-name {
        flex: 1 1 100% !important;
        padding: 0 0 10px 38px !important;
        margin-bottom: 10px !important;
        border-bottom: 1px solid var(--border) !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        line-height: 1.4 !important;
        color: var(--text-primary) !important;
        text-align: left !important;
        word-break: break-word !important;
    }
    
    .table-smeta-public .col-name::before {
        display: none !important;
    }
    
    /* ─── Деталі в один рядок (4 колонки) ─── */
    .table-smeta-public .col-kol,
    .table-smeta-public .col-ei,
    .table-smeta-public .col-price,
    .table-smeta-public .col-sum {
        flex: 0 0 25% !important;
        max-width: 25% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        padding: 8px 4px !important;
        text-align: center !important;
        border: none !important;
    }
    
    /* Ярлики над значеннями - дуже компактні */
    .table-smeta-public .col-kol::before,
    .table-smeta-public .col-ei::before,
    .table-smeta-public .col-price::before,
    .table-smeta-public .col-sum::before {
        content: attr(data-label) !important;
        display: block !important;
        font-size: 9px !important;
        text-transform: uppercase !important;
        color: var(--text-muted) !important;
        letter-spacing: 0.05em !important;
        margin-bottom: 3px !important;
        font-weight: 600 !important;
    }
    
    /* Значення */
    .table-smeta-public .col-kol,
    .table-smeta-public .col-ei,
    .table-smeta-public .col-price {
        font-size: 13px !important;
        font-weight: 600 !important;
        color: var(--text-primary) !important;
    }
    
    /* Сума - виділена */
    .table-smeta-public .col-sum {
        font-size: 16px !important;
        font-weight: 700 !important;
        color: var(--primary) !important;
    }
    
    /* ─── Заголовки розділів - компактні з більшими відступами ─── */
    .table-smeta-public tr.row-section {
        display: block !important;
        background: var(--primary-glow) !important;
        border: none !important;
        border-radius: 10px !important;
        padding: 10px 14px !important;
        margin: 24px 0 12px 0 !important; /* Збільшено верхній відступ для візуального розділення */
        text-align: center !important;
        position: relative !important;
    }
    
    /* Іконка-підказка що можна натиснути */
    .table-smeta-public tr.row-section::after {
        content: '👆' !important;
        position: absolute !important;
        right: 12px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        font-size: 14px !important;
        opacity: 0.5 !important;
        display: block !important;
    }
    
    /* Перший розділ без верхнього відступу */
    .table-smeta-public tbody tr.row-section:first-child {
        margin-top: 0 !important;
    }
    
    .table-smeta-public tr.row-section td {
        display: block !important;
        width: 100% !important;
        padding: 0 !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.05em !important;
        color: var(--primary) !important;
        text-align: center !important;
        white-space: normal !important;
        word-break: break-word !important;
    }
    
    .table-smeta-public tr.row-section td::before {
        display: none !important;
    }
    
    /* ─── Підрозділи з помірними відступами ─── */
    .table-smeta-public tr.row-subsection {
        display: block !important;
        background: rgba(14, 165, 233, 0.05) !important;
        border: 1px solid rgba(14, 165, 233, 0.2) !important;
        border-radius: 8px !important;
        padding: 8px 12px !important;
        margin: 16px 0 10px 0 !important; /* Помірні відступи для підрозділів */
        text-align: center !important;
        position: relative !important;
    }
    
    /* Іконка-підказка для підрозділів */
    .table-smeta-public tr.row-subsection::after {
        content: '👆' !important;
        position: absolute !important;
        right: 10px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        font-size: 12px !important;
        opacity: 0.4 !important;
        display: block !important;
    }
    
    .table-smeta-public tr.row-subsection td {
        display: block !important;
        width: 100% !important;
        padding: 0 !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        color: var(--text-primary) !important;
        text-align: center !important;
        white-space: normal !important;
        word-break: break-word !important;
    }
    
    .table-smeta-public tr.row-subsection td::before {
        display: none !important;
    }
    
    /* ─── Підсумкові картки ─── */
    .table-smeta-public tr.subsection-footer,
    .table-smeta-public tr.section-footer {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        background: linear-gradient(135deg, rgba(14, 165, 233, 0.08), rgba(14, 165, 233, 0.03)) !important;
        border: 1px solid rgba(14, 165, 233, 0.25) !important;
        border-left: 3px solid var(--primary) !important;
        border-radius: 10px !important;
        padding: 12px 16px !important;
        margin-bottom: 10px !important;
        box-shadow: 0 2px 8px rgba(14, 165, 233, 0.1) !important;
    }
    
    /* Підсумок розділу - більший відступ знизу для візуального розділення */
    .table-smeta-public tr.section-footer {
        margin-bottom: 20px !important;
    }
    
    .table-smeta-public tr.subsection-footer td,
    .table-smeta-public tr.section-footer td {
        display: inline-block !important;
        padding: 0 !important;
        border: none !important;
        white-space: normal !important;
        word-break: break-word !important;
    }
    
    /* Текст підсумку - зліва */
    .table-smeta-public tr.subsection-footer td:first-child,
    .table-smeta-public tr.section-footer td:first-child {
        flex: 1 !important;
        text-align: left !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        color: var(--text-primary) !important;
        padding-right: 12px !important;
    }
    
    /* Сума підсумку - справа */
    .table-smeta-public tr.subsection-footer td:last-child,
    .table-smeta-public tr.section-footer td:last-child {
        flex-shrink: 0 !important;
        text-align: right !important;
        font-weight: 700 !important;
        color: var(--primary) !important;
        font-size: 16px !important;
        white-space: nowrap !important;
    }
    
    .table-smeta-public tr.subsection-footer td::before,
    .table-smeta-public tr.section-footer td::before {
        display: none !important;
    }
    
    /* ─── Загальна сума "РАЗОМ" - максимально виділена картка ─── */
    .table-smeta-public tr.grand-total-row {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        background: linear-gradient(135deg, rgba(14, 165, 233, 0.15), rgba(14, 165, 233, 0.08)) !important;
        border: 2px solid var(--primary) !important;
        border-radius: 14px !important;
        padding: 18px 20px !important;
        margin-top: 20px !important;
        margin-bottom: 0 !important;
        box-shadow: 0 4px 16px rgba(14, 165, 233, 0.25), 0 0 0 1px rgba(14, 165, 233, 0.1) inset !important;
        position: relative !important;
        overflow: hidden !important;
    }
    
    /* Декоративний акцент */
    .table-smeta-public tr.grand-total-row::before {
        content: '' !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 3px !important;
        background: linear-gradient(90deg, var(--primary), var(--accent)) !important;
        display: block !important;
    }
    
    .table-smeta-public tr.grand-total-row td {
        display: inline-block !important;
        padding: 0 !important;
        border: none !important;
        white-space: normal !important;
    }
    
    /* Текст "РАЗОМ" - зліва */
    .table-smeta-public tr.grand-total-row td:first-child {
        flex: 1 !important;
        text-align: left !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        color: var(--primary) !important;
        letter-spacing: 0.1em !important;
        padding-right: 16px !important;
        word-break: break-word !important;
    }
    
    /* Загальна сума - справа */
    .table-smeta-public tr.grand-total-row td:last-child {
        flex-shrink: 0 !important;
        text-align: right !important;
        font-size: 24px !important;
        font-weight: 800 !important;
        color: var(--primary) !important;
        font-family: 'Outfit', sans-serif !important;
        white-space: nowrap !important;
        text-shadow: 0 2px 8px rgba(14, 165, 233, 0.3) !important;
    }
    
    .table-smeta-public tr.grand-total-row td::before {
        display: none !important;
    }
    
    /* ─── Альтернативний фон для кожної другої картки ─── */
    .table-smeta-public tbody tr:not(.row-section):not(.row-subsection):not(.subsection-footer):not(.section-footer):not(.grand-total-row):nth-child(even) {
        background: var(--bg-surface) !important;
    }
    
    /* ─── Анімація появи карток ─── */
    .table-smeta-public tbody tr {
        animation: slideInUp 0.3s ease-out !important;
    }
    
    @keyframes slideInUp {
        from {
            opacity: 0;
            transform: translateY(10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
}