/* ==========================================================
   Counter Doodle — Event
   ========================================================== */

.alert-success {
    background: var(--color-success-soft);
    color: var(--color-success);
}

.cell-sub {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.event-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--aside-width-sm);
    gap: var(--space-16);
    align-items: start;
}

.event-form {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-10) var(--space-14);
    padding: var(--space-14);
    margin-bottom: var(--space-14);
    background: var(--color-surface-alt);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-md);
}

.event-form[hidden] { display: none; }

.event-form .form-group { margin-bottom: 0; }
.event-form .span-2 { grid-column: span 2; }

.event-form-actions {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    gap: var(--space-8);
}

.qris-preview {
    width: 100%;
    max-width: var(--qris-preview-width);
    margin: 0 auto var(--space-12);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-md);
}

.qris-empty {
    padding: var(--space-16) var(--space-12);
    margin-bottom: var(--space-12);
    border: var(--border-width-thick) dashed var(--color-border-strong);
    border-radius: var(--radius-md);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    text-align: center;
}

.qris-upload {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

/* ---- detail ---- */

.event-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-16);
}

.event-head h2 { display: flex; align-items: center; gap: var(--space-8); }

.event-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4) var(--space-18);
    margin-top: var(--space-4);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.event-actions {
    display: flex;
    gap: var(--space-8);
    flex-shrink: 0;
}

.event-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-12);
    margin-top: var(--space-16);
}

.event-stat {
    padding: var(--space-10) var(--space-14);
    background: var(--color-surface-alt);
    border-radius: var(--radius-md);
}

.event-stat span {
    display: block;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.event-stat strong {
    font-size: var(--font-size-xl);
    font-variant-numeric: tabular-nums;
}

.event-guide {
    margin-top: var(--space-14);
    padding: var(--space-10) var(--space-14);
    border-left: var(--border-width-accent) solid var(--color-primary);
    background: var(--color-primary-soft);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    font-size: var(--font-size-md);
    color: var(--color-text);
}

.section-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-12);
    margin-bottom: var(--space-10);
}

.section-head p {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.num-input {
    width: var(--num-input-width);
    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: right;
    font-weight: var(--font-bold);
    font-variant-numeric: tabular-nums;
}

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

.num-input.wide { width: var(--num-input-wide); }

.price-normal {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    text-decoration: line-through;
}

.diff-neg { color: var(--color-danger); font-weight: var(--font-bold); }
.diff-ok { color: var(--color-success); font-weight: var(--font-bold); }

.sticky-actions {
    position: sticky;
    bottom: 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--space-12);
    margin: var(--space-14) calc(var(--space-20) * -1) calc(var(--space-18) * -1);
    padding: var(--space-12) var(--space-20);
    background: var(--color-surface-glass-strong);
    border-top: var(--border-width) solid var(--color-border);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

@media (max-width: 1100px) {
    .event-top { grid-template-columns: minmax(0, 1fr); }
    .event-form { grid-template-columns: 1fr 1fr; }
    .event-stats { grid-template-columns: 1fr 1fr; }
}

.num-input::placeholder {
    font-weight: var(--font-normal);
    color: var(--color-text-placeholder);
}

/* ---- sales ---- */

.sales-filter {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-8);
    margin-bottom: var(--space-14);
}

.sales-filter .form-control { width: auto; }

.row-void td { color: var(--color-text-muted); }
.row-void td .link-strong { color: var(--color-text-muted); text-decoration: line-through; }

.sales-detail {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--aside-width);
    gap: var(--space-16);
    align-items: start;
}

.sales-detail > .card + .card { margin-top: 0; }

.tfoot-label { text-align: right; color: var(--color-text-secondary); font-weight: var(--font-bold); }
.tfoot-val { text-align: right; font-weight: var(--font-bold); }
.tfoot-total { font-size: var(--font-size-lg); }
.table tfoot td { border-bottom: none; height: var(--table-foot-row-height); }

.kv {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-6) var(--space-14);
    margin-top: var(--space-10);
}

.kv dt { color: var(--color-text-secondary); }
.kv dd { font-weight: var(--font-semibold); text-align: right; }

.void-box {
    margin-top: var(--space-18);
    padding-top: var(--space-14);
    border-top: var(--border-width) solid var(--color-border);
}

.void-box p {
    margin: var(--space-4) 0 var(--space-10);
    font-size: var(--font-size-sm);
}

@media (max-width: 1000px) {
    .sales-detail { grid-template-columns: minmax(0, 1fr); }
}

/* kotak ringkasan tanpa jarak atas (di bawah filter) */
.event-stats-flush {
    margin-top: 0;
    margin-bottom: var(--space-16);
}

/* umpan balik: harga event tersimpan */
.num-input.is-saved {
    border-color: var(--color-success);
}

/* ---- biaya event ---- */

.cost-total {
    font-size: var(--font-size-xl);
}

.cost-form {
    display: grid;
    grid-template-columns: var(--filter-md) minmax(0, 1fr) var(--filter-sm) var(--filter-md) auto;
    gap: var(--space-8);
    margin-bottom: var(--space-12);
}

@media (max-width: 1100px) {
    .cost-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
    .cost-form { grid-template-columns: minmax(0, 1fr); }
}

/* ---- pembayaran (QRIS per event) ---- */

.pay-form {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-8);
}

.table tr.row-muted td {
    color: var(--color-text-muted);
}