/* ==========================================================
Project : Counter Doodle
Module  : Component
File    : bundle-config.css
Atur isi bundle (kiri) + ringkasan harga (kanan).
========================================================== */

.bundle-config {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--aside-width-lg);
    gap: var(--space-24);
    align-items: start;
}

.bundle-left { min-width: 0; }

.bundle-right {
    position: sticky;
    top: var(--space-20);
}

.bundle-header,
.bundle-summary {
    background: var(--color-surface);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-md);
}

.bundle-header {
    padding: var(--space-20);
    margin-bottom: var(--space-20);
}

.bundle-header h2 {
    margin: 0;
    font-size: var(--font-size-2xl);
    font-weight: var(--font-bold);
}

.bundle-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-16) var(--space-40);
    margin-top: var(--space-18);
}

.bundle-meta-item {
    display: flex;
    flex-direction: column;
}

.bundle-meta-label {
    margin-bottom: var(--space-4);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.bundle-meta-value { font-weight: var(--font-bold); }

.bundle-search { margin-bottom: var(--space-16); }

.bundle-table {
    width: 100%;
    border-collapse: collapse;
}

.bundle-table thead th {
    padding: var(--table-head-padding-y) var(--table-cell-padding-x);
    background: var(--color-surface-alt);
    border-bottom: var(--border-width) solid var(--color-border);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    text-align: left;
}

.bundle-table tbody td {
    padding: var(--table-cell-padding-y) var(--table-cell-padding-x);
    border-bottom: var(--border-width) solid var(--color-border);
}

.bundle-summary { padding: var(--space-24); }

.bundle-summary h3 {
    margin-top: 0;
    margin-bottom: var(--space-20);
}

.bundle-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-12);
    margin-bottom: var(--space-12);
}

.bundle-summary hr {
    margin: var(--space-18) 0;
    border: none;
    border-top: var(--border-width) solid var(--color-border);
}

.bundle-profit {
    font-size: var(--font-size-xl);
    font-weight: var(--font-bold);
}

.bundle-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-12);
    margin-top: var(--space-24);
}

/* status margin: aman (hijau) / negatif (merah) */
.bundle-warning {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    margin-top: var(--space-18);
    padding: var(--space-10) var(--space-12);
    border-radius: var(--radius-sm);
    background: var(--color-success-soft);
    color: var(--color-success);
    font-weight: var(--font-semibold);
}

.bundle-warning.is-danger {
    background: var(--color-danger-soft);
    color: var(--color-danger);
}

.bundle-warning svg {
    width: var(--icon-sm);
    height: var(--icon-sm);
    stroke: currentColor;
    stroke-width: var(--icon-stroke);
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* qty di tabel isi bundle: input kecil */
.bundle-qty {
    width: var(--col-xs);
    height: var(--control-height-sm);
    padding: 0 var(--space-8);
    border: var(--border-width) solid var(--color-border-strong);
    border-radius: var(--radius-xs);
    text-align: center;
    font-weight: var(--font-bold);
}

.bundle-qty:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus);
}