/* ======================================================
   Modern Responsive Flex Layout for Self-Cost Table
   ====================================================== */

.selfcost-flex-container {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    width: 100%;
    box-sizing: border-box;
}

/* ---------- Flex Row ---------- */
.selfcost-flex-row {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    background: #ffffff;
    border: 1px solid #e4e7ea;
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    gap: 1rem;
    flex-wrap: wrap;
}

/* ---------- Header ---------- */
.selfcost-header {
    background: #f3f5f7;
    border: 1px solid #dce2e7;
    font-weight: 700;
}

/* ---------- Total Row ---------- */
.total-row {
    background: #f6faff;
    border: 1px solid #cfe0f5;
}

    .total-row .gross,
    .total-row .net {
        font-weight: 900;
        color: #005e9e;
    }

/* ---------- Columns ---------- */
.selfcost-flex-row .flex-col {
    flex: 1;
    min-width: 90px;
    font-size: 0.95rem;
}

.flex-col.name {
    flex: 2;
    font-weight: 600;
    color: #222;
}

.flex-col.qty {
    flex: 1;
    color: #444;
}

.flex-col.net {
    flex: 1;
    text-align: right;
    color: #005e9e;
    font-weight: 600;
}

.flex-col.gross {
    flex: 1;
    text-align: right;
    color: #002f5d;
    font-weight: 700;
}

/* ======================================================
   Mobile Responsive Behaviour
   ====================================================== */

@media (max-width: 768px) {

    .selfcost-flex-row {
        padding: 0.75rem;
        gap: 0.35rem;
    }

    /* 2 Spalten statt 4 */
    .flex-col {
        flex: 1 1 calc(50% - 0.5rem);
    }

        .flex-col.name {
            flex: 1 1 100%;
            font-size: 1rem;
            font-weight: 700;
        }

        .flex-col.net,
        .flex-col.gross {
            text-align: left;
            font-size: 0.95rem;
        }
}

/* Extra small phones */
@media (max-width: 480px) {

    /* 1 Spalte Layout */
    .flex-col {
        flex: 1 1 100%;
        text-align: left !important;
    }

        .flex-col.name {
            margin-bottom: 0.35rem;
        }
}