/* ==========================================================
   Counter Doodle — Form layout
   ========================================================== */

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-14) var(--space-18);
    margin-top: var(--space-16);
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    margin-bottom: var(--space-12);
}

.form-grid .form-group {
    margin-bottom: 0;
}

.form-group.full {
    grid-column: 1 / -1;
}

.form-group label,
.form-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-bold);
    color: var(--color-text-secondary);
}

.form-group small {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

.form-radio {
    display: flex;
    gap: var(--space-20);
    margin-top: var(--space-4);
}

.form-radio label,
.form-check {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    cursor: pointer;
    font-weight: var(--font-semibold);
    color: var(--color-text);
}

.form-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-8);
    margin-top: var(--space-20);
    padding-top: var(--space-16);
    border-top: var(--border-width) solid var(--color-border);
}

.required {
    color: var(--color-danger);
}

.alert {
    padding: var(--space-10) var(--space-12);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-md);
    font-weight: var(--font-semibold);
    margin-bottom: var(--space-14);
}

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

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

@media (max-width: 900px) {
    .form-grid { grid-template-columns: 1fr; }
}

.label-note {
    font-weight: var(--font-normal);
    color: var(--color-text-muted);
}

/* form satu baris: stok masuk & koreksi */
.adj-form {
    display: grid;
    grid-template-columns: var(--filter-md) minmax(var(--filter-lg), 1.4fr) var(--col-sm) minmax(var(--filter-md), 1fr) auto;
    gap: var(--space-10);
    align-items: end;
}

.adj-form .form-group {
    margin-bottom: 0;
}

@media (max-width: 1100px) {
    .adj-form { grid-template-columns: 1fr 1fr; }
    .adj-form .btn { grid-column: 1 / -1; }
}

/* form produk: dua kolom */
.product-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 var(--space-18);
    margin-top: var(--space-14);
}

.product-form > .full,
.product-form > .form-group.full {
    grid-column: 1 / -1;
}

.product-form .form-footer {
    margin-top: var(--space-8);
}

@media (max-width: 900px) {
    .product-form { grid-template-columns: 1fr; }
}

/* teks bantuan di bawah input */
.form-hint {
    display: block;
    margin-top: var(--space-8);
    color: var(--color-text-secondary);
}

.form-check-inline {
    height: var(--control-height);
    margin: 0;
}

/* panel info (mis. data produk yang tidak bisa diubah) */
.info-panel {
    margin: var(--space-20) 0;
    padding: var(--space-18) var(--space-20);
    border: var(--border-width) solid var(--color-border);
    border-left: var(--border-width-accent) solid var(--color-info);
    border-radius: var(--radius-md);
    background: var(--color-info-soft);
}

.info-panel-title {
    margin-bottom: var(--space-10);
    font-size: var(--font-size-lg);
    font-weight: var(--font-bold);
}

.info-panel-items {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-16) var(--space-40);
}

.info-panel-label {
    margin-bottom: var(--space-4);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.info-panel-note {
    margin-top: var(--space-14);
    color: var(--color-text-secondary);
}

/* form 4 kolom (mis. promo); .span-2 = 2 kolom, .full = selebar form */
.promo-form {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-12) var(--space-16);
}

.promo-form .form-group { margin-bottom: 0; }
.promo-form .span-2 { grid-column: span 2; }
.promo-form .full { grid-column: 1 / -1; }

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-8);
    padding-top: var(--space-16);
    border-top: var(--border-width) solid var(--color-border);
}

/* daftar centang yang bisa digulir (pilih produk) */
.check-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--filter-xl), 1fr));
    gap: var(--space-4) var(--space-16);
    max-height: var(--check-list-height);
    overflow-y: auto;
    padding: var(--space-8) var(--space-12);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-sm);
}

.check-item {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    min-height: var(--control-height-sm);
    cursor: pointer;
}

.check-item input {
    width: var(--checkbox-size);
    height: var(--checkbox-size);
    flex-shrink: 0;
}

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

@media (max-width: 768px) {
    .promo-form { grid-template-columns: minmax(0, 1fr); }
    .promo-form .span-2 { grid-column: auto; }
    .check-list { grid-template-columns: minmax(0, 1fr); }
}