.wc-budget-card {
border: 1px solid #eee;
border-radius: 6px;
padding: 16px;
background: #fff;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
margin: 12px 0 24px;
} .wc-table {
width: 100%;
border-collapse: collapse;
font-size: 16px;
}
.wc-table th,
.wc-table td {
padding: 12px 10px;
border-bottom: 1px solid #eee;
vertical-align: middle;
}
.wc-table thead th {
font-weight: 600;
color: #222;
background: #fafafa;
border-bottom: 1px solid #e6e6e6;
} .wc-table select,
.wc-table input[type="number"] {
width: 100%;
border: 1px solid #ddd;
border-radius: 4px;
padding: 8px 10px;
background: #fff;
line-height: 1.2;
}
.wc-table .calc-sub,
.wc-grand {
text-align: right;
font-weight: 600;
}
.wc-grand-label {
text-align: right;
font-weight: 600;
}
.wc-action {
cursor: pointer;
color: #0073aa;
user-select: none;
}
.wc-action:hover {
text-decoration: underline;
}  .wc-table select,
.wc-table input[type="number"] {
max-width: 100%;
width: 100%;
box-sizing: border-box;
} .wc-action {
white-space: nowrap;
} @media (max-width: 768px) {
.wc-table {
border: 0;
}
.wc-table thead { position: absolute;
left: -9999px;
top: -9999px;
height: 0;
width: 0;
overflow: hidden;
}
.wc-table tbody,
.wc-table tfoot,
.wc-table tr,
.wc-table td,
.wc-table th {
display: block;
width: 100%;
} .wc-table tbody tr.wc-row {
border: 1px solid #eee;
border-radius: 8px;
padding: 8px 10px;
margin: 10px 0;
background: #fff;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
} .wc-table tbody td {
border: 0;
border-bottom: 1px solid #f2f2f2;
padding: 10px 6px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.wc-table tbody td:last-child {
border-bottom: 0;
} .wc-table tbody td::before {
content: attr(data-label);
font-weight: 600;
color: #444;
flex: 0 0 42%;
max-width: 46%;
} .wc-table tbody td > * {
flex: 1 1 58%;
max-width: 58%;
} .wc-table tbody td.calc-sub {
justify-content: space-between;
font-weight: 600;
} .wc-table tfoot tr {
display: grid;
grid-template-columns: 1fr 1fr;
row-gap: 8px;
align-items: center;
padding-top: 6px;
}
#wc-add-row,
#wc-export {
grid-column: span 1;
padding: 12px 6px;
}
.wc-grand-label,
#wc-grand-total {
grid-column: span 1;
text-align: right;
padding: 12px 6px;
} .wc-budget-card {
padding: 12px;
border-radius: 8px;
}
} @media (max-width: 420px) {
.wc-table tbody td::before {
flex-basis: 48%;
max-width: 52%;
}
.wc-table tbody td > * {
flex-basis: 52%;
max-width: 52%;
}
}