/**
 * Styles cho Create Test Dialog - Đồng bộ với design system
 */

/**
 * Styles cho Create Test Dialog - Đồng bộ với design system
 */
.create-test-form { display: flex; flex-direction: column; gap: 18px; }
.create-test-form .form-group { display: flex; flex-direction: column; gap: 8px; }
.create-test-form label { display: block; font-size: var(--font-size-md); font-weight: 500; color: var(--text-color); margin-bottom: 0; }
.create-test-form .required { color: var(--color-danger); margin-left: 2px; }
.create-test-form input[type="text"], .create-test-form input[type="number"], .create-test-form textarea, .create-test-form select { width: 100%; padding: 10px 12px; border: 1px solid var(--border-color); border-radius: 6px; font-size: var(--font-size-md); font-family: var(--font-family-primary, 'FZ Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif); color: var(--text-color); background-color: var(--bg-surface); transition: all 0.2s ease; box-sizing: border-box; }
.create-test-form input[type="text"]:focus, .create-test-form input[type="number"]:focus, .create-test-form textarea:focus, .create-test-form select:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); }
.create-test-form input[type="text"]:hover, .create-test-form input[type="number"]:hover, .create-test-form textarea:hover, .create-test-form select:hover { border-color: var(--text-muted); }
.create-test-form textarea { resize: vertical; min-height: 80px; font-family: inherit; }
.create-test-form select { cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23374151' d='M6 9L1 4h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px; }
.create-test-form .selection-sets-info { padding: 16px; background-color: var(--gray-50); border-radius: 6px; border: 1px solid var(--gray-200); margin-top: 4px; }
.create-test-form .info-text { margin: 0 0 12px 0; font-size: var(--font-size-base); color: var(--gray-500); line-height: 1.5; }
.create-test-form .info-text strong { color: var(--gray-700); font-weight: 600; }
.create-test-form .selection-preview, .create-test-form .model-preview { margin-bottom: 12px; }
.create-test-form .selection-item, .create-test-form .model-item { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--gray-200); gap: 12px; }
.create-test-form .selection-item:last-child, .create-test-form .model-item:last-child { border-bottom: none; }
.create-test-form .selection-item strong, .create-test-form .model-item strong { color: var(--text-color); font-size: var(--font-size-md); font-weight: 600; min-width: 180px; }
.create-test-form .selection-item span, .create-test-form .model-item span { color: var(--gray-700); font-size: var(--font-size-md); flex: 1; }
.create-test-form .model-item select { flex: 1; padding: 8px 12px; border: 1px solid var(--border-color); border-radius: 6px; font-size: var(--font-size-md); font-family: inherit; color: var(--text-color); background-color: var(--bg-surface); transition: all 0.2s ease; }
.create-test-form .model-item select:hover { border-color: var(--text-muted); }
.create-test-form .model-item select:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); }
.create-test-form .model-item select:disabled { background-color: var(--gray-100); color: var(--gray-400); cursor: not-allowed; }
.create-test-form #btn-select-from-viewer { width: 100%; margin-top: 12px; padding: 10px 16px; font-size: var(--font-size-md); font-weight: 500; background-color: var(--bg-surface); color: var(--gray-700); border: 1px solid var(--border-color); border-radius: 6px; cursor: pointer; transition: all 0.2s ease; min-height: 40px; box-sizing: border-box; }
.create-test-form #btn-select-from-viewer:hover { background-color: var(--gray-50); border-color: var(--text-muted); }
.create-test-form #btn-select-from-viewer:active { background-color: var(--gray-100); border-color: var(--gray-500); }
.create-test-form input:invalid:not(:placeholder-shown), .create-test-form textarea:invalid:not(:placeholder-shown), .create-test-form select:invalid:not(:placeholder-shown) { border-color: var(--color-danger); }
.create-test-form input:invalid:not(:placeholder-shown):focus, .create-test-form textarea:invalid:not(:placeholder-shown):focus, .create-test-form select:invalid:not(:placeholder-shown):focus { box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1); }